chore: support css modules in storybook

Unleash · Feb 25, 2022 · 790bd4d · 790bd4d
1 parent 4a79596
commit 790bd4d
Showing 1 changed file with 43 additions and 4 deletions.
diff --git a/website/.storybook/main.js b/website/.storybook/main.js
@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
     stories: [
         '../src/**/*.stories.mdx',
@@ -19,7 +17,48 @@ module.exports = {
         },
     ],
     webpackFinal: async (config) => {
-        config.resolve.alias['@site'] = path.resolve(__dirname, '../');
-        return config;
+        const path = require('path');
+
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@site': path.resolve(__dirname, '../'),
+        };
+
+        const rules = config.module.rules.map((rule) => {
+            if (rule.test.toString() !== '/\\.css$/') {
+                return rule;
+            }
+
+            const use = rule.use.map((u) => {
+                const { loader } = u;
+
+                if (!loader || !loader.includes('/css-loader/')) {
+                    return u;
+                }
+
+                const options = {
+                    ...u.options,
+                    modules: true,
+                };
+
+                return {
+                    ...u,
+                    options,
+                };
+            });
+
+            return {
+                ...rule,
+                use,
+            };
+        });
+
+        return {
+            ...config,
+            module: {
+                ...config.module,
+                rules,
+            },
+        };
     },
 };