Change css modules class name to be deterministic and fix licences

Author: ro-savage

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.
     ],

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]',
                       },
                     },
                     {

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:.+}/
       );
     });
 

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';

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';