linaria
linaria copied to clipboard
Object Style syntax
Describe the enhancement
Coming from emotion, I miss being able to define my styles as a JS object, like so:
const myStyle = css({
fontSize: "1.2rem",
});
It makes a big difference to me, especially when trying to write abstractions that work with styles.
Motivation
I have some utility styles that look like this (which linaria supports!):
export const fullWidth = {
width: "100%",
[theme.mediaQueries.medium]: {
width: "45rem",
},
[theme.mediaQueries.large]: {
width: "56rem",
},
}
But then I can't write the final styles as an object. I have to interpolate them into a template string, which makes my styles inconsistent across the code base.
const myStyle = css`
${fullWidth}
`;
Possible implementations
I'm not sure; it seems like this library is tied to how template strings work. Is it straightforward to support at all?
Related Issues
It seems like this was last discussed several months ago in #464, is it still infeasible?
It seems like this could be trivially provided by just a wrapper that calls the tagged template with an interpolation. I'm going to try out a proof of concept on a project I'm working on, and if it works I'll either throw together a PR if there's interest from the maintainers, or publish a small companion package.
I'm disappointed to admit that, absent something I'm missing or some work at the build stage, I don't think this is achievable. I spent more time than I'd like to admit fussing with the types before finally just casting to see the runtime behavior and... well... this is what I get:
.s11fyzev{-webkit-var(--s11fyzev-0);-moz-var(--s11fyzev-0);-ms-var(--s11fyzev-0);var(--s11fyzev-0);}
Really wanted, because also it's easier to mentally parse only JS in js files (right, there's jsx too, but jsx is just xml + js), just like react inline styles
Do the template strings need to exist at build time? I can't easily produce build time template strings in PureScript so this would be necessary for me to switch to linaria.