From 4b40a7d5f8905fd3697d99ec72bcfd6a0df60b2b Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 20 Mar 2018 19:32:13 +0200 Subject: [PATCH 01/26] Installs and adds sass loader task in webpack for dev environment. --- packages/react-scripts/config/webpack.config.dev.js | 9 +++++++++ packages/react-scripts/package.json | 1 + 2 files changed, 10 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 398b8bf53b7..f93e6750b9b 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -258,6 +258,15 @@ module.exports = { }, ], }, + { + test: /\.scss$/, + exclude: /\.module\.css$/, + loaders: [ + require.resolve('style-loader'), + require.resolve('css-loader'), + require.resolve('sass-loader'), + ], + }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 69bc74f2862..df85458de37 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -56,6 +56,7 @@ "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "^5.0.0", + "sass-loader": "^6.0.7", "style-loader": "0.19.1", "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", From 06708884834009c22dbeff7eab3b7bbb07c019c0 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 20 Mar 2018 20:02:57 +0200 Subject: [PATCH 02/26] Uses Timer's branch of sass-loader without node-sass dependency. --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index df85458de37..3f990845208 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -56,7 +56,7 @@ "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "^5.0.0", - "sass-loader": "^6.0.7", + "sass-loader": "https://github.com/Timer/sass-loader.git#remove-peerdep", "style-loader": "0.19.1", "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", From fc1b9d4046edb78384bcaf09392add4c141de110 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 08:56:13 +0200 Subject: [PATCH 03/26] Adds method for handling SASS modules. --- .../config/webpack.config.dev.js | 32 +++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f93e6750b9b..c1429060c34 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -258,15 +258,6 @@ module.exports = { }, ], }, - { - test: /\.scss$/, - exclude: /\.module\.css$/, - loaders: [ - require.resolve('style-loader'), - require.resolve('css-loader'), - require.resolve('sass-loader'), - ], - }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { @@ -287,6 +278,29 @@ module.exports = { }, ], }, + { + test: /\.scss$/, + exclude: /\.module\.css$/, + use: [ + require.resolve('style-loader'), + require.resolve('css-loader'), + require.resolve('sass-loader'), + ], + }, + { + test: /\.module\.scss$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + modules: true, + localIdentName: '[path]__[name]___[local]', + }, + }, + require.resolve('sass-loader'), + ], + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, From ac4cf34345f2f9218d6a6aeba93ac34a6883bfe5 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 12:54:04 +0200 Subject: [PATCH 04/26] Fixes extension of excluded files when looking for scss modules. --- packages/react-scripts/config/webpack.config.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c1429060c34..c1fc82bb887 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -280,7 +280,7 @@ module.exports = { }, { test: /\.scss$/, - exclude: /\.module\.css$/, + exclude: /\.module\.scss$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), From 61bd312992da5b7679fb3378b7dfc9f756937240 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 20:58:59 +0200 Subject: [PATCH 05/26] Adds support for both .scss and .sass extensions. --- packages/react-scripts/config/webpack.config.dev.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c1fc82bb887..37b57ecb3a5 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -278,17 +278,24 @@ module.exports = { }, ], }, + // Opt-in support for SASS (using .scss or .sass extensions). + // Chains the sass-loader with the css-loader and the style-loader + // to immediately apply all styles to the DOM. + // By default we support SASS Modules with the + // extensions .module.scss or .module.sass { - test: /\.scss$/, - exclude: /\.module\.scss$/, + test: /\.(scss|sass)$/, + exclude: /\.module\.(scss|sass)$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader'), ], }, + // Adds support for CSS Modules, but using SASS + // using the extension .module.scss or .module.sass { - test: /\.module\.scss$/, + test: /\.module\.(scss|sass)$/, use: [ require.resolve('style-loader'), { From 69ce2e6e188623b2bba00911e37d9b6666909ebe Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 21:36:37 +0200 Subject: [PATCH 06/26] Uses ExtractTextPlugin with sass-loader to bundle styles for the production build. --- .../config/webpack.config.prod.js | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d631fc32a3b..5cc81c7c79a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -320,6 +320,45 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // Opt-in support for SASS. The logic here is somewhat similar + // as in the CSS routine, except that "sass-loader" runs first + // to compile SASS files into CSS. + // By default we support SASS Modules with the + // extensions .module.scss or .module.sass + { + test: /\.(scss|sass)$/, + exclude: /\.module\.(scss|sass)$/, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 2, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap, + }, + }, + ], + }, + extractTextPluginOptions + ) + ), + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, @@ -413,7 +452,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. From 0a81f2adb5779aeabfe362542230e095b6797e29 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 21:52:33 +0200 Subject: [PATCH 07/26] Bundles SASS modules for the production build. --- .../config/webpack.config.prod.js | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 5cc81c7c79a..ab0bee81a26 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -341,7 +341,6 @@ module.exports = { { loader: require.resolve('css-loader'), options: { - importLoaders: 2, minimize: true, sourceMap: shouldUseSourceMap, }, @@ -359,6 +358,42 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // Adds support for CSS Modules, but using SASS + // using the extension .module.scss or .module.sass + { + test: /\.module\.(scss|sass)$/, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + localIdentName: '[path]__[name]___[local]', + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap, + }, + }, + ], + }, + extractTextPluginOptions + ) + ), + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, From 5a7f53469b35fd0a84b5ee2ecd43857536afedfd Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Wed, 21 Mar 2018 22:14:54 +0200 Subject: [PATCH 08/26] Uses the latest version of sass-loader. --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3f990845208..df85458de37 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -56,7 +56,7 @@ "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "^5.0.0", - "sass-loader": "https://github.com/Timer/sass-loader.git#remove-peerdep", + "sass-loader": "^6.0.7", "style-loader": "0.19.1", "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", From b2573f5f68f6c0cf56f4ccd25fd828bee3a344ba Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 24 Mar 2018 15:12:52 +0200 Subject: [PATCH 09/26] Adds function to create different rules for style loaders in dev environment. --- .../config/webpack.config.dev.js | 137 ++++++++++-------- 1 file changed, 79 insertions(+), 58 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 37b57ecb3a5..61650d024d2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -45,6 +45,37 @@ const postCSSLoaderOptions = { ], }; +const CSSModulePattern = '[path]__[name]___[local]'; + +const getStyleLoader = ( + testRegex, + excludeRegex, + secondLoader, + secondLoaderOptions, + firstLoader, + firstLoaderOptions +) => { + return Object.assign( + { + test: testRegex, + }, + excludeRegex ? { exclude: excludeRegex } : {}, + { + use: [ + require.resolve('style-loader'), + { + loader: require.resolve(secondLoader), + options: secondLoaderOptions, + }, + { + loader: require.resolve(firstLoader), + options: firstLoaderOptions, + }, + ], + } + ); +}; + // 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. @@ -241,73 +272,63 @@ module.exports = { // 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'), - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, + getStyleLoader( + // uses ".css" and excludes ".module.css" + /\.css$/, + /\.module\.css$/, + // second loader and its options + 'css-loader', + { importLoaders: 1 }, + // first loader and its options + 'postcss-loader', + 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: { - importLoaders: 1, - modules: true, - localIdentName: '[path]__[name]___[local]', - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, + getStyleLoader( + // uses ".module.css" and no exclude argument + /\.module\.css$/, + null, + // second loader and its options + 'css-loader', + { + importLoaders: 1, + modules: true, + localIdentName: CSSModulePattern, + }, + // first loader and its options + 'postcss-loader', + postCSSLoaderOptions + ), // Opt-in support for SASS (using .scss or .sass extensions). // Chains the sass-loader with the css-loader and the style-loader // to immediately apply all styles to the DOM. // By default we support SASS Modules with the // extensions .module.scss or .module.sass - { - test: /\.(scss|sass)$/, - exclude: /\.module\.(scss|sass)$/, - use: [ - require.resolve('style-loader'), - require.resolve('css-loader'), - require.resolve('sass-loader'), - ], - }, + getStyleLoader( + // uses ".scss/sass" and exclude ".module.scss/sass" + /\.(scss|sass)$/, + /\.module\.(scss|sass)$/, + // second loader and its options + 'css-loader', + {}, + // first loader and its options + 'sass-loader', + {} + ), // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass - { - test: /\.module\.(scss|sass)$/, - use: [ - require.resolve('style-loader'), - { - loader: require.resolve('css-loader'), - options: { - modules: true, - localIdentName: '[path]__[name]___[local]', - }, - }, - require.resolve('sass-loader'), - ], - }, + getStyleLoader( + // uses ".module.scss/sass" and no exclude argument + /\.module\.(scss|sass)$/, + null, + // second loader and its options + 'css-loader', + { modules: true, localIdentName: CSSModulePattern }, + // first loader and its options + 'sass-loader', + {} + ), // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, From 6e60b6eb5e80b4dab4e67132b9a144761ab1d60e Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 24 Mar 2018 15:47:47 +0200 Subject: [PATCH 10/26] Abstracts style loaders to a common function to avoid repetition. --- .../config/webpack.config.prod.js | 196 +++++++----------- 1 file changed, 80 insertions(+), 116 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ab0bee81a26..90f79270a2a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -70,6 +70,42 @@ const postCSSLoaderOptions = { ], }; +// style files regexes +const CSSRegex = /\.css$/; +const CSSModuleRegex = /\.module\.css$/; +const SASSRegex = /\.(scss|sass)$/; +const SASSModuleRegex = /\.module\.(scss|sass)$/; + +// Pattern that defines CSS modules naming +const CSSModulePattern = '[path]__[name]___[local]'; + +// Common function to create any style loader +const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { + return ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: CSSLoaderOptions, + }, + { + loader: require.resolve(firstLoader), + options: firstLoaderOptions, + }, + ], + }, + extractTextPluginOptions + ) + ); +}; + // 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. @@ -254,69 +290,33 @@ module.exports = { // 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( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, - extractTextPluginOptions - ) + test: CSSRegex, + exclude: CSSModuleRegex, + loader: getStyleLoader( + { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + 'postcss-loader', + postCSSLoaderOptions ), // 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: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - localIdentName: '[path]__[name]___[local]', - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, - extractTextPluginOptions - ) + test: CSSRegex, + loader: getStyleLoader( + { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + localIdentName: CSSModulePattern, + }, + 'postcss-loader', + postCSSLoaderOptions ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, @@ -326,71 +326,35 @@ module.exports = { // By default we support SASS Modules with the // extensions .module.scss or .module.sass { - test: /\.(scss|sass)$/, - exclude: /\.module\.(scss|sass)$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - { - loader: require.resolve('sass-loader'), - options: { - sourceMap: shouldUseSourceMap, - }, - }, - ], - }, - extractTextPluginOptions - ) + test: SASSRegex, + exclude: SASSModuleRegex, + loader: getStyleLoader( + { + minimize: true, + sourceMap: shouldUseSourceMap, + }, + 'sass-loader', + { + sourceMap: shouldUseSourceMap, + } ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { - test: /\.module\.(scss|sass)$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - localIdentName: '[path]__[name]___[local]', - }, - }, - { - loader: require.resolve('sass-loader'), - options: { - sourceMap: shouldUseSourceMap, - }, - }, - ], - }, - extractTextPluginOptions - ) + test: SASSModuleRegex, + loader: getStyleLoader( + { + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + localIdentName: CSSModulePattern, + }, + 'sass-loader', + { + sourceMap: shouldUseSourceMap, + } ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, From c8052c53d508e479058d8412cb450e36db63e375 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 24 Mar 2018 15:48:30 +0200 Subject: [PATCH 11/26] Simplifies the common function that creates style loaders. --- .../config/webpack.config.dev.js | 128 ++++++++---------- 1 file changed, 56 insertions(+), 72 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 61650d024d2..4eaae585282 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -45,35 +45,28 @@ const postCSSLoaderOptions = { ], }; +// style files regexes +const CSSRegex = /\.css$/; +const CSSModuleRegex = /\.module\.css$/; +const SASSRegex = /\.(scss|sass)$/; +const SASSModuleRegex = /\.module\.(scss|sass)$/; + +// Pattern that defines CSS modules naming const CSSModulePattern = '[path]__[name]___[local]'; -const getStyleLoader = ( - testRegex, - excludeRegex, - secondLoader, - secondLoaderOptions, - firstLoader, - firstLoaderOptions -) => { - return Object.assign( +// Common function to create any style loader +const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { + return [ + require.resolve('style-loader'), { - test: testRegex, + loader: require.resolve('css-loader'), + options: CSSLoaderOptions, }, - excludeRegex ? { exclude: excludeRegex } : {}, { - use: [ - require.resolve('style-loader'), - { - loader: require.resolve(secondLoader), - options: secondLoaderOptions, - }, - { - loader: require.resolve(firstLoader), - options: firstLoaderOptions, - }, - ], - } - ); + loader: require.resolve(firstLoader), + options: firstLoaderOptions, + }, + ]; }; // This is the development configuration. @@ -272,63 +265,54 @@ module.exports = { // 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 - getStyleLoader( - // uses ".css" and excludes ".module.css" - /\.css$/, - /\.module\.css$/, - // second loader and its options - 'css-loader', - { importLoaders: 1 }, - // first loader and its options - 'postcss-loader', - postCSSLoaderOptions - ), + { + test: CSSRegex, + exclude: CSSModuleRegex, + use: getStyleLoader( + { + importLoaders: 1, + }, + 'postcss-loader', + postCSSLoaderOptions + ), + }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css - getStyleLoader( - // uses ".module.css" and no exclude argument - /\.module\.css$/, - null, - // second loader and its options - 'css-loader', - { - importLoaders: 1, - modules: true, - localIdentName: CSSModulePattern, - }, - // first loader and its options - 'postcss-loader', - postCSSLoaderOptions - ), + { + test: CSSModuleRegex, + use: getStyleLoader( + { + importLoaders: 1, + modules: true, + localIdentName: CSSModulePattern, + }, + 'postcss-loader', + postCSSLoaderOptions + ), + }, // Opt-in support for SASS (using .scss or .sass extensions). // Chains the sass-loader with the css-loader and the style-loader // to immediately apply all styles to the DOM. // By default we support SASS Modules with the // extensions .module.scss or .module.sass - getStyleLoader( - // uses ".scss/sass" and exclude ".module.scss/sass" - /\.(scss|sass)$/, - /\.module\.(scss|sass)$/, - // second loader and its options - 'css-loader', - {}, - // first loader and its options - 'sass-loader', - {} - ), + { + test: SASSRegex, + exclude: SASSModuleRegex, + use: getStyleLoader({}, 'sass-loader', {}), + }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass - getStyleLoader( - // uses ".module.scss/sass" and no exclude argument - /\.module\.(scss|sass)$/, - null, - // second loader and its options - 'css-loader', - { modules: true, localIdentName: CSSModulePattern }, - // first loader and its options - 'sass-loader', - {} - ), + { + test: SASSModuleRegex, + use: getStyleLoader( + { + modules: true, + localIdentName: CSSModulePattern, + }, + 'sass-loader', + {} + ), + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, From 876c9b3fcc5f1b90cbea69d0a9e1fe2280e95c52 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Mon, 26 Mar 2018 20:41:41 +0300 Subject: [PATCH 12/26] Creates assets for testing SASS/SCSS support. --- .../src/features/webpack/assets/sass-styles.module.sass | 3 +++ .../kitchensink/src/features/webpack/assets/sass-styles.sass | 3 +++ .../src/features/webpack/assets/scss-styles.module.scss | 4 ++++ .../kitchensink/src/features/webpack/assets/scss-styles.scss | 4 ++++ 4 files changed, 14 insertions(+) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.module.sass create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.sass create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.module.scss create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.scss diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.module.sass b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.module.sass new file mode 100644 index 00000000000..09773b05d85 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.module.sass @@ -0,0 +1,3 @@ +.sassModulesInclusion + background: darkblue + color: lightblue diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.sass b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.sass new file mode 100644 index 00000000000..28935fe49b1 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/sass-styles.sass @@ -0,0 +1,3 @@ +#feature-sass-inclusion + background: ghostwhite + color: crimson diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.module.scss b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.module.scss new file mode 100644 index 00000000000..5beb80ebabe --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.module.scss @@ -0,0 +1,4 @@ +.scssModulesInclusion { + background: darkblue; + color: lightblue; +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.scss b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.scss new file mode 100644 index 00000000000..b2f91e2e2f3 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/scss-styles.scss @@ -0,0 +1,4 @@ +#feature-scss-inclusion { + background: ghostwhite; + color: crimson; +} From 986543946001996c21c08b1eff8b26197193c24a Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Mon, 26 Mar 2018 20:51:01 +0300 Subject: [PATCH 13/26] Creates mock components and unit tests for SASS and SCSS with and without modules. --- .../src/features/webpack/SassInclusion.js | 11 +++++++++++ .../src/features/webpack/SassInclusion.test.js | 17 +++++++++++++++++ .../features/webpack/SassModulesInclusion.js | 13 +++++++++++++ .../webpack/SassModulesInclusion.test.js | 17 +++++++++++++++++ .../src/features/webpack/ScssInclusion.js | 11 +++++++++++ .../src/features/webpack/ScssInclusion.test.js | 17 +++++++++++++++++ .../features/webpack/ScssModulesInclusion.js | 13 +++++++++++++ .../webpack/ScssModulesInclusion.test.js | 17 +++++++++++++++++ 8 files changed, 116 insertions(+) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.test.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.test.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.test.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.test.js diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.js new file mode 100644 index 00000000000..c15f175dbfe --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import './assets/sass-styles.sass'; + +export default () =>

