Update CSS Modules localIndetName (facebook#4192)

* Update CSS Modules localIndetName

* Add missing file to package

* Correct regex

* plz plz plz

config/webpack.config.dev.js

@@ -17,6 +17,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -269,7 +270,7 @@ module.exports = {
                 options: {
                   importLoaders: 1,
                   modules: true,
-                  localIdentName: '[path]__[name]___[local]',
+                  getLocalIdent: getCSSModuleLocalIdent,
                 },
               },
               {

config/webpack.config.prod.js

@@ -19,6 +19,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -306,7 +307,7 @@ module.exports = {
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
                         modules: true,
-                        localIdentName: '[path]__[name]___[local]',
+                        getLocalIdent: getCSSModuleLocalIdent,
                       },
                     },
                     {
@@ -422,7 +423,7 @@ module.exports = {
     // having to parse `index.html`.
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
-      publicPath: publicPath
+      publicPath: publicPath,
     }),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.

fixtures/kitchensink/integration/webpack.test.js

@@ -26,8 +26,11 @@ describe('Integration', () => {
 
       expect(
         doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
+      ).to.match(/.+style_cssModulesInclusion__.+\{background:.+;color:.+}/);
+      expect(
+        doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
       ).to.match(
-        /.+__style-module___cssModulesInclusion+\{background:.+;color:.+}/
+        /.+assets_cssModulesIndexInclusion__.+\{background:.+;color:.+}/
       );
     });
 

fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js

@@ -7,7 +7,13 @@
 
 import React from 'react';
 import styles from './assets/style.module.css';
+import indexStyles from './assets/index.module.css';
 
 export default () => (
-  <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
+  <div>
+    <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
+    <p className={indexStyles.cssModulesInclusion}>
+      CSS Modules with index are working!
+    </p>
+  </div>
 );

fixtures/kitchensink/src/features/webpack/assets/index.module.css

@@ -0,0 +1,4 @@
+.cssModulesIndexInclusion {
+  background: darkblue;
+  color: lightblue;
+}

package.json

@@ -50,6 +50,7 @@
     "html-webpack-plugin": "2.30.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "22.1.2",
+    "loader-utils": "^1.1.0",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.10",

template/README.md

@@ -518,49 +518,51 @@ 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 creating a unique classname of the format **[dir]\_\_[filename]___[classname]**.
+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 **[filename]\_[classname]\_\_[hash]**.
 
 An advantage 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;
+.error {
+  background-color: red;
 }
 ```
 
 ### `another-stylesheet.css`
 
 ```css
-.button {
-  color: green;
+.error {
+  color: red;
 }
 ```
 
 ### `Button.js`
 
 ```js
 import React, { Component } from 'react';
-import './another-stylesheet.css'; // Import regular stylesheet
 import styles from './Button.module.css'; // Import css modules stylesheet as styles
+import './another-stylesheet.css'; // Import regular stylesheet
+
 
 class Button extends Component {
   render() {
-    // You can use them as regular CSS styles
-    return <div className={styles.button} />;
+    // reference as a js object
+    return <button className={styles.error}>Error Button</button>;
   }
 }
 ```
 ### `exported HTML`
-No clashes from other `.button` classnames
+No clashes from other `.error` class names
 
 ```html
-<div class="src__Button-module___button"></div>
+<!-- This button has red background but not red text -->
+<button class="Button_error_ax7yz"></div>
 ```
 
 **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