Update Storybook webpack configuration, preview.js

Author: aeksco

.storybook/main.js

@@ -4,26 +4,21 @@ const path = require("path");
 module.exports = {
     stories: ["../src/**/*.stories.tsx"],
     addons: [
-        "@storybook/addon-actions/register",
-        "@storybook/addon-viewport/register",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
     ],
+    // Enable the Storybook Interactions debugger
+    // Docs: https://storybook.js.org/addons/@storybook/addon-interactions
+    features: {
+        interactionsDebugger: true,
+    },
+    // Configure Storybook to use Webpack@5.x
+    // Docs: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5
+    core: {
+        builder: "webpack5",
+    },
     webpackFinal: async (config) => {
-        config.module.rules.push({
-            exclude: /node_modules/,
-            test: /\.scss$/,
-            use: [
-                {
-                    loader: "style-loader", // Creates style nodes from JS strings
-                },
-                {
-                    loader: "css-loader", // Translates CSS into CommonJS
-                },
-                {
-                    loader: "sass-loader", // Compiles Sass to CSS
-                },
-            ],
-        });
-
+        // Setup @src path resolution for TypeScript files
         config.resolve = {
             ...config.resolve,
             extensions: [".ts", ".tsx", ".js"],
@@ -32,6 +27,7 @@ module.exports = {
             },
         };
 
+        // Setup module replacement for mocked webextension-polyfill
         config.plugins = [
             ...config.plugins,
             new webpack.NormalModuleReplacementPlugin(
@@ -57,6 +53,42 @@ module.exports = {
             ),
         ];
 
+        // Remove the default .css webpack module rule
+        // This is necessary because we use both global CSS and CSS modules
+        // in the extension and in Storybook
+        config.module.rules = config.module.rules.filter((r) => {
+            if (".css".match(r.test)) {
+                return false;
+            }
+            return true
+        })
+
+        // Treat src/css/app.css as a global stylesheet
+        config.module.rules.push({
+            test: /\app.css$/,
+            use: [
+                "style-loader",
+                "css-loader",
+                "postcss-loader",
+            ],
+        })
+
+        // Load .module.css files as CSS modules
+        config.module.rules.push({
+            test: /\.module.css$/,
+            use: [
+                "style-loader",
+                {
+                    loader: "css-loader",
+                    options: {
+                        modules: true,
+                    },
+                },
+                "postcss-loader",
+            ],
+        })
+
+        // Return the final Webpack configuration
         return config;
     },
 };

.storybook/preview.js

@@ -1,28 +1,2 @@
-import {
-    addParameters,
-    addDecorator,
-    INITIAL_VIEWPORTS,
-} from "@storybook/react";
-import { withConsole, setConsoleOptions } from "@storybook/addon-console";
-import { withInfo } from "@storybook/addon-info";
-
-// Configure Viewports addon
-addParameters({
-    viewport: {
-        viewports: INITIAL_VIEWPORTS,
-        defaultViewport: "someDefault",
-    },
-});
-
-// You'll start to receive all console messages, warnings, errors in your action logger panel - Everything except HMR logs.
-setConsoleOptions({
-    panelExclude: [],
-});
-
-// Setup StoryInfo addon
-addDecorator(withInfo);
-
-// You'll receive console outputs as a console,
-// warn and error actions in the panel. You might want to know from
-// what stories they come. In this case, add withConsole decorator:
-addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+// Import global app.css file
+import "../src/css/app.css";