From 9f672504bc6c0873177a209fd299038ca4e6a6a9 Mon Sep 17 00:00:00 2001
From: Neek Sandhu <neek.sandhu@outlook.com>
Date: Tue, 26 Sep 2017 21:53:11 -0700
Subject: [PATCH 1/3] Add support for CSS Sourcemaps without FOUC

---
 packages/react-scripts/config/webpack.config.dev.js | 9 ++++++---
 packages/react-scripts/package.json                 | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 44669e6059f..894546834b4 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -19,6 +19,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
+const CSSVisor = require('css-visor');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@@ -180,13 +181,13 @@ module.exports = {
           },
           // "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.
+          // "css-visor" loader extracts css from css-loader and appends HMR code to JS module
           // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
+          // in development "css-visor" loader + plugin enables hot editing of CSS.
           {
             test: /\.css$/,
             use: [
-              require.resolve('style-loader'),
+              require.resolve('css-visor/loader'),
               {
                 loader: require.resolve('css-loader'),
                 options: {
@@ -238,6 +239,8 @@ module.exports = {
     ],
   },
   plugins: [
+    // CSS extracted by css-visor/loader is passed on to this plugin, which ensures they get served by webpack-dev-server
+    new CSSVisor(),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 123f966d035..bdafbd15728 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -31,6 +31,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "css-loader": "0.28.4",
+    "css-visor": "^0.1.0",
     "dotenv": "4.0.0",
     "eslint": "4.4.1",
     "eslint-config-react-app": "^2.0.1",
@@ -49,7 +50,6 @@
     "postcss-loader": "2.0.6",
     "promise": "8.0.1",
     "react-dev-utils": "^4.1.0",
-    "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.5.9",
     "webpack": "3.5.1",

From 480612fe2ce978dad50057c94604f2257abbcc32 Mon Sep 17 00:00:00 2001
From: Neek Sandhu <neek.sandhu@outlook.com>
Date: Tue, 26 Sep 2017 22:26:54 -0700
Subject: [PATCH 2/3] Turn on sourcemaps

---
 packages/react-scripts/config/webpack.config.dev.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 894546834b4..823741f61d1 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -192,6 +192,7 @@ module.exports = {
                 loader: require.resolve('css-loader'),
                 options: {
                   importLoaders: 1,
+                  sourceMap: true
                 },
               },
               {

From 979d95e804fa20fbec56d95141a3770a6d7096f5 Mon Sep 17 00:00:00 2001
From: Neek Sandhu <neek.sandhu@outlook.com>
Date: Tue, 26 Sep 2017 22:47:17 -0700
Subject: [PATCH 3/3] Undo remove style-loader from package.json

---
 packages/react-scripts/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index bdafbd15728..425e44954d9 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -50,6 +50,7 @@
     "postcss-loader": "2.0.6",
     "promise": "8.0.1",
     "react-dev-utils": "^4.1.0",
+    "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.5.9",
     "webpack": "3.5.1",