Fix storybook build in dev mode

City-of-Helsinki · Jan 19, 2023 · ffb3984 · ffb3984
1 parent 515f506
commit ffb3984
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js
@@ -1,3 +1,14 @@
+const postcss = require('postcss');
+const postcssModules = require('postcss-modules');
+
+const processor = postcss(
+  postcssModules({
+    global: true,
+    generateScopedName: '[local]',
+    getJSON: () => {}
+  }),
+);
+
 const webpackFinal = async (config) => ({
   ...config,
   resolve: {
@@ -20,27 +31,14 @@ const webpackFinal = async (config) => ({
             loader: 'lit-css-loader',
             options: {
               specifier: 'lit-element',
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [
-                  [
-                    'postcss-modules',
-                    {
-                      global: true,
-                      generateScopedName: '[local]'
-                    },
-                  ],
-                ],
+              transform: async (css, { filePath }) => {
+                return processor.process(css, { from: filePath }).then((result) => {
+                  return result.css;
+                });
               },
             },
           },
-          {
-            loader: 'sass-loader',
-          },
+          'sass-loader'
         ],
       },
     ],