Hacker News Reader

Comment by iooi | Hacker News Reader

I use CSS modules coupled with postcss (mainly for minimization and autoprefixing) and sass-loader almost exclusively. The one benefit from CSS-in-JS I can think of is when the JS needs to know of a value that would otherwise exist in CSS only.

For example, I'll usually have a constants.scss file that I @import in other files, which for example will have a $max-modal-width: 600px;

I have run across use cases where I want to read that value from JS, but I could never figure out how to do that and resorted to duplicating the constant's value in my code. CSS-in-JS would make this trivial.

View on HN

CIJ also has the advantage of being able to more easily inject different configuration values for different builds/deployments... Client X deployment has a primary color of blue, client Y is red. And it can go much deeper where a theme is used globally and each component creates its' own styling based on that theme.

With SCSS/Less, it's actually painful to try and inject these values in to the build, and more prone to error. In your example, say deployment A has a $max-modal-width of 600px, B is 550px. Or colors are different, fonts, other styling.

You can use CSS Variables to bridge between.

   var style = getComputedStyle(document.body);
   console.log(style.getPropertyValue('--color-font-general'));
   :root { --color-font-general: #336699; }

As a bonus point, you can also change the values of CSS Variables and layout will update automatically. Take a closer look at styles of YouTube.

Seems like a rather ugly hack to reverse-render values out.

CSS Variables seems to be very useful for CSS. I am not sure if changing dynamically CSS variables from JS is a great idea but you have options to do so.

There is more coming in project Houdini. https://developers.google.com/web/updates/2016/05/houdini#th...

for your specific example - you can declare SCSS variables in a JSON file, that makes the definitions accessible to both JS and SCSS.

This sounds pretty interesting, thanks for sharing. Do you have an example you can share? Are you using node-sass-json-importer?

Using sass-vars-loader for this which is a webpack plugin: https://github.com/epegzz/sass-vars-loader

Reply on news.ycombinator.com