WIP: use mini-css-extract-plugin instead of extract-text, to work with dynamic import. Currently outputting only one css and recipe highlight doesnt work

package-lock.json

@@ -8349,6 +8349,30 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "mini-css-extract-plugin": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
+      "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -41,7 +41,6 @@
     "css-loader": "^2.1.0",
     "eslint": "^5.11.1",
     "exports-loader": "^0.7.0",
-    "extract-text-webpack-plugin": "^4.0.0-alpha0",
     "file-loader": "^3.0.1",
     "grunt": "^1.0.3",
     "grunt-accessibility": "~6.0.0",
@@ -59,6 +58,7 @@
     "imports-loader": "^0.8.0",
     "ink-docstrap": "^1.3.2",
     "jsdoc-babel": "^0.5.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "nightwatch": "^1.0.18",
     "node-sass": "^4.11.0",
     "postcss-css-variables": "^0.11.0",

webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require("webpack");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const path = require("path");
 
 /**
@@ -31,8 +32,13 @@ const banner = `/**
  * limitations under the License.
  */`;
 
-const vendorCSS = new ExtractTextPlugin("vendor.css");
-const projectCSS = new ExtractTextPlugin("styles.css");
+// const vendorCSS = new MiniCssExtractPlugin({ 
+//     filename: "[name].css",
+// });
+// const projectCSS = new MiniCssExtractPlugin({
+//     filename: "styles.css",
+//     chunkFileName: "styles.css",
+// });
 
 module.exports = {
     plugins: [
@@ -49,14 +55,36 @@ module.exports = {
         new webpack.DefinePlugin({
             "process.browser": "true"
         }),
-        vendorCSS,
-        projectCSS
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[id].css",
+        }),
     ],
     resolve: {
         alias: {
             jquery: "jquery/src/jquery"
         }
     },
+    // optimization: {
+    //     splitChunks: {
+    //         cacheGroups: {
+    //             styles: {
+    //                 name: "styles",
+    //                 test: /\.css$/,
+    //                 // test: (module,c,entry = 'foo') => module.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+
+    //                 chunks: "all",
+    //                 enforce: true
+    //             },
+    //             vendor: {
+    //                 name: "vendor",
+    //                 test: /\.scss$/,
+    //                 chunks: "all",
+    //                 enforce: true,
+    //             },
+    //         }
+    //     }
+    // },
     module: {
         rules: [
             {
@@ -80,21 +108,31 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: projectCSS.extract({
-                    use: [
-                        { loader: "css-loader" },
-                        { loader: "postcss-loader" },
-                    ]
-                })
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "postcss-loader",
+                ]
+                // use: projectCSS.extract({
+                //     use: [
+                //         { loader: "css-loader" },
+                //         { loader: "postcss-loader" },
+                //     ]
+                // })
             },
             {
                 test: /\.scss$/,
-                use: vendorCSS.extract({
-                    use: [
-                        { loader: "css-loader" },
-                        { loader: "sass-loader" }
-                    ]
-                })
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "sass-loader",
+                ]
+                // use: vendorCSS.extract({
+                //     use: [
+                //         { loader: "css-loader" },
+                //         { loader: "sass-loader" }
+                //     ]
+                // })
             },
             {
                 test: /\.(ico|eot|ttf|woff|woff2)$/,