From 8af43b854e5a3949bf4e3de883a39f8d30942d53 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Sat, 20 May 2017 22:26:57 +1200
Subject: [PATCH 1/5] Add css modules with [name].modules.css file convention

---
 .../config/webpack.config.dev.js              | 48 +++++++++++++----
 .../config/webpack.config.prod.js             | 54 +++++++++++++++----
 .../features/webpack/CssModulesInclusion.js   | 15 ++++++
 .../webpack/CssModulesInclusion.test.js       | 19 +++++++
 .../features/webpack/assets/style.module.css  |  4 ++
 packages/react-scripts/template/README.md     | 44 +++++++++++++++
 6 files changed, 164 insertions(+), 20 deletions(-)
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index c975a58c790..94a551cd801 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -30,6 +30,20 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+// Options for PostCSS as we reference these options twice
+// Adds vendor prefixing to support IE9 and above
+const postCSSLoaderOptions = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebookincubator/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: () => [
+    require('postcss-flexbugs-fixes'),
+    autoprefixer({
+      flexbox: 'no-2009',
+    }),
+  ],
+};
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -209,8 +223,10 @@ module.exports = {
           // "style" loader turns CSS into JS modules that inject <style> tags.
           // In production, we use a plugin to extract that CSS to a file, but
           // in development "style" loader enables hot editing of CSS.
+          // By default we support CSS Modules with the extension .module.css
           {
             test: /\.css$/,
+            exclude: /\.module\.css$/,
             use: [
               require.resolve('style-loader'),
               {
@@ -221,17 +237,7 @@ module.exports = {
               },
               {
                 loader: require.resolve('postcss-loader'),
-                options: {
-                  // Necessary for external CSS imports to work
-                  // https://github.com/facebookincubator/create-react-app/issues/2677
-                  ident: 'postcss',
-                  plugins: () => [
-                    require('postcss-flexbugs-fixes'),
-                    autoprefixer({
-                      flexbox: 'no-2009',
-                    }),
-                  ],
-                },
+                options: postCSSLoaderOptions,
               },
             ],
           },
@@ -253,6 +259,26 @@ module.exports = {
           },
         ],
       },
+      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+      // using the extension .modules.css
+      {
+        test: /\.module\.css$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+            },
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: postCSSLoaderOptions,
+          },
+        ],
+      },
       // ** STOP ** Are you adding a new loader?
       // Make sure to add the new loader(s) before the "file" loader.
     ],
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 769016ed1b6..b39ba11372b 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -55,6 +55,20 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
     { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
+// Options for PostCSS as we reference these options twice
+// Adds vendor prefixing to support IE9 and above
+const postCSSLoaderOptions = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebookincubator/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: () => [
+    require('postcss-flexbugs-fixes'),
+    autoprefixer({
+      flexbox: 'no-2009',
+    }),
+  ],
+};
+
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -221,8 +235,10 @@ module.exports = {
           // tags. If you use code splitting, however, any async bundles will still
           // use the "style" loader inside the async code so CSS from them won't be
           // in the main CSS file.
+          // By default we support CSS Modules with the extension .module.css
           {
             test: /\.css$/,
+            exclude: /\.module\.css$/,
             loader: ExtractTextPlugin.extract(
               Object.assign(
                 {
@@ -243,18 +259,38 @@ module.exports = {
                     },
                     {
                       loader: require.resolve('postcss-loader'),
+                      options: postCSSLoaderOptions,
+                    },
+                  ],
+                },
+                extractTextPluginOptions
+              )
+            ),
+            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+          },
+          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+          // using the extension .modules.css
+          {
+            test: /\.module\.css$/,
+            loader: ExtractTextPlugin.extract(
+              Object.assign(
+                {
+                  fallback: require.resolve('style-loader'),
+                  use: [
+                    {
+                      loader: require.resolve('css-loader'),
                       options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            flexbox: 'no-2009',
-                          }),
-                        ],
+                        importLoaders: 1,
+                        minimize: true,
+                        sourceMap: true,
+                        modules: true,
+                        localIdentName: '[name]__[local]___[hash:base64:5]',
                       },
                     },
+                    {
+                      loader: require.resolve('postcss-loader'),
+                      options: postCSSLoaderOptions,
+                    },
                   ],
                 },
                 extractTextPluginOptions
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
new file mode 100644
index 00000000000..04e3f053d91
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import React from 'react';
+import styles from './assets/style.module.css';
+
+export default () => (
+  <p className={styles.cssModuleInclusion}>We love useless text.</p>
+);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
new file mode 100644
index 00000000000..418852f4b0d
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CssModulesInclusion from './CssModulesInclusion';
+
+describe('css modules inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<CssModulesInclusion />, div);
+  });
+});
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
new file mode 100644
index 00000000000..c4bd3e15c02
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
@@ -0,0 +1,4 @@
+.cssModuleInclusion {
+  background: darkblue;
+  color: lightblue;
+}
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 1eb13aec940..ba545d546cc 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -513,6 +513,50 @@ In development, expressing dependencies this way allows your styles to be reload
 
 If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
 
