Add support for CSS Modules with explicit filename - [name].module.css (!2285) · Merge requests · Meta / create-react-app

Merged Administrator requested to merge github/fork/ro-savage/add-css-modules into next May 20, 2017

Created by: ro-savage

This adds support for CSS Modules using the explicit file naming convention [name].module.css

When using css modules, class names follow a deterministic convention rather than the standard random hash with the covention [directory]__[filename]___[classname].

Given src/components/Button/Button.module.css with a class .primary {}, the generated classname will be src-components-Button__Button-module___primary.

This is done to allow targeting off elements via classname, causes minimal overhead with gzip-enabled, and allows a developer to find component location in the devtools.

See issue #2278 (closed) for more details.

Update - 6th Oct 2017

We are currently waiting on version 2 of Create-React-App to add css module support as it is a breaking change. The current release timeframe is unknown.

You may use react-scripts-cssmodules to add cssmodules in the meantime.

This is kept up to date with react-scripts and uses similar version numbers e.g. 1.0.140 equals 1.0.14.

You can use it by running npm uninstall react-scripts and npm install react-scripts-cssmodules. Or in new projects create-react-app my-app --scripts-version react-scripts-cssmodules`

Specific questions or feedback.

I have moved PostCSS options into a variable but repeated the rest of the style-loader code. This meaning repeated code but in my opinion is easier to follow. However, it could be changed to use less repeated code?
~~My regex is amateur is there anyway that the incorrect file could be captured by /\.modules.css$/ or the incorrect file excluded by /[^\.modules]\.css$/~~

I have been using this configuration in production for a couple months with no issues.