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:
webpack-contrib/mini-css-extract-plugin#34
webpack-contrib/mini-css-extract-plugin#29

Author: armaanahluwalia

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",

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"
             })
         ];
 

yarn.lock

@@ -2054,6 +2054,14 @@ [email protected]:
   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"
+
 [email protected]:
   version "0.28.11"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
@@ -6282,7 +6290,7 @@ [email protected]:
     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: