Update css modules class naming convention

facebook · Jan 17, 2018 · 8d52f0d · 8d52f0d
1 parent 4e9c9da
commit 8d52f0d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -252,7 +252,7 @@ module.exports = {
                 options: {
                   importLoaders: 1,
                   modules: true,
-                  localIdentName: '[path][name]__[local]',
+                  localIdentName: '[path]__[name]___[local]',
                 },
               },
               {

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -289,7 +289,7 @@ module.exports = {
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
                         modules: true,
-                        localIdentName: '[path][name]__[local]',
+                        localIdentName: '[path]__[name]___[local]',
                       },
                     },
                     {

diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -27,7 +27,7 @@ describe('Integration', () => {
       expect(
         doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
       ).to.match(
-        /.+style-module__cssModulesInclusion+\{background:.+;color:.+}/
+        /.+__style-module___cssModulesInclusion+\{background:.+;color:.+}/
       );
     });
 

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
@@ -516,7 +516,7 @@ If you are concerned about using Webpack-specific semantics, you can put all you
 
 ## Adding a CSS Modules stylesheet
 
-This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the **[name].module.css** file naming convention. CSS Modules allows the scoping of CSS by automatically prefixing class names with a unique name and hash.
+This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the **[name].module.css** file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format **[dir]\_\_[filename]___[classname]**.
 
 An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
 
@@ -540,7 +540,8 @@ An advantage of this is the ability to repeat the same classname within many CSS
 
 ```js
 import React, { Component } from 'react';
-import styles from './Button.module.css'; // Import stylesheet as styles
+import './another-stylesheet.css'; // Import regular stylesheet
+import styles from './Button.module.css'; // Import css modules stylesheet as styles
 
 class Button extends Component {
   render() {
@@ -553,10 +554,10 @@ class Button extends Component {
 No clashes from other `.button` classnames
 
 ```html
-<div class="Button-module__button___1o1Ru"></div>
+<div class="src__Button-module___button"></div>
 ```
 
-**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explictly named as a css module stylesheet using the extension `.module.css`.
+**This is an optional feature.** Regular html stylesheets and js imported stylesheets are fully supported. CSS Modules are only added when explictly named as a css module stylesheet using the extension `.module.css`.
 
 ## Post-Processing CSS