Should there be an inline option for universal apps using modules?

[fingermark]

I really like the idea of CSS modules and am interested in using it for an upcoming app. That app is also universal and I'm experimenting with https://github.com/erikras/react-redux-universal-hot-example but am running into an error where compose isn't working with CSS Modules (see more here: erikras/react-redux-universal-hot-example#184).

Would an inline option for modules be the correct solution for working with universal apps?

[bdefore]

👍 i'd also like to see a way of css modules composing in a way that could interoperate with tools that are expecting a real class name rather than the requiring concatenated to it.

[michael-ciniawsky]

@fingermark @bdefore Still interested in this ? Could one of you try to add this and send PR 😛 ?

[bdefore]

@michael-ciniawsky It's been a while since I made that post! The desire still remains, but whether others have an appetite for the sugar/magic I'm not sure.

My current use relies on css-loader and postcss-loader, and looks roughly like this:

in components/Foo.js:

import Styles from 'css/components/Foo.css'
// later on in JSX:
<Foo className={Styles.makeItBlue} />

in css/components/Foo.css:

.makeItBlue {
  color: blue;
}

What would be nice is if I could do the following:

// no import necessary, styles are imported automatically by path name
// later on in JSX, canonically snake case strings for classes
<Foo className="make-it-blue" />

in css/components/Foo.css:

.make-it-blue {
  color: blue;
}

A couple small wins there, but the current approach is not that painful either.

I could be completely misunderstanding what this issue originally asked for.

[kumarharsh]

@bdefore while useful, I feel that this approach would make using "global" classes a pain. And since classes being global is the default in HTML, the loader altering the default behaviour might cause a lot of raised eyebrows. Added on that, the current approach of importing local css modules and accessing classes as properties on it feels a little more sane - linting and autocomplete tools can be built easily.

[bdefore]

@kumarharsh agreed. the approach i've described is probably too proscriptive for its own good.

[michael-ciniawsky]

This would require changes to webpack core itself, to look up for CSS following a certain pattern like

component
 | – index.jsx
 | – index.css

and is out of scope for css-loader, since loaders in general are just transformers for non JS files, webpack's way to reason about the application structure is determined enterily by import/require.
In case webpack would provide a way to handle this scenario, css-loader && the like would come into play then. Please open an RFC in webpack/webpack instead