From 8d52f0d393e54d9cfdd9a2291e5adab907c39469 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 1 Nov 2017 09:29:33 +0700
Subject: [PATCH] Update css modules class naming convention

---
 packages/react-scripts/config/webpack.config.dev.js      | 2 +-
 packages/react-scripts/config/webpack.config.prod.js     | 2 +-
 .../fixtures/kitchensink/integration/webpack.test.js     | 2 +-
 packages/react-scripts/template/README.md                | 9 +++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index b6f5221d5a5..c8aa82cabab 100644
--- 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
index 0d6322f6ca8..e667ac16251 100644
--- 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
index 9ee7368cab9..06ec83602f3 100644
--- 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
index a957618d540..4c792e9ac31 100644
--- 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