From 790bd4da0f46b51f68bd4515444a13091dc84a3d Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Fri, 25 Feb 2022 15:37:04 +0100
Subject: [PATCH] chore: support css modules in storybook

---
 website/.storybook/main.js | 47 ++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/website/.storybook/main.js b/website/.storybook/main.js
index fce48b819b..0646e98d97 100644
--- 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,
+            },
+        };
     },
 };