+## Adding a CSS Modules based 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.
+
+An advantge of this,is the ability to repeat the same classname within many CSS files without worrying about a clash.
+
+### `Button.module.css`
+
+```css
+.button {
+  padding: 20px;
+}
+```
+
+### `another-stylesheet.css`
+
+```css
+.button {
+  color: green;
+}
+```
+
+### `Button.js`
+
+```js
+import React, { Component } from 'react';
+import styles from './Button.module.css'; // Import stylesheet as styles
+
+class Button extends Component {
+  render() {
+    // You can use them as regular CSS styles
+    return <div className={styles.button} />;
+  }
+}
+```
+### `exported HTML`
+No clashes from other `.button` classnames
+
+```html
+<div class="Button-module__button___1o1Ru"></div>
+```
+
+**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explicted named as a css module stylesheet. 
+
 ## Post-Processing CSS
 
 This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.

From 3cb33042caad12d20f4a507b64a85cb8a7ef26d5 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 25 May 2017 06:19:56 +1200
Subject: [PATCH 2/5] Add e2e for CSS Modules

---
 packages/react-scripts/config/webpack.config.dev.js    |  2 +-
 packages/react-scripts/config/webpack.config.prod.js   |  9 +++++++--
 .../fixtures/kitchensink/integration/webpack.test.js   | 10 ++++++++++
 packages/react-scripts/fixtures/kitchensink/src/App.js |  5 +++++
 .../src/features/webpack/CssModulesInclusion.js        |  2 +-
 .../src/features/webpack/assets/style.module.css       |  2 +-
 packages/react-scripts/package.json                    |  1 +
 .../react-scripts/scripts/utils/createJestConfig.js    |  6 +++++-
 8 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 94a551cd801..158bba089fd 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -260,7 +260,7 @@ module.exports = {
         ],
       },
       // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-      // using the extension .modules.css
