CSS modules

[nelix]

Which item in the dot points does CSS modules not meet?

[mxstbr]

overridable and preferably not opinionated about how

?

[TheSisb]

@mxstbr I don't see it.

[JedWatson]

not opinionated about build requirements

CSS modules (basically) requires Webpack. At least, it needs specific setup in your build process that generates your stylesheet and includes it in your page, which "CSS in JS" solutions do not.

Something that can't be extracted in your build process doesn't meet the requirements. Something that has to be extracted in your build process doesn't meet the requirements.

Aphrodite is a good example that passes both those tests.

[taion]

How do you extract CSS at build time with Aphrodite?

[JedWatson]

@taion like this:

var {html, css} = StyleSheetServer.renderStatic(() => {
    return ReactDOMServer.renderToString(<App/>);
});

Works for server-side rendering (we do this for several universally rendered production websites). Currently that happens on demand, but if you needed to you could take it further into an actual build process.

see https://github.com/Khan/aphrodite#server-side-rendering

[taion]

I saw that part. It seemed like this would be fairly difficult to work into a build pipeline, though. You'd have to build something custom to render your app in such a way that all styles got used.

[JedWatson]

@taion you would, I guess the point is that you could. Whereas with css-modules you have to add understanding of it into your build process.

Worth saying: one of my goals for this is to find something I can use for react-select. It currently ships with LESS and SASS (which support theme variables), as well as CSS compiled with the default theme. Which is a nightmare for maintenance and a burden for users because they need to work that into their build process somehow. Using css-modules would make things even worse, because then people also need Webpack.

[taion]

I think it's worth proving that out and seeing what the edge cases are.

Aphrodite for example (if I'm not mistaken) only injects styles that actually get used, rather than all styles that are defined, so you'd have a hard time extracting all your CSS.

Separately, one conceptual pain point with CSS modules is that, by relying on statically generated "real" classes, you end up with the same precedence issues with normal CSS if you pass a className from parent to child... if the properties overlap, good luck figuring out which one will take precedence.