build(styleguidist): add support for CSS Modules

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

webpack.config.js

@@ -20,27 +20,50 @@ const SCOPE_VERSION = JSON.stringify(versionHash)
 
 webpackConfig.devtool = isDev ? false : 'source-map'
 
+const sassLoader = {
+	loader: 'sass-loader',
+	options: {
+		additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
+		/**
+		 * ! needed for resolve-url-loader
+		 */
+		sourceMap: true,
+		sassOptions: {
+			sourceMapContents: false,
+			includePaths: [
+				path.resolve(__dirname, './src/assets'),
+			],
+		},
+	},
+}
+
 webpackRules.RULE_SCSS = {
 	test: /\.scss$/,
-	use: [
+	oneOf: [
-		'style-loader',
-		'css-loader',
-		'resolve-url-loader',
 		{
-			loader: 'sass-loader',
+			resourceQuery: /module/,
-			options: {
+			use: [
-				additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
+				'style-loader',
-				/**
+				{
-				 * ! needed for resolve-url-loader
+					loader: 'css-loader',
-				 */
+					options: {
-				sourceMap: true,
+						modules: {
-				sassOptions: {
+							// Same as in Vite
-					sourceMapContents: false,
+							localIdentName: '_[local]_[hash:base64:5]',
-					includePaths: [
+						},
-						path.resolve(__dirname, './src/assets'),
+					},
-					],
 				},
-			},
+				'resolve-url-loader',
+				sassLoader,
+			],
+		},
+		{
+			use: [
+				'style-loader',
+				'css-loader',
+				'resolve-url-loader',
+				sassLoader,
+			],
 		},
 	],
 }
@@ -61,7 +84,7 @@ webpackRules.RULE_NODE_MJS = {
 	type: 'javascript/auto',
 	resolve: {
 		fullySpecified: false,
-	}
+	},
 }
 
 webpackConfig.module.rules = Object.values(webpackRules)