Fix slow CSS loading in Chrome

package-lock.json

@@ -1693,6 +1693,16 @@
       "dev": true,
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -3926,6 +3936,13 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -9101,6 +9118,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },

webpack.config.dev.js

@@ -8,7 +8,8 @@ const {
   getOutput,
   getCopyPlugins,
   getFirefoxCopyPlugins,
-  getEntry
+  getEntry,
+  getMiniCssExtractPlugin
 } = require("./webpack.utils");
 const path = require("path");
 const config = require("./config.json");
@@ -35,25 +36,6 @@ const generalConfig = {
       },
       {
         test: /\.(scss|css)$/,
-        exclude: [path.resolve(__dirname, "src", "content")],
-        use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
-            options: {
-              esModule: false
-            }
-          },
-          {
-            loader: "sass-loader"
-          }
-        ]
-      },
-      {
-        test: /\.(scss|css)$/,
-        include: [path.resolve(__dirname, "src", "content")],
         use: [
           MiniCssExtractPlugin.loader,
           {
@@ -92,9 +74,7 @@ module.exports = [
     entry: getEntry(config.chromePath),
     output: getOutput("chrome", config.devDirectory),
     plugins: [
-      new MiniCssExtractPlugin({
+      ...getMiniCssExtractPlugin(),
-        filename: "[name]/[name].css"
-      }),
       ...getHTMLPlugins("chrome", config.devDirectory, config.chromePath),
       ...getCopyPlugins("chrome", config.devDirectory, config.chromePath)
     ]
@@ -104,9 +84,7 @@ module.exports = [
     entry: getEntry(config.firefoxPath),
     output: getOutput("firefox", config.devDirectory),
     plugins: [
-      new MiniCssExtractPlugin({
+      ...getMiniCssExtractPlugin(),
-        filename: "[name]/[name].css"
-      }),
       ...getFirefoxCopyPlugins("firefox", config.devDirectory, config.firefoxPath),
       ...getHTMLPlugins("firefox", config.devDirectory, config.firefoxPath),
       new BundleAnalyzerPlugin({

webpack.config.dist.js

@@ -10,6 +10,7 @@ const {
   getCopyPlugins,
   getZipPlugin,
   getFirefoxCopyPlugins,
+  getMiniCssExtractPlugin,
   getEntry
 } = require("./webpack.utils");
 const path = require("path");
@@ -40,25 +41,6 @@ const generalConfig = {
       },
       {
         test: /\.(scss|css)$/,
-        exclude: [path.resolve(__dirname, "src", "content")],
-        use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
-            options: {
-              esModule: false
-            }
-          },
-          {
-            loader: "sass-loader"
-          }
-        ]
-      },
-      {
-        test: /\.(scss|css)$/,
-        include: [path.resolve(__dirname, "src", "content")],
         use: [
           MiniCssExtractPlugin.loader,
           {
@@ -101,9 +83,7 @@ module.exports = [
     },
     plugins: [
       new CleanWebpackPlugin(["dist", "temp"]),
-      new MiniCssExtractPlugin({
+      ...getMiniCssExtractPlugin(),
-        filename: "[name]/[name].css"
-      }),
       ...getHTMLPlugins("chrome", config.tempDirectory, config.chromePath),
       ...getCopyPlugins("chrome", config.tempDirectory, config.chromePath),
       getZipPlugin(`${config.extName}-for-chrome-${extVersion}`, config.distDirectory)
@@ -118,9 +98,7 @@ module.exports = [
     },
     plugins: [
       new CleanWebpackPlugin(["dist", "temp"]),
-      new MiniCssExtractPlugin({
+      ...getMiniCssExtractPlugin(),
-        filename: "[name]/[name].css"
-      }),
       ...getHTMLPlugins("firefox", config.tempDirectory, config.firefoxPath),
       ...getFirefoxCopyPlugins("firefox", config.tempDirectory, config.firefoxPath),
       getZipPlugin(`${config.extName}-for-firefox-${ffExtVersion}`, config.distDirectory)
@@ -136,6 +114,7 @@ module.exports = [
     entry: { other: path.resolve(__dirname, `src/background/background.js`) },
     output: getOutput("copiedSource", config.tempDirectory),
     plugins: [
+      ...getMiniCssExtractPlugin(),
       new CopyWebpackPlugin({
         patterns: [
           {

webpack.utils.js

@@ -5,6 +5,7 @@
 
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ZipPlugin = require("zip-webpack-plugin");
 const path = require("path");
 
@@ -77,6 +78,12 @@ const getFirefoxCopyPlugins = (browserDir, outputDir = "dev", sourceDir = "src")
   })
 ];
 
+const getMiniCssExtractPlugin = () => [
+  new MiniCssExtractPlugin({
+    filename: "[name]/[name].css"
+  })
+];
+
 const getZipPlugin = (browserDir, outputDir = "dist", exclude = "") =>
   new ZipPlugin({
     path: path.resolve(__dirname, `${outputDir}`),
@@ -99,6 +106,7 @@ module.exports = {
   getOutput,
   getCopyPlugins,
   getFirefoxCopyPlugins,
+  getMiniCssExtractPlugin,
   getZipPlugin,
   getEntry
 };