build(styleguidist): add support for CSS Modules

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

webpack.config.js

@@ -20,13 +20,7 @@ const SCOPE_VERSION = JSON.stringify(versionHash)
 
 webpackConfig.devtool = isDev ? false : 'source-map'
 
-webpackRules.RULE_SCSS = {
-	test: /\.scss$/,
-	use: [
-		'style-loader',
-		'css-loader',
-		'resolve-url-loader',
-		{
+const sassLoader = {
 	loader: 'sass-loader',
 	options: {
 		additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
@@ -41,6 +35,35 @@ webpackRules.RULE_SCSS = {
 			],
 		},
 	},
+}
+
+webpackRules.RULE_SCSS = {
+	test: /\.scss$/,
+	oneOf: [
+		{
+			resourceQuery: /module/,
+			use: [
+				'style-loader',
+				{
+					loader: 'css-loader',
+					options: {
+						modules: {
+							// Same as in Vite
+							localIdentName: '_[local]_[hash:base64:5]',
+						},
+					},
+				},
+				'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)