From fe87a866f8a9cb240f7145392363d96a21fafe16 Mon Sep 17 00:00:00 2001
From: Armaan Ahluwalia <armaanahluwalia@gmail.com>
Date: Thu, 3 May 2018 03:46:32 +0530
Subject: [PATCH] webpack: Add css-hot-loader to remove flash on unstyled
 content.

This commit removes the flash on unstyled content while in dev
mode that was caused by the use of style-loader. Instead it
enables mini-css-extract-plugin in dev in combination with
css-hot-loader which enables HMR for development.

This is because mini-css-extract-plugin does not currently support
HMR out of the box. It also adds a SourceMapDevtoolPlugin to enable
sourcemaps with css since mini-css breaks sourcemaps when used in
combination with the cheap-module-evel-source-map setting.

Related issues:
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
---
 package.json            |  1 +
 tools/webpack.config.ts | 40 ++++++++++++++++++++--------------------
 yarn.lock               | 10 +++++++++-
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 5343b8b11d7595..471af1b86a241e 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@types/webpack": "4.1.3",
     "blueimp-md5": "2.10.0",
     "clipboard": "2.0.0",
+    "css-hot-loader": "1.3.9",
     "css-loader": "0.28.11",
     "emoji-datasource-apple": "3.0.0",
     "emoji-datasource-emojione": "3.0.0",
diff --git a/tools/webpack.config.ts b/tools/webpack.config.ts
index 6881b3f1e4826c..dd3d2967ac3db2 100644
--- a/tools/webpack.config.ts
+++ b/tools/webpack.config.ts
@@ -5,22 +5,14 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const assets = require('./webpack.assets.json');
 
-// Currently we're using style-loader for local dev
-// because MiniCssExtractPlugin doesn't support
-// HMR as yet. When this changes we can switch
-// over to MiniCssExtractPlugin which will Also
-// solve the flash of unstsyled elements on page load.
-// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
-function getCSSLoader(isProd: boolean) {
+// Adds on css-hot-loader in dev mode
+function getHotCSS(bundle:any[], isProd:boolean) {
     if(isProd) {
-        return MiniCssExtractPlugin.loader
-    }
-    return {
-        loader: 'style-loader',
-        options: {
-            sourceMap: true
-        }
+        return bundle;
     }
+    return [
+        'css-hot-loader',
+    ].concat(bundle);
 }
 export default (env?: string) : webpack.Configuration => {
     const production: boolean = env === "production";
@@ -83,21 +75,21 @@ export default (env?: string) : webpack.Configuration => {
                 // regular css files
                 {
                     test: /\.css$/,
-                    use: [
-                        getCSSLoader(production),
+                    use: getHotCSS([
+                        MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader',
                             options: {
                                 sourceMap: true
                             }
                         },
-                    ],
+                    ], production),
                 },
                 // sass / scss loader
                 {
                     test: /\.(sass|scss)$/,
-                    use: [
-                        getCSSLoader(production),
+                    use: getHotCSS([
+                        MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader',
                             options: {
@@ -110,7 +102,7 @@ export default (env?: string) : webpack.Configuration => {
                                 sourceMap: true
                             }
                         }
-                    ],
+                    ], production),
                 },
                 // load fonts and files
                 {
@@ -171,6 +163,14 @@ export default (env?: string) : webpack.Configuration => {
             new MiniCssExtractPlugin({
                 filename: "[name].css",
                 chunkFilename: "[id].css"
+            }),
+            // We use SourceMapDevToolPlugin in order to enable SourceMaps
+            // in combination with mini-css-extract-plugin and
+            // the devtool setting of cheap-module-eval-source-map.
+            // Without this plugin source maps won't work with that combo.
+            // See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
+            new webpack.SourceMapDevToolPlugin({
+                filename: "[file].map"
             })
         ];
 
diff --git a/yarn.lock b/yarn.lock
index 89336a4544161a..9126474aca58cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2054,6 +2054,14 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
+css-hot-loader@^1.3.9:
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.3.9.tgz#ed22b41126920134a4a2246d7d32113e2425c754"
+  dependencies:
+    loader-utils "^1.1.0"
+    lodash "^4.17.5"
+    normalize-url "^1.9.1"
+
 css-loader@0.28.11:
   version "0.28.11"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
@@ -6282,7 +6290,7 @@ normalize-url@2.0.1:
     query-string "^5.0.1"
     sort-keys "^2.0.0"
 
-normalize-url@^1.4.0:
+normalize-url@^1.4.0, normalize-url@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   dependencies: