Update to react-scripts 1.0.17. Seperate css and cssmodules .css files. Update css classnames to [path]__[name]___[local]

Author: ro-savage

README.md

@@ -2,10 +2,54 @@
 
 Adds [CSS Modules](https://github.com/css-modules/css-modules) to [Create React App](https://github.com/facebookincubator/create-react-app).
 
+## How to use
 Either create a new project using
 `create-react-app my-app --scripts-version react-scripts-cssmodules`
 or within your existing project uninstall `react-scripts` and install `react-scripts-cssmodules`.
 
+## Using CSS and CSS Modules
+To import as regular css, do the same as in CRA. `import mystyles.css`
+To import as css modules, rename the file to `[name].module.css` and the use as normal css modules.
+
+## Example
+### `Button.module.css`
+
+```css
+.button {
+  padding: 20px;
+}
+```
+
+### `another-stylesheet.css`
+
+```css
+.button {
+  color: green;
+}
+```
+
+### `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
+
+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="src__Button-module___button"></div>
+```
+
+## Versioning
 This package is 10:1 with Create React App. E.g. v0.9.10 of this package is the same as and interchanable with v0.9.1 of Create React App.
 
 Any additional numbers are fixes for this app only. E.g. v0.9.21 is v0.9.2 of React App with a fix only for cssmodules.

config/polyfills.js

@@ -22,3 +22,9 @@ require('whatwg-fetch');
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require('object-assign');
+
+// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
+// We don't polyfill it in the browser--this is user's responsibility.
+if (process.env.NODE_ENV === 'test') {
+  require('raf').polyfill(global);
+}

config/webpack.config.dev.js

@@ -61,8 +61,6 @@ module.exports = {
     // changing JS code would still trigger a refresh.
   ],
   output: {
-    // Next line is not used in dev but WebpackDevServer crashes without it:
-    path: paths.appBuild,
     // Add /* filename */ comments to generated require()s in the output.
     pathinfo: true,
     // This does not produce a real file. It's just the virtual path that is
@@ -92,7 +90,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
       // @remove-on-eject-begin
       // Resolve Babel runtime relative to react-scripts.
@@ -126,7 +124,7 @@ module.exports = {
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|jsx|mjs)$/,
         enforce: 'pre',
         use: [
           {
@@ -164,7 +162,7 @@ module.exports = {
           },
           // Process JS with Babel.
           {
-            test: /\.(js|jsx)$/,
+            test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
@@ -192,7 +190,7 @@ module.exports = {
                 options: {
                   importLoaders: 1,
                   modules: true,
-                  localIdentName: '[path][name]__[local]',
+                  localIdentName: '[path]__[name]___[local]',
                 },
               },
               {

config/webpack.config.prod.js

@@ -42,18 +42,34 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
-// Note: defined here because it will be used more than once.
+// Create two seperate files for css and cssmodules this allow for
+// different settings to be used with ExtractTextPlugin.
 const cssFilename = 'static/css/[name].[contenthash:8].css';
+const cssModulesFilename = 'static/css/[name]-cssmodules.[contenthash:8].css';
 
 // ExtractTextPlugin expects the build output to be flat.
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 // However, our output is structured with css, js and media folders.
 // To have this structure working with relative paths, we have to use custom options.
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
+const extractTextPluginCSSOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-  { publicPath: Array(cssFilename.split('/').length).join('../') }
+    { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
+const extractTextPluginCSSModulesOptions = shouldUseRelativeAssetPaths
+  ? // Making sure that the publicPath goes back to to build folder.
+  { publicPath: Array(cssModulesFilename.split('/').length).join('../') }
+  : {};
+
+const ExtractTextPluginCSS = new ExtractTextPlugin({
+  filename: cssFilename,
+})
+
+const ExtractTextPluginCSSModules = new ExtractTextPlugin({
+  filename: cssModulesFilename,
+  ignoreOrder: true,
+})
+
 // 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.
@@ -96,7 +112,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
       // @remove-on-eject-begin
       // Resolve Babel runtime relative to react-scripts.
@@ -130,7 +146,7 @@ module.exports = {
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|jsx|mjs)$/,
         enforce: 'pre',
         use: [
           {
@@ -169,7 +185,7 @@ module.exports = {
           },
           // Process JS with Babel.
           {
-            test: /\.(js|jsx)$/,
+            test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
@@ -194,7 +210,7 @@ module.exports = {
           // in the main CSS file.
           {
             test: /\.module.css$/,
-            loader: ExtractTextPlugin.extract(
+            loader: ExtractTextPluginCSSModules.extract(
               Object.assign(
                 {
                   fallback: require.resolve('style-loader'),
@@ -204,7 +220,7 @@ module.exports = {
                       options: {
                         importLoaders: 1,
                         modules: true,
-                        localIdentName: '[path][name]__[local]',
+                        localIdentName: '[path]__[name]___[local]',
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
                       },
@@ -231,18 +247,23 @@ module.exports = {
                     },
                   ],
                 },
-                extractTextPluginOptions
+                extractTextPluginCSSModulesOptions
               )
             ),
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+            // Note: this won't work without `ExtractTextPluginCSSModules` in `plugins`.
           },
           {
             test: /\.css$/,
             exclude: /\.module\.css$/,
-            loader: ExtractTextPlugin.extract(
+            loader: ExtractTextPluginCSS.extract(
               Object.assign(
                 {
-                  fallback: require.resolve('style-loader'),
+                  fallback: {
+                    loader: require.resolve('style-loader'),
+                    options: {
+                      hmr: false,
+                    },
+                  },
                   use: [
                     {
                       loader: require.resolve('css-loader'),
@@ -274,10 +295,10 @@ module.exports = {
                     },
                   ],
                 },
-                extractTextPluginOptions
+                extractTextPluginCSSOptions
               )
             ),
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+            // Note: this won't work without `ExtractTextPluginCSS` in `plugins`.
           },
           // "file" loader makes sure assets end up in the `build` folder.
           // When you `import` an asset, you get its filename.
@@ -339,6 +360,9 @@ module.exports = {
         // https://github.com/mishoo/UglifyJS2/issues/2011
         comparisons: false,
       },
+      mangle: {
+        safari10: true,
+      },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default
@@ -348,10 +372,10 @@ module.exports = {
       sourceMap: shouldUseSourceMap,
     }),
     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin({
-      filename: cssFilename,
-      ignoreOrder: true,
-    }),
+    // We have two ExtractTextPlugins to allow for different settings for
+    // cssmodules and regular css
+    ExtractTextPluginCSS,
+    ExtractTextPluginCSSModules,
     // Generate a manifest file which contains a mapping of all asset filenames
     // to their corresponding output file so that tools can pick it up without
     // having to parse `index.html`.

config/webpackDevServer.config.js

@@ -10,6 +10,7 @@
 
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const path = require('path');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
 
@@ -72,8 +73,15 @@ module.exports = function(proxy, allowedHost) {
     quiet: true,
     // Reportedly, this avoids CPU overload on some systems.
     // https://github.com/facebookincubator/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebookincubator/create-react-app/issues/1065
     watchOptions: {
-      ignored: /node_modules/,
+      ignored: new RegExp(
+        `^(?!${path
+          .normalize(paths.appSrc + '/')
+          .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
+        'g'
+      ),
     },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
@@ -86,7 +94,7 @@ module.exports = function(proxy, allowedHost) {
     },
     public: allowedHost,
     proxy,
-    setup(app) {
+    before(app) {
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
       // This service worker file is effectively a 'no-op' that will reset any

package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-scripts-cssmodules",
-  "version": "1.0.142",
+  "version": "1.0.171",
   "description": "Configuration and scripts for Create React App - With CSS Modules",
   "repository": "ro-savage/react-scripts-cssmodules",
-  "license": "BSD-3-Clause",
+  "license": "MIT",
   "engines": {
     "node": ">=6"
   },
@@ -21,45 +21,46 @@
     "react-scripts": "./bin/react-scripts.js"
   },
   "dependencies": {
-    "autoprefixer": "7.1.2",
-    "babel-core": "6.25.0",
+    "autoprefixer": "7.1.6",
+    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.1.1",
-    "babel-preset-react-app": "^3.0.3",
+    "babel-loader": "7.1.2",
+    "babel-preset-react-app": "^3.1.0",
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
-    "css-loader": "0.28.4",
+    "css-loader": "0.28.7",
     "dotenv": "4.0.0",
-    "eslint": "4.4.1",
+    "eslint": "4.10.0",
     "eslint-config-react-app": "^2.0.1",
     "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.35.0",
-    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-flowtype": "2.39.1",
+    "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.1.0",
-    "extract-text-webpack-plugin": "3.0.0",
-    "file-loader": "0.11.2",
+    "eslint-plugin-react": "7.4.0",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.6",
+    "postcss-loader": "2.0.8",
     "promise": "8.0.1",
-    "react-dev-utils": "^4.1.0",
-    "style-loader": "0.18.2",
+    "raf": "3.4.0",
+    "react-dev-utils": "^4.2.1",
+    "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
-    "url-loader": "0.5.9",
-    "webpack": "3.5.1",
-    "webpack-dev-server": "2.8.2",
-    "webpack-manifest-plugin": "1.2.1",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.4",
+    "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
   "devDependencies": {
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "optionalDependencies": {
     "fsevents": "1.1.2"