[Bug]: Storybook 7 + Nextjs 13 - POSTCSS not being processed in main iframe

[mcpatten]

Describe the bug

Hey 👋

I am using the zero-config storybook init script for a nextjs 13 project. I've customized the project's postcss options (following these instructions).

• the custom postcss.config.json processing rules are respected in global css imported via ./storybook/manager.ts (included in manager-bundle.css)
• component css is also properly processed when imported into my next.js project (included in the nextjs page bundle)

However, all css that loads within the main storybook iframe is unprocessed (appears to be loading from the raw source css file).

To Reproduce

I was able to make a minimal repro of this issue using storybook.new -> https://stackblitz.com/edit/github-biicxm?preset=node

I've also posted the minimal code to a personal test repo which you can peruse here. All the changes I've made beyond the default install are encapsulated in this commit.

Hope this helps!

System

System:
    OS: macOS 13.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 20.0.0
    Yarn: 1.22.19
    npm: 9.6.4
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 112.0.2
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.0.7 => 7.0.7 
    @storybook/addon-interactions: ^7.0.7 => 7.0.7 
    @storybook/addon-links: ^7.0.7 => 7.0.7 
    @storybook/blocks: ^7.0.7 => 7.0.7 
    @storybook/manager-api: ^7.0.7 => 7.0.7 
    @storybook/nextjs: ^7.0.7 => 7.0.7 
    @storybook/react: ^7.0.7 => 7.0.7 
    @storybook/testing-library: ^0.1.0 => 0.1.0 
    @storybook/theming: ^7.0.7 => 7.0.7

Additional context

No response

[Demi1024]

Hi,I solve this problem in my project by import @storybook/addon-styling

postcss has been removed in 7.x.And after my test, @storybook/addon-postcss not work well. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#postcss-removed
config in .storybook/main.js

const config = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    {
      name: '@storybook/addon-styling',
      options: {
      postcss: {
          implementation: require('postcss'),
        },
      },
    },
  ]
}

[mcpatten]

Thanks for adding this context @Demi1024 - unfortunately, I don't think this solves the problem when using the @storybook/nextjs framework. Postcss does appear to be included within it's webpack config, and I don't think @storybook/addon-styling is compatible with this setup.

I added the config suggestion to a branch on my test repository anyways just to be sure, but the iframe still appears to be loading unprocessed css. 🙁

[hexnickk4997]

Hey @mcpatten 👋 Not sure exactly why, but converting postcss.config.json to postcss.config.js solved the issue for me 🤷

[kumarshantanu]

I'm running into this issue as of Next.js 14.0.3 + Storybook 7.6.0 - I already have postcss.config.js (instead of .json as observed above) and adding "@storybook/addon-styling": "^1.3.7" as a dev dependency (and applying the snippet to .storybook/main.js) has no effect.

[r34son]

Found workaround (in .storybook/main.ts)

webpackFinal: async (config) => {
    if (config.module) {
      config.module.rules = config.module.rules?.map((rule) => {
        if (
          rule &&
          typeof rule !== 'string' &&
          rule.test instanceof RegExp &&
          rule.test.test('test.css')
        ) {
          return { ...rule, sideEffects: true };
        }
        return rule;
      });
    }
    return config;
  },

The issue was that webpack was threeshaking css import. Setting sideEffects: true solves issue.

[r34son]

Or even simpler. If you have "sideEffects": false in your package.json - just change it to "sideEffects": ["*.css"].

[levino]

I came here because I was struggling. Maybe this works for others:
I had a postcss.config.mjs with:

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
}
export default config

Changing it to be a postcss.config.js with:

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
}
module.exports = config

Fixed my issues.