From 5a6df5caf166081cf33321219ea1ef56e358b050 Mon Sep 17 00:00:00 2001
From: Dion Dirza <dion.dirza@gmail.com>
Date: Sat, 17 Mar 2018 14:32:38 +0700
Subject: [PATCH] Use mini-css-extract instead of extract-text-plugin

---
 internal/webpack/configFactory.js             | 22 ++++----
 package-lock.json                             | 56 +++++++++----------
 package.json                                  |  4 +-
 .../DemoApp/AsyncCounterRoute/CounterRoute.js |  4 +-
 .../DemoApp/AsyncCounterRoute/styles.css      |  3 +
 5 files changed, 46 insertions(+), 43 deletions(-)
 create mode 100644 shared/components/DemoApp/AsyncCounterRoute/styles.css

diff --git a/internal/webpack/configFactory.js b/internal/webpack/configFactory.js
index 42b96e23..5dd6a40f 100644
--- a/internal/webpack/configFactory.js
+++ b/internal/webpack/configFactory.js
@@ -1,6 +1,6 @@
 import appRootDir from 'app-root-dir';
 import AssetsPlugin from 'assets-webpack-plugin';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import path from 'path';
@@ -66,6 +66,9 @@ export default function webpackConfigFactory(buildOptions) {
   let webpackConfig = {
     // Webpack Mode
     mode: ifDev('development', 'production'),
+    // Add context for resolving entry points and loaders from configuration
+    // it is recommended to define the context
+    context: appRootDir.get(),
     // Define our entry chunks for our bundle.
     entry: {
       // We name our entry files "index" as it makes it easier for us to
@@ -331,9 +334,9 @@ export default function webpackConfigFactory(buildOptions) {
       // CSS files.
       ifProdClient(
         () =>
-          new ExtractTextPlugin({
-            filename: '[name]-[contenthash].css',
-            allChunks: true,
+          new MiniCssExtractPlugin({
+            filename: '[name]-[chunkhash].css',
+            chunkFilename: '[name]-[chunkhash].css',
           }),
       ),
 
@@ -484,16 +487,13 @@ export default function webpackConfigFactory(buildOptions) {
                 // an ExtractTextPlugin instance.
                 // Note: The ExtractTextPlugin needs to be registered within the
                 // plugins section too.
-                ifProdClient(() => ({
-                  loader: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: ['css-loader'],
-                  }),
-                })),
+                ifProdClient({
+                  use: [MiniCssExtractPlugin.loader, 'css-loader'],
+                }),
                 // When targetting the server we use the "/locals" version of the
                 // css loader, as we don't need any css files for the server.
                 ifNode({
-                  loaders: ['css-loader/locals'],
+                  use: ['css-loader/locals'],
                 }),
               ),
             ),
diff --git a/package-lock.json b/package-lock.json
index 1384d982..566615f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4446,31 +4446,6 @@
         "is-extglob": "1.0.0"
       }
     },
-    "extract-text-webpack-plugin": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
-      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
-      "dev": true,
-      "requires": {
-        "async": "2.6.0",
-        "loader-utils": "1.1.0",
-        "schema-utils": "0.4.5",
-        "webpack-sources": "1.1.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
-          "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
-          "dev": true,
-          "requires": {
-            "big.js": "3.2.0",
-            "emojis-list": "2.1.0",
-            "json5": "0.5.1"
-          }
-        }
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -7391,7 +7366,7 @@
         "jest-message-util": "22.4.0",
         "jest-snapshot": "22.4.0",
         "jest-util": "22.4.1",
-        "source-map-support": "0.5.3"
+        "source-map-support": "0.5.4"
       }
     },
     "jest-leak-detector": {
@@ -9153,6 +9128,29 @@
         "dom-walk": "0.1.1"
       }
     },
+    "mini-css-extract-plugin": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.0.tgz",
+      "integrity": "sha512-rbuOYZCmNT0FW46hbhIKklBJ6ubwpcWnT81RmTsk0BLTQmL6euOH8lr2d7Wlv5ywJgpH3p7vKy5039dkn4YvxQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "webpack-sources": "1.1.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
+          "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
@@ -12365,9 +12363,9 @@
       }
     },
     "source-map-support": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
-      "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.4.tgz",
+      "integrity": "sha512-PETSPG6BjY1AHs2t64vS2aqAgu6dMIMXJULWFBGbh2Gr8nVLbCFDo6i/RMMvviIQ2h1Z8+5gQhVKSn2je9nmdg==",
       "dev": true,
       "requires": {
         "source-map": "0.6.1"
diff --git a/package.json b/package.json
index 83b70ad5..e75611e9 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,6 @@
     "eslint-plugin-import": "2.9.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "7.7.0",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "1.1.11",
     "glob": "7.1.2",
     "happypack": "5.0.0-beta.1",
@@ -122,6 +121,7 @@
     "jest": "22.4.2",
     "lint-staged": "7.0.0",
     "md5": "2.2.1",
+    "mini-css-extract-plugin": "0.2.0",
     "modernizr-loader": "1.0.1",
     "node-notifier": "5.2.1",
     "prettier": "1.11.1",
@@ -133,7 +133,7 @@
     "request": "2.85.0",
     "rimraf": "2.6.2",
     "semver": "5.5.0",
-    "source-map-support": "0.5.3",
+    "source-map-support": "0.5.4",
     "style-loader": "0.20.3",
     "webpack": "4.1.1",
     "webpack-bundle-analyzer": "2.11.1",
diff --git a/shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js b/shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js
index 49bbd4fd..e86cd2ca 100644
--- a/shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js
+++ b/shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js
@@ -1,6 +1,8 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { Component } from 'react';
 
+import './styles.css';
+
 class CounterRoute extends Component {
   constructor(props) {
     super(props);
@@ -15,7 +17,7 @@ class CounterRoute extends Component {
   render() {
     return (
       <div>
-        <h3>Counter</h3>
+        <h3 className="counter__title">Counter</h3>
         <p>
           <em>
             This is a small demo component that contains state. It's useful for
diff --git a/shared/components/DemoApp/AsyncCounterRoute/styles.css b/shared/components/DemoApp/AsyncCounterRoute/styles.css
new file mode 100644
index 00000000..46b37131
--- /dev/null
+++ b/shared/components/DemoApp/AsyncCounterRoute/styles.css
@@ -0,0 +1,3 @@
+.counter__title {
+  color: #9b4dca;
+}