[Bug]: 3rd Party Global Styles not loading

[halcarleton]

Describe the bug

Importing a 3rd party CSS file _(CSS file in node_modules)_ into the .storybook/preview.tsx file does not result in that CSS being loaded into the preview iframe.

To Reproduce

Reproduction repository: https://github.com/halcarleton/storybook-radix-issue

This is a bare bones NextJS app created with:

npx create-next-app@latest
npx storybook@latest init

Then Radix theme is installed and integrated into both the Next app and the Storybook preview.

---

Steps to repro:

1. npm install
2. npm run dev
3. Open the running app at the localhost port provided in the output of the above command.
4. Confirm that there are two styled elements visible on the page:
   • a blue button using the Radix theme
   • a pink div styled with a global CSS file
5. npm run storybook
6. Open the Example/Button/Primary story
7. See that the Radix Theme styling is not applied
8. Open the Example/TestElement/Primary story
9. See that the test element is styled according to the global CSS

Additional debugging steps:

1. Copy the content of Radix Theme's styles.css file and paste it into the project's ./src/app/globals.css file.
2. npm run storybook
3. Notice that the Example/Button/Primary story now contains the correct styling.

This suggests that the issue is not with the imported CSS file, but instead seems to be specific to importing from node_modules.

---

For quick reference, this is the content of the .storybook/preview.tsx file:

This is the base content initialized by the storybook init command. The updated pieces are:

• importing the Radix Theme global CSS file
• Importing the project's global CSS file
• Adding a decorator to wrap the preview in the Theme element(necessary for applying radix theme styling)

import React from 'react';
import type { Preview } from "@storybook/react";
import { Theme } from "@radix-ui/themes";
import '@radix-ui/themes/styles.css';
import '../src/app/globals.css'

const preview: Preview = {
  decorators: [
    (Story) => (<Theme><Story /></Theme>),
  ],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

System

Storybook Environment Info:

  System:
    OS: macOS 11.7.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.2.2 - ~/.nvm/versions/node/v20.9.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.6.4 => 7.6.4
    @storybook/addon-interactions: ^7.6.4 => 7.6.4
    @storybook/addon-links: ^7.6.4 => 7.6.4
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/blocks: ^7.6.4 => 7.6.4
    @storybook/nextjs: ^7.6.4 => 7.6.4
    @storybook/react: ^7.6.4 => 7.6.4
    @storybook/test: ^7.6.4 => 7.6.4
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.6.4 => 7.6.4

### Additional context

_No response_

[JesseKuntz]

I'm running into the same issue, but with @rainbow-me/rainbowkit which are imported as follows inside both preview.tsx and also inside providers that I'm wrapping the stories in, neither has any effect in the Storybook environment:

import "@rainbow-me/rainbowkit/styles.css";

UPDATE: I was able to get the styles to be applied by adding this to main.ts:

    {
      name: "@storybook/addon-styling",
      options: {
        postCss: true,
      },
    }

I know that package is deprecated, so you may need to install one of the two that it split into if you go this route.

[notthatjen]

@halcarleton did you find a work around by any chance?

[efaraz27]

Another work around which is more feasible is to create a globals.css or globals.scss depending on what you are using and add import the css from the "node_modules" there for example:

// globals.scss or globals.css file
@import '@radix-ui/themes/styles.css';

and then in you storybook .preview.ts file import the globals.scss or css file:

// .storybook/preview.ts or .storybook/preview.tsx file
import '../globals.scss'

This worked for me!

[paschalidi]

@efaraz27 that worked for me as well, thank you 🙇

[willptacek]

experiencing this as well, @efaraz27 workaround worked for me 👍