Merge branch 'add-css-modules' of https://github.com/ro-savage/create-react-app into ro-savage-add-css-modules

Author: dchambers

README.md

@@ -191,7 +191,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.
 

packages/react-scripts/config/webpack.config.dev.js

@@ -32,6 +32,26 @@ 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 = {
+ // Necessary for external CSS imports to work
+ // https://github.com/facebookincubator/create-react-app/issues/2677
+ ident: 'postcss',
+ 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.
@@ -185,8 +205,10 @@ 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 .module.css
  {
  test: /\.css$/,
+ exclude: /\.module\.css$/,
  use: [
  require.resolve('style-loader'),
  {
@@ -197,24 +219,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 .module.css
+ {
+ test: /\.module\.css$/,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: require.resolve('css-loader'),
  options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- 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,
+ },
  ],
  },
  // "file" loader makes sure those assets get served by WebpackDevServer.

packages/react-scripts/config/webpack.config.prod.js

@@ -56,6 +56,26 @@ 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 = {
+ // Necessary for external CSS imports to work
+ // https://github.com/facebookincubator/create-react-app/issues/2677
+ ident: 'postcss',
+ 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.
@@ -194,8 +214,10 @@ 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 .module.css
  {
  test: /\.css$/,
+ exclude: /\.module\.css$/,
  loader: ExtractTextPlugin.extract(
  Object.assign(
  {
@@ -211,24 +233,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 .module.css
+ {
+ test: /\.module\.css$/,
+ loader: ExtractTextPlugin.extract(
+ Object.assign(
+ {
+ fallback: require.resolve('style-loader'),
+ use: [
+ {
+ loader: require.resolve('css-loader'),
  options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- 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

packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js

@@ -23,6 +23,16 @@ describe('Integration', () => {
  ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/);
  });
 
+ it('css modules inclusion', async () => {
+ const doc = await initDOM('css-modules-inclusion');
+
+ expect(
+ doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
+ ).to.match(
+ /\.style-module__cssModulesInclusion___.+\{background:.+;color:.+}/
+ );
+ });
+
  it('image inclusion', async () => {
  const doc = await initDOM('image-inclusion');
 

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -83,6 +83,11 @@ class App extends Component {
  this.setFeature(f.default)
  );
  break;
+ case 'css-modules-inclusion':
+ import(
+ './features/webpack/CssModulesInclusion'
+ ).then(f => this.setFeature(f.default));
+ break;
  case 'custom-interpolation':
  import('./features/syntax/CustomInterpolation').then(f =>
  this.setFeature(f.default)

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.module.css';
+
+export default () => (
+ <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
+);

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

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css

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

packages/react-scripts/package.json

@@ -43,6 +43,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",
  "object-assign": "4.1.1",
  "postcss-flexbugs-fixes": "3.2.0",

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

@@ -39,9 +39,13 @@ module.exports = (resolve, rootDir, isEjecting) => {
  '^.+\\.css$': resolve('config/jest/cssTransform.js'),
  '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'),
  },
- transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+ transformIgnorePatterns: [
+ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
+ '^.+\\.module\\.css$',
+ ],
  moduleNameMapper: {
  '^react-native$': 'react-native-web',
+ '^.+\\.module\\.css$': 'identity-obj-proxy',
  },
  moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'],
  };