From 8af43b854e5a3949bf4e3de883a39f8d30942d53 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Sat, 20 May 2017 22:26:57 +1200
Subject: [PATCH 1/5] Add css modules with [name].modules.css file convention
---
.../config/webpack.config.dev.js | 48 +++++++++++++----
.../config/webpack.config.prod.js | 54 +++++++++++++++----
.../features/webpack/CssModulesInclusion.js | 15 ++++++
.../webpack/CssModulesInclusion.test.js | 19 +++++++
.../features/webpack/assets/style.module.css | 4 ++
packages/react-scripts/template/README.md | 44 +++++++++++++++
6 files changed, 164 insertions(+), 20 deletions(-)
create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index c975a58c7..94a551cd8 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -30,6 +30,20 @@ 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({
+ 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.
@@ -209,8 +223,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'),
{
@@ -221,17 +237,7 @@ module.exports = {
},
{
loader: require.resolve('postcss-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({
- flexbox: 'no-2009',
- }),
- ],
- },
+ options: postCSSLoaderOptions,
},
],
},
@@ -253,6 +259,26 @@ module.exports = {
},
],
},
+ // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+ // using the extension .modules.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.
],
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 769016ed1..b39ba1137 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -55,6 +55,20 @@ 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({
+ 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.
@@ -221,8 +235,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(
{
@@ -243,18 +259,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 .modules.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({
- 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
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
new file mode 100644
index 000000000..04e3f053d
--- /dev/null
+++ b/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.cssModuleInclusion}>We love useless text.</p>
+);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
new file mode 100644
index 000000000..418852f4b
--- /dev/null
+++ b/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);
+ });
+});
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
new file mode 100644
index 000000000..c4bd3e15c
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
@@ -0,0 +1,4 @@
+.cssModuleInclusion {
+ background: darkblue;
+ color: lightblue;
+}
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 1eb13aec9..ba545d546 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -513,6 +513,50 @@ In development, expressing dependencies this way allows your styles to be reload
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
+## Adding a CSS Modules based 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 prefixing class names with a unique name and hash.
+
+An advantge 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;
+}
+```
+
+### `another-stylesheet.css`
+
+```css
+.button {
+ color: green;
+}
+```
+
+### `Button.js`
+
+```js
+import React, { Component } from 'react';
+import styles from './Button.module.css'; // Import 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="Button-module__button___1o1Ru"></div>
+```
+
+**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explicted named as a css module stylesheet.
+
## Post-Processing CSS
This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.
--
GitLab
From 3cb33042caad12d20f4a507b64a85cb8a7ef26d5 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 25 May 2017 06:19:56 +1200
Subject: [PATCH 2/5] Add e2e for CSS Modules
---
packages/react-scripts/config/webpack.config.dev.js | 2 +-
packages/react-scripts/config/webpack.config.prod.js | 9 +++++++--
.../fixtures/kitchensink/integration/webpack.test.js | 10 ++++++++++
packages/react-scripts/fixtures/kitchensink/src/App.js | 5 +++++
.../src/features/webpack/CssModulesInclusion.js | 2 +-
.../src/features/webpack/assets/style.module.css | 2 +-
packages/react-scripts/package.json | 1 +
.../react-scripts/scripts/utils/createJestConfig.js | 6 +++++-
8 files changed, 31 insertions(+), 6 deletions(-)
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 94a551cd8..158bba089 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -260,7 +260,7 @@ module.exports = {
],
},
// 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$/,
use: [
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index b39ba1137..658655a2c 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -275,14 +275,19 @@ module.exports = {
loader: ExtractTextPlugin.extract(
Object.assign(
{
- fallback: require.resolve('style-loader'),
+ fallback: {
+ loader: require.resolve('style-loader'),
+ options: {
+ hmr: false,
+ },
+ },
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
- sourceMap: true,
+ sourceMap: shouldUseSourceMap,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 1fe5c9f64..3fa1bc846 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -21,6 +21,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');
diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js
index 0a1663192..d1affb48a 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/App.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/App.js
@@ -81,6 +81,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)
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
index 04e3f053d..efac31863 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
@@ -11,5 +11,5 @@ import React from 'react';
import styles from './assets/style.module.css';
export default () => (
- <p className={styles.cssModuleInclusion}>We love useless text.</p>
+ <p className={styles.cssModulesInclusion}>CSS Modules are working!</p>
);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
index c4bd3e15c..2ce765188 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.module.css
@@ -1,4 +1,4 @@
-.cssModuleInclusion {
+.cssModulesInclusion {
background: darkblue;
color: lightblue;
}
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index d4d26b1d0..583fcc346 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -45,6 +45,7 @@
"file-loader": "1.1.6",
"fs-extra": "5.0.0",
"html-webpack-plugin": "2.30.1",
+ "identity-obj-proxy": "3.0.0",
"jest": "22.1.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 75736cfae..cdea70699 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -39,9 +39,13 @@ module.exports = (resolve, rootDir, isEjecting) => {
'config/jest/fileTransform.js'
),
},
- transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
+ transformIgnorePatterns: [
+ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$',
+ '^.+\\.module\\.css$',
+ ],
moduleNameMapper: {
'^react-native$': 'react-native-web',
+ '^.+\\.module\\.css$': 'identity-obj-proxy',
},
moduleFileExtensions: [
'web.js',
--
GitLab
From 82d70eea8c98739782baed9341bad06c58ec83eb Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Sat, 17 Jun 2017 22:54:24 +1000
Subject: [PATCH 3/5] Updated based on feedback
---
packages/react-scripts/template/README.md | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index ba545d546..a957618d5 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -24,6 +24,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Importing a Component](#importing-a-component)
- [Code Splitting](#code-splitting)
- [Adding a Stylesheet](#adding-a-stylesheet)
+- [Adding a CSS Modules stylesheet](#adding-a-css-modules-stylesheet)
- [Post-Processing CSS](#post-processing-css)
- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
@@ -513,11 +514,11 @@ In development, expressing dependencies this way allows your styles to be reload
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
-## Adding a CSS Modules based stylesheet.
+## 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 prefixing class names with a unique name and hash.
-An advantge of this,is the ability to repeat the same classname within many CSS files without worrying about a clash.
+An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
### `Button.module.css`
@@ -555,7 +556,7 @@ No clashes from other `.button` classnames
<div class="Button-module__button___1o1Ru"></div>
```
-**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explicted named as a css module stylesheet.
+**This is an optional feature.** Regular stylesheets and 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
--
GitLab
From 4e9c9da7a04febb01691a3a1cb6513307e8b2719 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Mon, 30 Oct 2017 18:55:13 +0700
Subject: [PATCH 4/5] Change css modules class name to be deterministic and fix
licences
---
.../config/webpack.config.dev.js | 40 +++++++++----------
.../config/webpack.config.prod.js | 4 +-
.../kitchensink/integration/webpack.test.js | 2 +-
.../features/webpack/CssModulesInclusion.js | 6 +--
.../webpack/CssModulesInclusion.test.js | 6 +--
5 files changed, 27 insertions(+), 31 deletions(-)
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 158bba089..b6f5221d5 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/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.
],
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 658655a2c..0d6322f6c 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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]',
},
},
{
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 3fa1bc846..9ee7368ca 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/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:.+}/
);
});
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
index efac31863..0f96ae161 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js
+++ b/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';
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
index 418852f4b..6eae30fb8 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.test.js
+++ b/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';
--
GitLab
From 8d52f0d393e54d9cfdd9a2291e5adab907c39469 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 1 Nov 2017 09:29:33 +0700
Subject: [PATCH 5/5] Update css modules class naming convention
---
packages/react-scripts/config/webpack.config.dev.js | 2 +-
packages/react-scripts/config/webpack.config.prod.js | 2 +-
.../fixtures/kitchensink/integration/webpack.test.js | 2 +-
packages/react-scripts/template/README.md | 9 +++++----
4 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index b6f5221d5..c8aa82cab 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -252,7 +252,7 @@ module.exports = {
options: {
importLoaders: 1,
modules: true,
- localIdentName: '[path][name]__[local]',
+ localIdentName: '[path]__[name]___[local]',
},
},
{
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 0d6322f6c..e667ac162 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -289,7 +289,7 @@ module.exports = {
minimize: true,
sourceMap: shouldUseSourceMap,
modules: true,
- localIdentName: '[path][name]__[local]',
+ localIdentName: '[path]__[name]___[local]',
},
},
{
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 9ee7368ca..06ec83602 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/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:.+}/
);
});
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index a957618d5..4c792e9ac 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -516,7 +516,7 @@ 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 prefixing class names with a unique name and hash.
+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]**.
An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
@@ -540,7 +540,8 @@ An advantage of this is the ability to repeat the same classname within many CSS
```js
import React, { Component } from 'react';
-import styles from './Button.module.css'; // Import stylesheet as styles
+import './another-stylesheet.css'; // Import regular stylesheet
+import styles from './Button.module.css'; // Import css modules stylesheet as styles
class Button extends Component {
render() {
@@ -553,10 +554,10 @@ class Button extends Component {
No clashes from other `.button` classnames
```html
-<div class="Button-module__button___1o1Ru"></div>
+<div class="src__Button-module___button"></div>
```
-**This is an optional feature.** Regular stylesheets and imported stylesheets are fully supported. CSS Modules are only added when explictly named as a css module stylesheet using the extension `.module.css`.
+**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
--
GitLab