Merge pull request #112 from supabase/feature/treeshaking

Feature/treeshaking

Author: MildTomato

.storybook/main.js

@@ -1,23 +1,21 @@
-const babel = require('@babel/core');
+const babel = require('@babel/core')
+const postCssLoader = './postCssLoader'
 
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    'storybook-dark-mode/register',
+    postCssLoader,
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    'storybook-dark-mode/register'
-  ],
-  webpackFinal: async config => {
-
+  webpackFinal: async (config) => {
     // This is for fix webpack storybook get module @emotion/styled/base
     // It's wrong module, the right module is @emotion/styled-base
     config.resolve.alias = {
-      '@emotion/styled/base': '@emotion/styled-base'
+      '@emotion/styled/base': '@emotion/styled-base',
     }
 
-    return config;
-  }
-}
+    return config
+  },
+}

.storybook/postCssLoader.js

@@ -0,0 +1,47 @@
+// taken from
+// https://github.com/Negan1911/storybook-css-modules-preset/blob/master/index.js
+
+const css_regex = '/\\.css$/'
+
+module.exports = {
+  webpackFinal(config = {}, options = {}) {
+    const cssRule = config.module.rules.find(
+      (_) => _.test.toString() === css_regex
+    )
+
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [
+          ...config.module.rules.filter((_) => _.test.toString() !== css_regex),
+          {
+            ...cssRule,
+            exclude: /\.module\.css$/,
+          },
+          {
+            ...cssRule,
+            test: /\.module\.css$/,
+            use: cssRule.use.map((_) => {
+              if (_ && _.loader && _.loader.match(/\/css-loader/g)) {
+                return {
+                  ..._,
+                  options: {
+                    ..._.options,
+                    // modules: true,
+                    modules: {
+                      //   localIdentName: '[name]__[local]__[hash:base64:5]',
+                      localIdentName: '[local]',
+                    },
+                  },
+                }
+              }
+
+              return _
+            }),
+          },
+        ],
+      },
+    }
+  },
+}

.storybook/preview.js

@@ -4,7 +4,6 @@ import './preview.css'
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   darkMode: {
-    current: 'dark',
     darkClass: 'dark',
     lightClass: 'light',
     stylePreview: true,