Ensure source maps are built for stylesheets

material/assets/manifest.json

@@ -1,10 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.05dbdb2b.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.05dbdb2b.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.241d0c29.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.241d0c29.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.b90b6d1d.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.b90b6d1d.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.606193c2.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.606193c2.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.7f7c8775.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.7f7c8775.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.25573976.min.css",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
+  "assets/stylesheets/main.css": "assets/stylesheets/main.c1a4d03f.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.c1a4d03f.min.css.map",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.fdbf4049.min.css",
+  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.fdbf4049.min.css.map"
 }

material/base.html

@@ -41,9 +41,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.25573976.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c1a4d03f.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.fdbf4049.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -178,8 +178,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.241d0c29.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.05dbdb2b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.606193c2.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.b90b6d1d.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/partials/language/zh-Hant.html

@@ -18,7 +18,7 @@
   "search.result.one": "找到 1 个符合條件的結果",
   "search.result.other": "# 個符合條件的結果",
   "skip.link.title": "跳轉至",
-  "source.link.title": "前往 Github 倉庫",
+  "source.link.title": "前往 GitHub 倉庫",
   "source.revision.date": "最後更新",
   "toc.title": "目錄"
 }[key] }}{% endmacro %}

material/partials/language/zh.html

@@ -18,7 +18,7 @@
   "search.result.one": "找到 1 个符合条件的结果",
   "search.result.other": "# 个符合条件的结果",
   "skip.link.title": "跳转至",
-  "source.link.title": "前往 Github 仓库",
+  "source.link.title": "前往 GitHub 仓库",
   "source.revision.date": "最后更新",
   "toc.title": "目录"
 }[key] }}{% endmacro %}

package.json

@@ -48,6 +48,7 @@
     "@types/event-hooks-webpack-plugin": "^2.0.0",
     "@types/html-minifier": "^3.5.3",
     "@types/lunr": "^2.3.2",
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/node": "^13.9.1",
     "@types/ramda": "^0.26.44",
     "@types/resize-observer-browser": "^0.1.3",
@@ -59,14 +60,14 @@
     "css-mqpacker": "^7.0.0",
     "event-hooks-webpack-plugin": "^2.1.6",
     "expose-loader": "^0.7.5",
-    "extract-loader": "^5.0.1",
-    "file-loader": "^6.0.0",
     "github-types": "^1.0.0",
     "gitlab": "^14.2.2",
     "html-minifier": "^4.0.0",
+    "ignore-emit-webpack-plugin": "^2.0.2",
     "material-design-color": "^2.3.2",
     "material-design-icons-svg": "^3.0.0",
     "material-shadows": "^3.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "modularscale-sass": "^3.0.10",
     "postcss-loader": "^3.0.0",
     "preact": "^10.3.4",

src/assets/javascripts/index.ts

@@ -24,9 +24,6 @@
 // which must be tackled after we gathered some feedback on v5.
 // tslint:disable
 
-import "../stylesheets/main.scss"
-import "../stylesheets/palette.scss"
-
 import { values } from "ramda"
 import {
   merge,

webpack.config.ts

@@ -26,6 +26,8 @@ import * as CopyPlugin from "copy-webpack-plugin"
 import * as EventHooksPlugin from "event-hooks-webpack-plugin"
 import * as fs from "fs"
 import { minify as minhtml } from "html-minifier"
+import IgnoreEmitPlugin from "ignore-emit-webpack-plugin"
+import MiniCssExtractPlugin = require("mini-css-extract-plugin")
 import * as path from "path"
 import { toPairs } from "ramda"
 import { minify as minjs } from "terser"
@@ -86,22 +88,12 @@ function config(args: Configuration): Configuration {
         {
           test: /\.scss$/,
           use: [
-            {
-              loader: "file-loader",
-              options: {
-                name: `[name]${
-                  args.mode === "production" ? ".[md5:hash:hex:8].min" : ""
-                }.css`,
-                outputPath: "assets/stylesheets",
-                publicPath: path.resolve(__dirname, "material")
-              }
-            },
-            "extract-loader",
+            MiniCssExtractPlugin.loader,
             {
               loader: "css-loader",
               options: {
                 url: false,
-                sourceMap: args.mode !== "production"
+                sourceMap: true
               }
             },
             {
@@ -137,7 +129,7 @@ function config(args: Configuration): Configuration {
                   require("autoprefixer")(),
                   require("css-mqpacker")
                 ],
-                sourceMap: args.mode !== "production"
+                sourceMap: true
               }
             },
             {
@@ -151,7 +143,7 @@ function config(args: Configuration): Configuration {
                     "node_modules/material-shadows"
                   ]
                 },
-                sourceMap: args.mode !== "production"
+                sourceMap: true
               }
             }
           ]
@@ -173,20 +165,15 @@ function config(args: Configuration): Configuration {
 
     /* Plugins */
     plugins: [
+      new IgnoreEmitPlugin(/\/stylesheets\/.*?\.js/),
       new AssetsManifestPlugin({
         output: "assets/manifest.json",
-        assets,
-        customize({ key, value }) {
-          return {
-            key: key.replace(/\.scss$/, ".css"),
-            value
-          }
-        }
+        assets
       })
     ],
 
     /* Source maps */
-    devtool: "source-map",
+    devtool: args.mode === "production" ? "source-map" : "eval",
 
     /* Filter false positives and omit verbosity */
     stats: {
@@ -224,7 +211,9 @@ export default (_env: never, args: Configuration): Configuration[] => {
     {
       ...base,
       entry: {
-        "assets/javascripts/bundle": "src/assets/javascripts"
+        "assets/javascripts/bundle":  "src/assets/javascripts",
+        "assets/stylesheets/main":    "src/assets/stylesheets/main.scss",
+        "assets/stylesheets/palette": "src/assets/stylesheets/palette.scss"
       },
       output: {
         path: path.resolve(__dirname, "material"),
@@ -237,6 +226,11 @@ export default (_env: never, args: Configuration): Configuration[] => {
       plugins: [
         ...base.plugins,
 
+        /* Stylesheets */
+        new MiniCssExtractPlugin({
+          filename: `[name]${hash}.css`
+        }),
+
         /* FontAwesome icons */
         new CopyPlugin([
           { to: ".icons/fontawesome", from: "**/*.svg" },
@@ -338,7 +332,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
       optimization: {
         splitChunks: {
           cacheGroups: {
-            commons: {
+            vendor: {
               test: /\/node_modules\//,
               name: "assets/javascripts/vendor",
               chunks: "all"