We love useless text.

; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.test.js new file mode 100644 index 00000000000..c58080ab5b1 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassInclusion.test.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import ReactDOM from 'react-dom'; +import SassInclusion from './SassInclusion'; + +describe('sass inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js new file mode 100644 index 00000000000..dd832eaea32 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import styles from './assets/sass-styles.module.sass'; + +export default () => ( +

SASS Modules are working!

+); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.test.js new file mode 100644 index 00000000000..373330a5fac --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.test.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import ReactDOM from 'react-dom'; +import SassModulesInclusion from './SassModulesInclusion'; + +describe('sass modules inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.js new file mode 100644 index 00000000000..b363f430ea8 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import './assets/scss-styles.scss'; + +export default () =>

We love useless text.

; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.test.js new file mode 100644 index 00000000000..81d49588cac --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssInclusion.test.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import ReactDOM from 'react-dom'; +import ScssInclusion from './ScssInclusion'; + +describe('scss inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + }); +}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js new file mode 100644 index 00000000000..ef0e2bf4c3c --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import styles from './assets/scss-styles.module.scss'; + +export default () => ( +

SCSS Modules are working!

+); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.test.js new file mode 100644 index 00000000000..5de52839666 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.test.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * 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'; +import ReactDOM from 'react-dom'; +import ScssModulesInclusion from './ScssModulesInclusion'; + +describe('scss modules inclusion', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + }); +}); From 1629d7878d2ed40cfa2394dab2d723086e81e365 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Mon, 26 Mar 2018 20:59:58 +0300 Subject: [PATCH 14/26] Creates integration tests for SASS/SCSS support. --- .../kitchensink/integration/webpack.test.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bba497c49f3..ce10ee2ca0a 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -31,6 +31,48 @@ describe('Integration', () => { ); }); + it('scss inclusion', async () => { + const doc = await initDOM('scss-inclusion'); + + expect( + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/html\{/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') + ).to.match(/#feature-scss-inclusion\{background:.+;color:.+}/); + }); + + it('scss modules inclusion', async () => { + const doc = await initDOM('scss-modules-inclusion'); + + expect( + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match( + /.+__style-module___scssModulesInclusion+\{background:.+;color:.+}/ + ); + }); + + it('sass inclusion', async () => { + const doc = await initDOM('sass-inclusion'); + + expect( + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/html\{/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') + ).to.match(/#feature-sass-inclusion\{background:.+;color:.+}/); + }); + + it('sass modules inclusion', async () => { + const doc = await initDOM('sass-modules-inclusion'); + + expect( + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match( + /.+__style-module___sassModulesInclusion+\{background:.+;color:.+}/ + ); + }); + it('graphql files inclusion', async () => { const doc = await initDOM('graphql-inclusion'); const children = doc.getElementById('graphql-inclusion').children; From 479423a46873d6ae432a014b87182ddc9b3bf307 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Mon, 26 Mar 2018 21:20:39 +0300 Subject: [PATCH 15/26] Adds node-sass as a template dependency so sass-loader can be tested. --- .../fixtures/kitchensink/.template.dependencies.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index e4d3bec84f2..a027e57d765 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -6,6 +6,7 @@ "chai": "3.5.0", "jsdom": "9.8.3", "mocha": "3.2.0", + "node-sass": "4.8.3", "normalize.css": "7.0.0", "prop-types": "15.5.6", "test-integrity": "1.0.0" From dc640e49f9f35876c1e1cacadeb77b8d315f3c9f Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 27 Mar 2018 09:30:18 +0300 Subject: [PATCH 16/26] Includes sass tests when test component is mounted. --- .../fixtures/kitchensink/src/App.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index c45ef2a38e8..f5e3d5911b1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -86,6 +86,26 @@ class App extends Component { this.setFeature(f.default) ); break; + case 'scss-inclusion': + import('./features/webpack/ScssInclusion').then(f => + this.setFeature(f.default) + ); + break; + case 'scss-modules-inclusion': + import('./features/webpack/ScssModulesInclusion').then(f => + this.setFeature(f.default) + ); + break; + case 'sass-inclusion': + import('./features/webpack/SassInclusion').then(f => + this.setFeature(f.default) + ); + break; + case 'sass-modules-inclusion': + import('./features/webpack/SassModulesInclusion').then(f => + this.setFeature(f.default) + ); + break; case 'custom-interpolation': import('./features/syntax/CustomInterpolation').then(f => this.setFeature(f.default) From f44250e6fa45366b088e2b688b4701e51dae9ad8 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 27 Mar 2018 11:08:15 +0300 Subject: [PATCH 17/26] Fixes asserted module name for sass and scss modules tests. --- .../fixtures/kitchensink/integration/webpack.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index ce10ee2ca0a..ee84892deaa 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -48,7 +48,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match( - /.+__style-module___scssModulesInclusion+\{background:.+;color:.+}/ + /.+__scss-styles-module___scssModulesInclusion+\{background:.+;color:.+}/ ); }); @@ -69,7 +69,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match( - /.+__style-module___sassModulesInclusion+\{background:.+;color:.+}/ + /.+__sass-styles-module___sassModulesInclusion+\{background:.+;color:.+}/ ); }); From 0f36d902dfa5fc6a00d00f0bd87e218b9ae62aaa Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 27 Mar 2018 13:56:22 +0300 Subject: [PATCH 18/26] Removes tests against css imports in SCSS and SASS files. --- .../fixtures/kitchensink/integration/webpack.test.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index ee84892deaa..1f88a5b32da 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -36,9 +36,6 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') - ).to.match(/html\{/); - expect( - doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match(/#feature-scss-inclusion\{background:.+;color:.+}/); }); @@ -57,9 +54,6 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') - ).to.match(/html\{/); - expect( - doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match(/#feature-sass-inclusion\{background:.+;color:.+}/); }); From 7ba882ece203a059dd3cc6591a509dbe3fa9fe70 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Fri, 13 Apr 2018 12:19:09 +0300 Subject: [PATCH 19/26] Updates sass-loader to v7. --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 966cf797c5d..bb11dfaa416 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -57,7 +57,7 @@ "raf": "3.4.0", "react-dev-utils": "^5.0.0", "resolve": "1.6.0", - "sass-loader": "6.0.7", + "sass-loader": "7.0.0", "style-loader": "0.19.1", "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", From 3657b782ef32c8978fb0d1a550f1f92d7f06a720 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 14 Apr 2018 03:30:25 +0300 Subject: [PATCH 20/26] Uses getCSSModuleLocalIdent from react-dev-utils. --- packages/react-scripts/config/webpack.config.dev.js | 5 +---- packages/react-scripts/config/webpack.config.prod.js | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e5fd4509893..6167281993b 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -52,9 +52,6 @@ const CSSModuleRegex = /\.module\.css$/; const SASSRegex = /\.(scss|sass)$/; const SASSModuleRegex = /\.module\.(scss|sass)$/; -// Pattern that defines CSS modules naming -const CSSModulePattern = '[path]__[name]___[local]'; - // Common function to create any style loader const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { return [ @@ -308,7 +305,7 @@ module.exports = { use: getStyleLoader( { modules: true, - localIdentName: CSSModulePattern, + getLocalIdent: getCSSModuleLocalIdent, }, 'sass-loader', {} diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 45f09a6533c..5a7da2dd0dd 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -77,9 +77,6 @@ const CSSModuleRegex = /\.module\.css$/; const SASSRegex = /\.(scss|sass)$/; const SASSModuleRegex = /\.module\.(scss|sass)$/; -// Pattern that defines CSS modules naming -const CSSModulePattern = '[path]__[name]___[local]'; - // Common function to create any style loader const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { return ExtractTextPlugin.extract( @@ -350,7 +347,7 @@ module.exports = { minimize: true, sourceMap: shouldUseSourceMap, modules: true, - localIdentName: CSSModulePattern, + getLocalIdent: getCSSModuleLocalIdent, }, 'sass-loader', { From 5a492447cd8084cf112986c4936b2c528b44c26e Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 14 Apr 2018 16:10:19 +0300 Subject: [PATCH 21/26] Fixes tests to match the use of getCSSModuleLocalIdent. --- .../fixtures/kitchensink/integration/webpack.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index b326193bd1c..dc10c9a1b08 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -48,7 +48,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match( - /.+__scss-styles-module___scssModulesInclusion+\{background:.+;color:.+}/ + /.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/ ); }); @@ -66,7 +66,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match( - /.+__sass-styles-module___sassModulesInclusion+\{background:.+;color:.+}/ + /.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/ ); }); From 9e67bde6e40bddc7e9fe31f0f8caf9e2bd3f984f Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sat, 14 Apr 2018 23:50:56 +0300 Subject: [PATCH 22/26] Improves readability of getStyleLoader function. --- .../config/webpack.config.dev.js | 42 +++++++-------- .../config/webpack.config.prod.js | 54 +++++++++---------- 2 files changed, 44 insertions(+), 52 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 6167281993b..b053185b622 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -53,7 +53,11 @@ const SASSRegex = /\.(scss|sass)$/; const SASSModuleRegex = /\.module\.(scss|sass)$/; // Common function to create any style loader -const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { +const getStyleLoader = ( + postStyleLoader, + postStyleLoaderOptions = {}, + CSSLoaderOptions = {} +) => { return [ require.resolve('style-loader'), { @@ -61,8 +65,8 @@ const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { options: CSSLoaderOptions, }, { - loader: require.resolve(firstLoader), - options: firstLoaderOptions, + loader: require.resolve(postStyleLoader), + options: postStyleLoaderOptions, }, ]; }; @@ -266,27 +270,19 @@ module.exports = { { test: CSSRegex, exclude: CSSModuleRegex, - use: getStyleLoader( - { - importLoaders: 1, - }, - 'postcss-loader', - postCSSLoaderOptions - ), + use: getStyleLoader('postcss-loader', postCSSLoaderOptions, { + importLoaders: 1, + }), }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: CSSModuleRegex, - use: getStyleLoader( - { - importLoaders: 1, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, - 'postcss-loader', - postCSSLoaderOptions - ), + use: getStyleLoader('postcss-loader', postCSSLoaderOptions, { + importLoaders: 1, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }), }, // Opt-in support for SASS (using .scss or .sass extensions). // Chains the sass-loader with the css-loader and the style-loader @@ -296,19 +292,19 @@ module.exports = { { test: SASSRegex, exclude: SASSModuleRegex, - use: getStyleLoader({}, 'sass-loader', {}), + use: getStyleLoader('sass-loader'), }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: SASSModuleRegex, use: getStyleLoader( + 'sass-loader', + {}, { modules: true, getLocalIdent: getCSSModuleLocalIdent, - }, - 'sass-loader', - {} + } ), }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 5a7da2dd0dd..bb7ad6f3f62 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -78,7 +78,11 @@ const SASSRegex = /\.(scss|sass)$/; const SASSModuleRegex = /\.module\.(scss|sass)$/; // Common function to create any style loader -const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { +const getStyleLoader = ( + postStyleLoader, + postStyleLoaderOptions, + CSSLoaderOptions +) => { return ExtractTextPlugin.extract( Object.assign( { @@ -94,8 +98,8 @@ const getStyleLoader = (CSSLoaderOptions, firstLoader, firstLoaderOptions) => { options: CSSLoaderOptions, }, { - loader: require.resolve(firstLoader), - options: firstLoaderOptions, + loader: require.resolve(postStyleLoader), + options: postStyleLoaderOptions, }, ], }, @@ -290,32 +294,24 @@ module.exports = { { test: CSSRegex, exclude: CSSModuleRegex, - loader: getStyleLoader( - { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - }, - 'postcss-loader', - postCSSLoaderOptions - ), + loader: getStyleLoader('postcss-loader', postCSSLoaderOptions, { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }), // 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: CSSRegex, - loader: getStyleLoader( - { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, - 'postcss-loader', - postCSSLoaderOptions - ), + loader: getStyleLoader('postcss-loader', postCSSLoaderOptions, { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // Opt-in support for SASS. The logic here is somewhat similar @@ -327,12 +323,12 @@ module.exports = { test: SASSRegex, exclude: SASSModuleRegex, loader: getStyleLoader( + 'sass-loader', { - minimize: true, sourceMap: shouldUseSourceMap, }, - 'sass-loader', { + minimize: true, sourceMap: shouldUseSourceMap, } ), @@ -343,15 +339,15 @@ module.exports = { { test: SASSModuleRegex, loader: getStyleLoader( + 'sass-loader', { - minimize: true, sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, }, - 'sass-loader', { + minimize: true, sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, } ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. From 4c14a2f0cd209175d44548d404c566b80e01c57c Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sun, 15 Apr 2018 14:29:14 -0300 Subject: [PATCH 23/26] Uses postcss after sass. --- .../config/webpack.config.dev.js | 106 +++++---- .../config/webpack.config.prod.js | 204 +++++++++++------- 2 files changed, 192 insertions(+), 118 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index b053185b622..a1b65f1c01a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -47,29 +47,10 @@ const postCSSLoaderOptions = { }; // style files regexes -const CSSRegex = /\.css$/; -const CSSModuleRegex = /\.module\.css$/; -const SASSRegex = /\.(scss|sass)$/; -const SASSModuleRegex = /\.module\.(scss|sass)$/; - -// Common function to create any style loader -const getStyleLoader = ( - postStyleLoader, - postStyleLoaderOptions = {}, - CSSLoaderOptions = {} -) => { - return [ - require.resolve('style-loader'), - { - loader: require.resolve('css-loader'), - options: CSSLoaderOptions, - }, - { - loader: require.resolve(postStyleLoader), - options: postStyleLoaderOptions, - }, - ]; -}; +const cssRegex = /\.css$/; +const cssModuleRegex = /\.module\.css$/; +const sassRegex = /\.(scss|sass)$/; +const sassModuleRegex = /\.module\.(scss|sass)$/; // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -268,21 +249,41 @@ module.exports = { // in development "style" loader enables hot editing of CSS. // By default we support CSS Modules with the extension .module.css { - test: CSSRegex, - exclude: CSSModuleRegex, - use: getStyleLoader('postcss-loader', postCSSLoaderOptions, { - importLoaders: 1, - }), + test: cssRegex, + exclude: cssModuleRegex, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + 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: CSSModuleRegex, - use: getStyleLoader('postcss-loader', postCSSLoaderOptions, { - importLoaders: 1, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }), + test: cssModuleRegex, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + ], }, // Opt-in support for SASS (using .scss or .sass extensions). // Chains the sass-loader with the css-loader and the style-loader @@ -290,22 +291,37 @@ module.exports = { // By default we support SASS Modules with the // extensions .module.scss or .module.sass { - test: SASSRegex, - exclude: SASSModuleRegex, - use: getStyleLoader('sass-loader'), + test: sassRegex, + exclude: sassModuleRegex, + use: [ + require.resolve('style-loader'), + require.resolve('css-loader'), + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + require.resolve('sass-loader'), + ], }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { - test: SASSModuleRegex, - use: getStyleLoader( - 'sass-loader', - {}, + test: sassModuleRegex, + use: [ + require.resolve('style-loader'), { - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - } - ), + loader: require.resolve('css-loader'), + options: { + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + require.resolve('sass-loader'), + ], }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index bb7ad6f3f62..8da18bd3e5e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -69,44 +69,14 @@ const postCSSLoaderOptions = { flexbox: 'no-2009', }), ], + sourceMap: shouldUseSourceMap, }; // style files regexes -const CSSRegex = /\.css$/; -const CSSModuleRegex = /\.module\.css$/; -const SASSRegex = /\.(scss|sass)$/; -const SASSModuleRegex = /\.module\.(scss|sass)$/; - -// Common function to create any style loader -const getStyleLoader = ( - postStyleLoader, - postStyleLoaderOptions, - CSSLoaderOptions -) => { - return ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: CSSLoaderOptions, - }, - { - loader: require.resolve(postStyleLoader), - options: postStyleLoaderOptions, - }, - ], - }, - extractTextPluginOptions - ) - ); -}; +const cssRegex = /\.css$/; +const cssModuleRegex = /\.module\.css$/; +const sassRegex = /\.(scss|sass)$/; +const sassModuleRegex = /\.module\.(scss|sass)$/; // This is the production configuration. // It compiles slowly and is focused on producing a fast and minimal bundle. @@ -292,26 +262,70 @@ module.exports = { // in the main CSS file. // By default we support CSS Modules with the extension .module.css { - test: CSSRegex, - exclude: CSSModuleRegex, - loader: getStyleLoader('postcss-loader', postCSSLoaderOptions, { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - }), + test: cssRegex, + exclude: cssModuleRegex, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + 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: CSSRegex, - loader: getStyleLoader('postcss-loader', postCSSLoaderOptions, { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }), + test: cssRegex, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + ], + }, + extractTextPluginOptions + ) + ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // Opt-in support for SASS. The logic here is somewhat similar @@ -320,35 +334,79 @@ module.exports = { // By default we support SASS Modules with the // extensions .module.scss or .module.sass { - test: SASSRegex, - exclude: SASSModuleRegex, - loader: getStyleLoader( - 'sass-loader', - { - sourceMap: shouldUseSourceMap, - }, - { - minimize: true, - sourceMap: shouldUseSourceMap, - } + test: sassRegex, + exclude: sassModuleRegex, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap, + }, + }, + ], + }, + extractTextPluginOptions + ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { - test: SASSModuleRegex, - loader: getStyleLoader( - 'sass-loader', - { - sourceMap: shouldUseSourceMap, - }, - { - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - } + test: sassModuleRegex, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: [ + { + loader: require.resolve('css-loader'), + options: { + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap, + }, + }, + ], + }, + extractTextPluginOptions + ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, From 3b8bbb8ae13fd0762d769e7ace6d22bbf2669b82 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sun, 15 Apr 2018 14:44:21 -0300 Subject: [PATCH 24/26] Refactors dev config to simplify common function for style loaders. --- .../config/webpack.config.dev.js | 82 ++++++++----------- 1 file changed, 32 insertions(+), 50 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index a1b65f1c01a..c8a2a7c24e1 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -52,6 +52,24 @@ const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; +const getStyleLoaders = (options, preProcessor) => { + const loaders = [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + ]; + if (preProcessor) { + loaders.push(require.resolve(preProcessor)); + } + return loaders; +}; + // 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. @@ -251,39 +269,19 @@ module.exports = { { test: cssRegex, exclude: cssModuleRegex, - use: [ - require.resolve('style-loader'), - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], + use: getStyleLoaders({ + importLoaders: 1, + }), }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: cssModuleRegex, - use: [ - require.resolve('style-loader'), - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], + use: getStyleLoaders({ + importLoaders: 1, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }), }, // Opt-in support for SASS (using .scss or .sass extensions). // Chains the sass-loader with the css-loader and the style-loader @@ -293,35 +291,19 @@ module.exports = { { test: sassRegex, exclude: sassModuleRegex, - use: [ - require.resolve('style-loader'), - require.resolve('css-loader'), - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - require.resolve('sass-loader'), - ], + use: getStyleLoaders({}, 'sass-loader'), }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, - use: [ - require.resolve('style-loader'), + use: getStyleLoaders( { - loader: require.resolve('css-loader'), - options: { - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - require.resolve('sass-loader'), - ], + 'sass-loader' + ), }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { From d9621fb7cba0e448f2c87211f79199cec2994730 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Sun, 15 Apr 2018 15:01:03 -0300 Subject: [PATCH 25/26] Refactors prod config to simplify common function for style loaders. --- .../config/webpack.config.dev.js | 5 +- .../config/webpack.config.prod.js | 182 ++++++------------ 2 files changed, 65 insertions(+), 122 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c8a2a7c24e1..3b18941b72a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -52,12 +52,13 @@ const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; -const getStyleLoaders = (options, preProcessor) => { +// common function to get style loaders +const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), - options, + options: cssOptions, }, { loader: require.resolve('postcss-loader'), diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 8da18bd3e5e..09dbd9055cc 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -78,6 +78,42 @@ const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; +// common function to get style loaders +const getStyleLoaders = (cssOptions, preProcessor) => { + const loaders = [ + { + loader: require.resolve('css-loader'), + options: cssOptions, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + ]; + if (preProcessor) { + loaders.push({ + loader: require.resolve(preProcessor), + options: { + sourceMap: shouldUseSourceMap, + }, + }); + } + return ExtractTextPlugin.extract( + Object.assign( + { + fallback: { + loader: require.resolve('style-loader'), + options: { + hmr: false, + }, + }, + use: loaders, + }, + extractTextPluginOptions + ) + ); +}; + // 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. @@ -264,68 +300,24 @@ module.exports = { { test: cssRegex, exclude: cssModuleRegex, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, - extractTextPluginOptions - ) - ), + loader: getStyleLoaders({ + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }), // 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: cssRegex, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - ], - }, - extractTextPluginOptions - ) - ), + loader: getStyleLoaders({ + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // Opt-in support for SASS. The logic here is somewhat similar @@ -336,37 +328,12 @@ module.exports = { { test: sassRegex, exclude: sassModuleRegex, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - minimize: true, - sourceMap: shouldUseSourceMap, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - { - loader: require.resolve('sass-loader'), - options: { - sourceMap: shouldUseSourceMap, - }, - }, - ], - }, - extractTextPluginOptions - ) + loader: getStyleLoaders( + { + minimize: true, + sourceMap: shouldUseSourceMap, + }, + 'sass-loader' ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, @@ -374,39 +341,14 @@ module.exports = { // using the extension .module.scss or .module.sass { test: sassModuleRegex, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: { - loader: require.resolve('style-loader'), - options: { - hmr: false, - }, - }, - use: [ - { - loader: require.resolve('css-loader'), - options: { - minimize: true, - sourceMap: shouldUseSourceMap, - modules: true, - getLocalIdent: getCSSModuleLocalIdent, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: postCSSLoaderOptions, - }, - { - loader: require.resolve('sass-loader'), - options: { - sourceMap: shouldUseSourceMap, - }, - }, - ], - }, - extractTextPluginOptions - ) + loader: getStyleLoaders( + { + minimize: true, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + 'sass-loader' ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, From 22475dc5e2b1c04f6a92d086d0dc09f924138784 Mon Sep 17 00:00:00 2001 From: Fabiano Brito Date: Tue, 17 Apr 2018 14:46:22 -0300 Subject: [PATCH 26/26] Use importLoaders config according to css-loader docs. --- packages/react-scripts/config/webpack.config.dev.js | 3 ++- packages/react-scripts/config/webpack.config.prod.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 3b18941b72a..7a1b66803bc 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -292,7 +292,7 @@ module.exports = { { test: sassRegex, exclude: sassModuleRegex, - use: getStyleLoaders({}, 'sass-loader'), + use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'), }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass @@ -300,6 +300,7 @@ module.exports = { test: sassModuleRegex, use: getStyleLoaders( { + importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 09dbd9055cc..e05c8ae0cb4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -330,6 +330,7 @@ module.exports = { exclude: sassModuleRegex, loader: getStyleLoaders( { + importLoaders: 2, minimize: true, sourceMap: shouldUseSourceMap, }, @@ -343,6 +344,7 @@ module.exports = { test: sassModuleRegex, loader: getStyleLoaders( { + importLoaders: 2, minimize: true, sourceMap: shouldUseSourceMap, modules: true,