From 2df8db882d2e022e1c91cd17ee0dc0239b62641a 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/2] Add css modules with [name].modules.css file convention

---
 README.md                                     |  1 -
 .../config/webpack.config.dev.js              | 53 +++++++++++-----
 .../config/webpack.config.prod.js             | 63 ++++++++++++++-----
 .../features/webpack/CssModulesInclusion.js   | 15 +++++
 .../webpack/CssModulesInclusion.test.js       | 19 ++++++
 .../features/webpack/assets/style.modules.css |  4 ++
 packages/react-scripts/template/README.md     | 45 +++++++++++++
 7 files changed, 171 insertions(+), 29 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.modules.css

diff --git a/README.md b/README.md
index 8cd74f24f86..90c1c35b0fd 100644
--- a/README.md
+++ b/README.md
@@ -188,7 +188,6 @@ Some features are currently **not supported**:
 
 * Server rendering.
 * Some experimental syntax extensions (e.g. decorators).
-* CSS Modules.
 * Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)).
 * Hot reloading of components.
 
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index adf92f5b124..4a83fb04483 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -32,6 +32,24 @@ 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 = {
+  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+  plugins: () => [
+    require('postcss-flexbugs-fixes'),
+    autoprefixer({
+      browsers: [
+        '>1%',
+        'last 4 versions',
+        'Firefox ESR',
+        'not ie < 9', // React doesn't support IE8 anyway
+      ],
+      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.
@@ -204,8 +222,9 @@ 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 .modules.css
       {
-        test: /\.css$/,
+        test: /[^\.modules]\.css$/,
         use: [
           require.resolve('style-loader'),
           {
@@ -216,22 +235,28 @@ module.exports = {
           },
           {
             loader: require.resolve('postcss-loader'),
+            options: postCSSLoaderOptions,
+          },
+        ],
+      },
+      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+      // using the extension .modules.css
+      {
+        test: /\.modules.css$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
             options: {
-              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-              plugins: () => [
-                require('postcss-flexbugs-fixes'),
-                autoprefixer({
-                  browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'Firefox ESR',
-                    'not ie < 9', // React doesn't support IE8 anyway
-                  ],
-                  flexbox: 'no-2009',
-                }),
-              ],
+              importLoaders: 1,
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
             },
           },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: postCSSLoaderOptions,
+          },
         ],
       },
       // ** STOP ** Are you adding a new loader?
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 3de2775e030..9d11a228ba2 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -54,6 +54,24 @@ 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 = {
+  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+  plugins: () => [
+    require('postcss-flexbugs-fixes'),
+    autoprefixer({
+      browsers: [
+        '>1%',
+        'last 4 versions',
+        'Firefox ESR',
+        'not ie < 9', // React doesn't support IE8 anyway
+      ],
+      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.
@@ -205,8 +223,9 @@ 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 .modules.css
       {
-        test: /\.css$/,
+        test: /[^\.modules]\.css$/,
         loader: ExtractTextPlugin.extract(
           Object.assign(
             {
@@ -222,22 +241,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: /\.modules.css$/,
+        loader: ExtractTextPlugin.extract(
+          Object.assign(
+            {
+              fallback: require.resolve('style-loader'),
+              use: [
+                {
+                  loader: require.resolve('css-loader'),
                   options: {
-                    ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-                    plugins: () => [
-                      require('postcss-flexbugs-fixes'),
-                      autoprefixer({
-                        browsers: [
-                          '>1%',
-                          'last 4 versions',
-                          'Firefox ESR',
-                          'not ie < 9', // React doesn't support IE8 anyway
-                        ],
-                        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..13a3540a7b8
--- /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.modules.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.modules.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.modules.css
new file mode 100644
index 00000000000..c4bd3e15c02
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.modules.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 25b469fb680..f5365091a5d 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -409,6 +409,51 @@ 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].modules.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.modules.css`
+
+```css
+.button {
+  padding: 20px;
+}
+```
+
+### `another-stylesheet.css`
+
+```css
+.button {
+  color: green;
+}
+```
+
+### `Button.js`
+
+```js
+import React, { Component } from 'react';
+import styles from './Button.modules.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-modules__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 913a7bbd969bba238d5b16e766159580eadd1817 Mon Sep 17 00:00:00 2001
From: Abdulsattar <asattar.md@gmail.com>
Date: Tue, 23 May 2017 20:10:10 +0530
Subject: [PATCH 2/2] Use Function rule test

---
 packages/react-scripts/config/webpack.config.dev.js  | 2 +-
 packages/react-scripts/config/webpack.config.prod.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 4a83fb04483..08f208aa6cd 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -224,7 +224,7 @@ module.exports = {
       // in development "style" loader enables hot editing of CSS.
       // By default we support CSS Modules with the extension .modules.css
       {
-        test: /[^\.modules]\.css$/,
+        test: input => !/\.modules.css$/.test(input),
         use: [
           require.resolve('style-loader'),
           {
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 9d11a228ba2..e1bd94ebd5b 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -225,7 +225,7 @@ module.exports = {
       // in the main CSS file.
       // By default we support CSS Modules with the extension .modules.css
       {
-        test: /[^\.modules]\.css$/,
+        test: input => !/\.modules.css$/.test(input),
         loader: ExtractTextPlugin.extract(
           Object.assign(
             {