From 67797958b44103e42c62a2d7e0b1ad795eb1004a Mon Sep 17 00:00:00 2001
From: Vatsal Joshi <vatz88@gmail.com>
Date: Wed, 11 Dec 2019 16:21:26 +0530
Subject: [PATCH] use MiniCssExtractPlugin with hmr in dev mode Remove
 style-loader

---
 .../react-scripts/config/webpack.config.js    | 34 ++++++++++---------
 packages/react-scripts/package.json           |  1 -
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index bad4290061b..65c1745e614 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -92,10 +92,12 @@ module.exports = function(webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
+      {
         loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
+        options: {
+          hmr: isEnvDevelopment,
+          publicPath: shouldUseRelativeAssetPaths ? '../../' : undefined,
+        },
       },
       {
         loader: require.resolve('css-loader'),
@@ -270,8 +272,8 @@ module.exports = function(webpackEnv) {
               : false,
           },
           cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons
@@ -493,10 +495,7 @@ module.exports = function(webpackEnv) {
             },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
+            // We use MiniCSSExtractPlugin to extract CSS to a file.
             // By default we support CSS Modules with the extension .module.css
             {
               test: cssRegex,
@@ -640,13 +639,16 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: isEnvProduction
+          ? 'static/css/[name].[contenthash:8].css'
+          : isEnvDevelopment && 'static/css/[name].css',
+        chunkFilename: isEnvProduction
+          ? 'static/css/[name].[contenthash:8].chunk.css'
+          : isEnvDevelopment && 'static/css/[name].chunk.css',
+      }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
       //   output file so that tools can pick it up without having to parse
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 4818caeccf4..7e8109925f3 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -72,7 +72,6 @@
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.0",
     "semver": "6.3.0",
-    "style-loader": "1.0.1",
     "terser-webpack-plugin": "2.2.2",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",