Css modules

[b-m-f]

Hi,

are there any plans to support css modules?
F.e. through css-modules/postcss-modules, or is this sth thats to specific and should be done by extending the webpack config on a per project basis?

[jaredpalmer]

You can implement by modifying webpack in razzle.config.js. The plan is keep Razzle's default CSS inline with create-react-app's to ease migration.

[jaredpalmer]

Sorry I closed this and responded before seeing Dan's tweet this morning that CSS modules support landed in CRA. Yes, i suppose we should implement it as well.

[benkingcode]

I'm trying to add this now, following the steps from the CRA pull request. The only problem is server rendering, no CSS is coming through on the SSR request 🤔

[b-m-f]

I think the main thing is to use the style-loader in the dev environment (HMR) and using ExtractTextPlugin to pull out the CSS during prod build.

Edit: Just saw, that this is already done

[b-m-f]

I have created #460 .

This is what I had in mind. I am not that familiar with razzle yet. Just stumbled upon it today. Hope this might be helpful.

If it is going in the right direction I am happy to edit the other templates and add docs.

Edit: Having a similar issue as @dbbk now.

At commit 298fa1b with only css modules active it works fine. Trying to enable both fails. Unfortunately I do not have more time to look into this today.

Funny enough if you edit a file and HMR is applying an udpate the styles are correct.

[b-m-f]

Created #461 .

It should work now. On the server the locals have to be accessed to only get the identifier mappings, to get correct classNames on the Nodes, instead of trying to apply the css. This is recommended here as ExtractTextPlugin is used to provide the CSS in prod.