This is a bit of a troll post, but it looks like CSS-in-JS community really wants to have their colors and spacing units and all that stuff defined in JavaScript objects.
However CSS variables have reached nearly 95% browser adoption and they make many things far easier to do avoiding typical specificity issues, or problems where you do things like <StyledComponent as={AnotherStyledComponent}> but end up having different visual end result depending on which component's CSS loaded first.
You could just start throwing out the legacy workaround in CSS-in-JS solutions of declaring variables in JavaScript, but so far I haven't seen community paying attention to this.
So how long does it take for the CSS-in-JS community at large to move to CSS variables? Are there attempts in the community to fix this issue?
Top comments (3)
I use jss at work, from my perspective there is simply no use for css variables in any css-in js implementation. As we are using css-in-JS to avoid using css at all.
I cannot see how css variables will allow to avoid these issues. Can you provide an example?
Also keep in mind that 6% is still pretty high. Do you think that any company will be happy to have 6% reduce in profit just to use css variables?
The less than 6% can be targetted using a polyfill, and it is efficient enough to not slow down IE11 at all.
As for going for an example, how would you solve context sensitive focus color? Say regular blue when focused element is on a light background, light blue when on dark background, and a special case of white when on colored background that isn't light or dark.
Preferably I would like to see a solution where I don't need to tell indivually to each component what their focus color should be, because that is so prone to mistakes (forgetting). But when not doing directly to an element a naive solution easily has problems with nested elements as selector specificity becomes a problem.
The CSS variables solution for this is very simple.
Well the context is solved... with context in React. You can do as much with it as with css variables. I cannot say for styled-components but with jss it is a regular thing to do what you've described. See theming in react-jss (it's also very simple). Or you can simply pass it from component props if you need single component solution.
The biggest problem with css variables is that code can become undebbugable. When you pass context or prop you crearly see from where it's coming. Also where are you planning to define css varibles? In css files? Well, projects that use css-in-js do not have those. In JS? Then it's just better with context or props.