Merge pull request facebook#136 from Jorer/fix-jest-snapshot-css-modules

Fix Jest snapshot CSS Module class names, add CSS Module class name template as a configuration option. Closes facebook#106 and facebook#97.

Author: kitze

README.md

@@ -44,6 +44,7 @@ Add a `.env.` file with the desired features.
 - ```REACT_APP_SASS_MODULES=true``` - enable Sass modules
 - ```REACT_APP_LESS_MODULES=true``` - enable Less modules
 - ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules
+- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name
 
 Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```.
 

packages/react-scripts/README.md

@@ -35,6 +35,7 @@ The generated project comes with every option turned on by default, but you can
 - ```REACT_APP_SASS_MODULES``` - enable Sass modules
 - ```REACT_APP_LESS_MODULES``` - enable Less modules
 - ```REACT_APP_STYLUS_MODULES``` - enable Stylus modules
+- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name
 
 Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```.
 

packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js

@@ -2,6 +2,9 @@ const postCssOptions = require('../options/postcss-options');
 const extractTextPluginOptions = require('../options/extract-text-plugin-options');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const localIdentName =
+  process.env.REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE ||
+  '[sha512:hash:base32]-[name]-[local]';
 
 module.exports = (loader, test, exclude, modules) => isDev => {
   let loaders = isDev
@@ -20,7 +23,7 @@ module.exports = (loader, test, exclude, modules) => isDev => {
         { importLoaders: 1 },
         modules === true
           ? {
-              localIdentName: '[sha512:hash:base32]-[name]-[local]',
+              localIdentName: localIdentName,
               modules: true,
             }
           : {}

packages/react-scripts/package.json

@@ -45,6 +45,7 @@
     "file-loader": "0.11.2",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "20.0.4",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -42,6 +42,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
     moduleNameMapper: {
       '^react-native$': 'react-native-web',
+      "\\.(s?css|styl|less)$": "identity-obj-proxy"
     },
     moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'],
   };
@@ -67,20 +68,20 @@ module.exports = (resolve, rootDir, isEjecting) => {
       console.error(
         chalk.red(
           'Out of the box, Create React App only supports overriding ' +
-            'these Jest options:\n\n' +
-            supportedKeys.map(key => chalk.bold('  \u2022 ' + key)).join('\n') +
-            '.\n\n' +
-            'These options in your package.json Jest configuration ' +
-            'are not currently supported by Create React App:\n\n' +
-            unsupportedKeys
-              .map(key => chalk.bold('  \u2022 ' + key))
-              .join('\n') +
-            '\n\nIf you wish to override other Jest options, you need to ' +
-            'eject from the default setup. You can do so by running ' +
-            chalk.bold('npm run eject') +
-            ' but remember that this is a one-way operation. ' +
-            'You may also file an issue with Create React App to discuss ' +
-            'supporting more options out of the box.\n'
+          'these Jest options:\n\n' +
+          supportedKeys.map(key => chalk.bold('  \u2022 ' + key)).join('\n') +
+          '.\n\n' +
+          'These options in your package.json Jest configuration ' +
+          'are not currently supported by Create React App:\n\n' +
+          unsupportedKeys
+            .map(key => chalk.bold('  \u2022 ' + key))
+            .join('\n') +
+          '\n\nIf you wish to override other Jest options, you need to ' +
+          'eject from the default setup. You can do so by running ' +
+          chalk.bold('npm run eject') +
+          ' but remember that this is a one-way operation. ' +
+          'You may also file an issue with Create React App to discuss ' +
+          'supporting more options out of the box.\n'
         )
       );
       process.exit(1);

packages/react-scripts/template/.env

@@ -11,3 +11,6 @@ REACT_APP_STYLUS_MODULES = true;
 REACT_APP_LESS_MODULES = true;
 
 REACT_APP_WEBPACK_DASHBOARD = true;
+
+# CSS Module hash
+# REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE = 'module-[sha512:hash:base32]-[name]-[local]';