+      // using the extension .module.css
       {
         test: /\.module\.css$/,
         use: [
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index b39ba11372b..658655a2cd2 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -275,14 +275,19 @@ module.exports = {
             loader: ExtractTextPlugin.extract(
               Object.assign(
                 {
-                  fallback: require.resolve('style-loader'),
+                  fallback: {
+                    loader: require.resolve('style-loader'),
+                    options: {
+                      hmr: false,
+                    },
+                  },
                   use: [
                     {
                       loader: require.resolve('css-loader'),
                       options: {
                         importLoaders: 1,
                         minimize: true,
-                        sourceMap: true,
+                        sourceMap: shouldUseSourceMap,
                         modules: true,
                         localIdentName: '[name]__[local]___[hash:base64:5]',
                       },
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 1fe5c9f64cd..3fa1bc8466e 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -21,6 +21,16 @@ describe('Integration', () => {
       ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/);
     });
 
+    it('css modules inclusion', async () => {
+      const doc = await initDOM('css-modules-inclusion');
+
+      expect(
+        doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
+      ).to.match(
+        /\.style-module__cssModulesInclusion___.+\{background:.+;color:.+}/
+      );
+    });
+
     it('image inclusion', async () => {
       const doc = await initDOM('image-inclusion');
 
diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js
index 0a1663192ee..d1affb48af9 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/App.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/App.js
@@ -81,6 +81,11 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'css-modules-inclusion':
+        import(
+          './features/webpack/CssModulesInclusion'
+        ).then(f => this.setFeature(f.default));
+        break;
       case 'custom-interpolation':
         import('./features/syntax/CustomInterpolation').then(f =>
           this.setFeature(f.default)
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
index 04e3f053d91..efac3186309 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
@@ -11,5 +11,5 @@ import React from 'react';
 import styles from './assets/style.module.css';
 
 export default () => (
-  <p className={styles.cssModuleInclusion}>We love useless text.</p>
+  <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
 );
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
index c4bd3e15c02..2ce76518875 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
@@ -1,4 +1,4 @@
-.cssModuleInclusion {
+.cssModulesInclusion {
   background: darkblue;
   color: lightblue;
 }
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index d4d26b1d017..583fcc346a7 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -45,6 +45,7 @@
     "file-loader": "1.1.6",
     "fs-extra": "5.0.0",
     "html-webpack-plugin": "2.30.1",
+    "identity-obj-proxy": "3.0.0",
     "jest": "22.1.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 75736cfaee3..cdea70699c0 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -39,9 +39,13 @@ module.exports = (resolve, rootDir, isEjecting) => {
         'config/jest/fileTransform.js'
       ),
     },
-    transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
+    transformIgnorePatterns: [
+      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$',
+      '^.+\\.module\\.css$',
+    ],
     moduleNameMapper: {
       '^react-native$': 'react-native-web',
+      '^.+\\.module\\.css$': 'identity-obj-proxy',
     },
     moduleFileExtensions: [
       'web.js',

From 82d70eea8c98739782baed9341bad06c58ec83eb Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Sat, 17 Jun 2017 22:54:24 +1000
Subject: [PATCH 3/5] Updated based on feedback

---
 packages/react-scripts/template/README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index ba545d546cc..a957618d540 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -24,6 +24,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Importing a Component](#importing-a-component)
 - [Code Splitting](#code-splitting)
 - [Adding a Stylesheet](#adding-a-stylesheet)
+- [Adding a CSS Modules stylesheet](#adding-a-css-modules-stylesheet)
 - [Post-Processing CSS](#post-processing-css)
 - [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
 - [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
@@ -513,11 +514,11 @@ In development, expressing dependencies this way allows your styles to be reload
 
 If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
 
-## Adding a CSS Modules based stylesheet.
+## 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.
 
-An advantge of this,is the ability to repeat the same classname within many CSS files without worrying about a clash.
+An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
 
 ### `Button.module.css`
 
@@ -555,7 +556,7 @@ No clashes from other `.button` classnames
 <div class="Button-module__button___1o1Ru"></div>
 ```
 
-**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explicted named as a css module stylesheet. 
+**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`.
 
 ## Post-Processing CSS
 

From 4e9c9da7a04febb01691a3a1cb6513307e8b2719 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Mon, 30 Oct 2017 18:55:13 +0700
Subject: [PATCH 4/5] Change css modules class name to be deterministic and fix
 licences

---
 .../config/webpack.config.dev.js              | 40 +++++++++----------
 .../config/webpack.config.prod.js             |  4 +-
 .../kitchensink/integration/webpack.test.js   |  2 +-
 .../features/webpack/CssModulesInclusion.js   |  6 +--
 .../webpack/CssModulesInclusion.test.js       |  6 +--
 5 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 158bba089fd..b6f5221d5a5 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -241,6 +241,26 @@ module.exports = {
               },
             ],
           },
+          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+          // using the extension .module.css
+          {
+            test: /\.module\.css$/,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1,
+                  modules: true,
+                  localIdentName: '[path][name]__[local]',
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: postCSSLoaderOptions,
+              },
+            ],
+          },
           // "file" loader makes sure those assets get served by WebpackDevServer.
           // When you `import` an asset, you get its (virtual) filename.
           // In production, they would get copied to the `build` folder.
@@ -259,26 +279,6 @@ module.exports = {
           },
         ],
       },
-      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-      // using the extension .module.css
-      {
-        test: /\.module\.css$/,
-        use: [
-          require.resolve('style-loader'),
-          {
-            loader: require.resolve('css-loader'),
-            options: {
-              importLoaders: 1,
-              modules: true,
-              localIdentName: '[name]__[local]___[hash:base64:5]',
-            },
-          },
-          {
-            loader: require.resolve('postcss-loader'),
-            options: postCSSLoaderOptions,
-          },
-        ],
-      },
       // ** STOP ** Are you adding a new loader?
       // Make sure to add the new loader(s) before the "file" loader.
     ],
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 658655a2cd2..0d6322f6ca8 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -269,7 +269,7 @@ module.exports = {
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .modules.css
+          // using the extension .module.css
           {
             test: /\.module\.css$/,
             loader: ExtractTextPlugin.extract(
@@ -289,7 +289,7 @@ module.exports = {
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
                         modules: true,
-                        localIdentName: '[name]__[local]___[hash:base64:5]',
+                        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 3fa1bc8466e..9ee7368cab9 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/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
index efac3186309..0f96ae161fb 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
@@ -1,10 +1,8 @@
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
index 418852f4b0d..6eae30fb850 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
@@ -1,10 +1,8 @@
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';

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 5/5] 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