[Bug]: unable to render global styles for my storybook app

[truedrug]

Describe the bug

• I am authoring a react component library using webpack, using storybook for demo
• using less, css, css-modules, tailwind

Unable to get the global styles working

main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.tsx", "../src/**/*.mdx"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-viewport",
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.module\.css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  modules: {
                    localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
                  },
                },
              },
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
            ],
          },
          {
            test: /\.css$/,
            exclude: /\.module\.css$/,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
            ],
          },

          {
            test: /\.module\.less$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  modules: {
                    localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
                  },
                },
              },
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
              {
                loader: "less-loader",
                options: {
                  lessOptions: {
                    javascriptEnabled: true,
                    math: "always",
                  },
                },
              },
            ],
          },
          {
            test: /\.less$/,
            exclude: /\.module\.less$/,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
              {
                loader: "less-loader",
                options: {
                  lessOptions: {
                    javascriptEnabled: true,
                    math: "always",
                  },
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: true,
  },
};

export default config;

preview.ts

import type { Preview } from "@storybook/react";

/* Global styles that will be applicable to all stories */
import "antd/dist/antd.css";
import "tailwindcss/tailwind.css";
import "./global.css";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    options: {
      storySort: {
        order: ["theme", ["Colors"], "components"],
      },
    },
  },
};

export default preview;

global.css

body {
  background: red;
}

To Reproduce

No response

System

No response

Additional context

Should apply the background to red, but it does not even show up in chrome styles tab

[truedrug]

Some additional context: If I move the styles into node_modules and re-reference the global.css from there, it works fine

[jonsoku-dev]

exactly same..

[truedrug]

Can someone from storybook team check this please? @Shilman.

Sorry for tagging individually, but wasn't sure whom to reach out to and if this could be prioritized?

"storybook": "^7.6.6", "react": "^18.0.0", node: 18.0.0

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[truedrug]

@shilman https://github.com/truedrug/storybook-global-styles-repro

npm i npm start - to view storybook locally

[truedrug]

@shilman any updates here pls?

[valentinpalkovic]

Hi @truedrug,

I figured it out. The issue is that non-css-module CSS, of course, has some "side-effects". So, CSS, which isn't coupled or used by any component, but should be used globally instead. The problem is that, per default, the CSS in your global.css gets tree-shaken out and doesn't appear in the build output.

Please adjust your .storybook/main.ts in the following way:

import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.tsx", "../src/**/*.mdx"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-viewport",
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.module\.css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  modules: {
                    localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
                  },
                },
              },
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
            ],
          },
          {
            test: /\.css$/,
            exclude: /\.module\.css$/,
+            sideEffects: true,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
            ],
          },

          {
            test: /\.module\.less$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  modules: {
                    localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
                  },
                },
              },
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
              {
                loader: "less-loader",
                options: {
                  lessOptions: {
                    javascriptEnabled: true,
                    math: "always",
                  },
                },
              },
            ],
          },
          {
            test: /\.less$/,
            exclude: /\.module\.less$/,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: { implementation: require.resolve("postcss") },
              },
              {
                loader: "less-loader",
                options: {
                  lessOptions: {
                    javascriptEnabled: true,
                    math: "always",
                  },
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: true,
  },
};

export default config;

This will mark all non-CSS-module CSS files having side-effects. This tells webpack to not tree-shake these CSS files and keep all their contents in the build output.