ENH Update css webpack config

configMeta/cssWebpackConfig.js

@@ -0,0 +1,27 @@
+const BaseWebpackConfig = require('./baseWebpackConfig');
+const moduleCSS = require('../css/modules');
+const pluginCSS = require('../css/plugins');
+
+/**
+ * Dynamically generates webpack config for transpiling sass to css using Silverstripe default settings.
+ *
+ * IMPORTANT: Instead of setting the output name in the output key, add it as the filename in this constructor.
+ * Otherwise you will get errors because webpack wants to create a js file for each css file. The js files
+ * aren't emitted thanks to the IgnoreEmitPlugin, but this happens after chunk validation.
+ */
+module.exports = class CssWebpackConfig extends BaseWebpackConfig {
+  constructor(name, ENV, PATHS, filename = 'styles/[name].css') {
+    super();
+    this.config = {
+      name,
+      output: {
+        path: PATHS.DIST,
+      },
+      devtool: (ENV !== 'production') ? 'source-map' : '',
+      module: moduleCSS(ENV, PATHS),
+      plugins: [
+        ...pluginCSS(filename, ENV, PATHS),
+      ],
+    };
+  }
+}

css/modules.js

@@ -1,36 +1,27 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const Path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 /**
  * Exports the settings for css modules in webpack.config
  *
  * @param {string} ENV Environment to build for, expects 'production' for production and
  * anything else for non-production
- * @param {string} FILES_PATH The relative path from dist-css file to dist-images/dist-fonts
  * @param {string} SRC The path to the source scss files
  * @param {string} ROOT The path to the root of the project, this is so we can scope for
- * silverstripe-admin variables.scss
+ * importing silverstripe-admin sass from other modules
  * @returns {{rules: [*,*,*,*]}}
  */
-module.exports = (ENV, { FILES_PATH, SRC, ROOT }) => {
+module.exports = (ENV, { SRC, ROOT }) => {
   const useSourceMap = ENV !== 'production';
 
   const cssLoaders = [
-    {
-      loader: 'style-loader',
-      options: {
-        sourceMap: useSourceMap,
-      },
-    },
     {
       loader: MiniCssExtractPlugin.loader,
     },
     {
       loader: 'css-loader',
       options: {
         sourceMap: useSourceMap,
-        minimize: true,
-        discardComments: true,
       },
     },
     {
@@ -39,13 +30,14 @@ module.exports = (ENV, { FILES_PATH, SRC, ROOT }) => {
         sourceMap: useSourceMap,
         postcssOptions: {
           plugins: [
-            require('autoprefixer'),
-            require('postcss-custom-properties'),
+            'autoprefixer',
+            'postcss-custom-properties',
           ],
         },
       },
     },
-  ].filter(loader => loader);
+  ];
+
   const scssLoaders = [
     ...cssLoaders,
     {
@@ -65,8 +57,7 @@ module.exports = (ENV, { FILES_PATH, SRC, ROOT }) => {
             Path.resolve(ROOT, '../../silverstripe/admin/client/src/styles'),
           ],
         },
-        implementation: require('sass'),
-        sourceMap: useSourceMap,
+        sourceMap: true, // required for resolve-url-loader to be happy
       },
     },
   ];
@@ -84,17 +75,22 @@ module.exports = (ENV, { FILES_PATH, SRC, ROOT }) => {
       {
         test: /\.(png|gif|jpe?g|svg)$/,
         exclude: /fonts[\/\\]([\w_-]+)\.svg$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'images/[name].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024 // 10kb
+          }
+        },
+        generator: {
+          filename: 'images/[name][ext]',
         },
       },
       {
-        test: /fonts[\/\\]([\w_-]+)\.(woff2?|eot|ttf|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: 'fonts/[name].[ext]?h=[contenthash]',
+        // Any .woff, woff2, eot, ttf, or otf file - or svgs specifically in a fonts folder.
+        test: /(\.(woff2?|eot|ttf|otf)|fonts[\/\\]([\w_-]+)\.svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]?h=[contenthash]',
         },
       },
     ],

css/plugins.js

@@ -1,10 +1,14 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
 
 /**
  * Exports the settings for plugins in webpack.config
+ * @param {string} filename determines the name of each output CSS file.
+ * See https://webpack.js.org/plugins/mini-css-extract-plugin/#filename
  */
-module.exports = () => ([
+module.exports = (filename) => ([
   new MiniCssExtractPlugin({
-    filename: 'styles/[name].css',
+    filename,
   }),
+  new IgnoreEmitPlugin(/\.js$/),
 ]);

index.js

@@ -8,4 +8,5 @@ module.exports = {
   resolveJS: require('./js/resolve'),
 
   JavascriptWebpackConfig: require('./configMeta/javascriptWebpackConfig'),
+  CssWebpackConfig: require('./configMeta/cssWebpackConfig'),
 };

package.json

@@ -30,11 +30,10 @@
 		"@sect/modernizr-loader": "^1.0.3",
 		"autoprefixer": "^10.4.13",
 		"babel-loader": "^9.0.1",
+		"core-js": "^3.26.0",
 		"css-loader": "^6.7.1",
-    "core-js": "^3.26.0",
 		"expose-loader": "^4.0.0",
-		"extract-loader": "^5.1.0",
-		"file-loader": "^6.2.0",
+		"ignore-emit-webpack-plugin": "^2.0.6",
 		"imports-loader": "^4.0.1",
 		"json-loader": "^0.5.7",
 		"lodash": "^4.17.21",
@@ -45,13 +44,10 @@
 		"postcss-custom-properties": "^12.1.10",
 		"postcss-load-config": "^4.0.1",
 		"postcss-loader": "^7.0.1",
-		"raw-loader": "^4.0.2",
 		"resolve-url-loader": "^5.0.0",
 		"sass": "^1.55.0",
 		"sass-loader": "^13.1.0",
-		"style-loader": "3.3.1",
 		"stylelint": "^14.14.0",
-		"url-loader": "^4.1.1",
 		"webpack": "^5.74.0",
 		"webpack-bundle-analyzer": "^4.7.0"
 	},