From 7ab4fbc027dff2053a24577e942a90787ca10f6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20B=C3=A4chler?= <simon@stellanera.com>
Date: Sat, 25 May 2019 23:10:32 +0200
Subject: [PATCH] Allow generation of CSS sourcemaps at development time

---
 .../react-scripts/config/webpack.config.js    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 8f70442d584..03ae1071c9d 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -40,6 +40,7 @@ const postcssNormalize = require('postcss-normalize');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
@@ -59,6 +60,13 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
+  // When CSS sourcemaps are active, CSS modules are generated as Blobs, which
+  // creates a FOUC in development mode.
+  // Therefore they are deactivated by default. #5707
+  const shouldCreateCSSSourceMap =
+    (isEnvProduction && shouldUseSourceMap) ||
+    (isEnvDevelopment && process.env.DEV_CSS_SOURCEMAPS === 'true');
+
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
@@ -112,7 +120,7 @@ module.exports = function(webpackEnv) {
             // which in turn let's users customize the target behavior as per their needs.
             postcssNormalize(),
           ],
-          sourceMap: isEnvProduction && shouldUseSourceMap,
+          sourceMap: shouldCreateCSSSourceMap,
         },
       },
     ].filter(Boolean);
@@ -120,7 +128,7 @@ module.exports = function(webpackEnv) {
       loaders.push({
         loader: require.resolve(preProcessor),
         options: {
-          sourceMap: isEnvProduction && shouldUseSourceMap,
+          sourceMap: shouldCreateCSSSourceMap,
         },
       });
     }
@@ -448,7 +456,7 @@ module.exports = function(webpackEnv) {
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
+                sourceMap: shouldCreateCSSSourceMap,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -462,7 +470,7 @@ module.exports = function(webpackEnv) {
               test: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
+                sourceMap: shouldCreateCSSSourceMap,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               }),
@@ -476,7 +484,7 @@ module.exports = function(webpackEnv) {
               use: getStyleLoaders(
                 {
                   importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  sourceMap: shouldCreateCSSSourceMap,
                 },
                 'sass-loader'
               ),
@@ -493,7 +501,7 @@ module.exports = function(webpackEnv) {
               use: getStyleLoaders(
                 {
                   importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  sourceMap: shouldCreateCSSSourceMap,
                   modules: true,
                   getLocalIdent: getCSSModuleLocalIdent,
                 },