[Bug]: @storybook/builder-vite duplicates postcss plugins during config resolution

[anders-cognite]

Describe the bug

In Storybook using @storybook/react-vite, the Vite config resolution process during build duplicates the viteConfig.css.postcss.plugins array. As a result, PostCSS plugins are applied twice to the same CSS, causing transformations to be double-applied, and leading to, for example, postcss-prefixwrap now producing .scope .scope .selector, which is obviously a breaking bug.

This started after Storybook introduced the storybook:enforce-output-dir Vite plugin (PR #33740), which adds config hooks (config / configEnvironment) and triggers an additional config merge where the PostCSS plugins array becomes duplicated

Reproduction link

https://69971850cc8d9694b2603cf1-mhkdpdawpi.chromatic.com

Reproduction steps

1. Clone https://github.com/anders-cognite/storybook-vite-postcss-plugins-duplicated-repro
2. Run the build-storybook command.
3. Inspect the generated CSS output.

Expected Behavior:
CSS selectors should be prefixed with a single .hello-world, due to the PostCSS PrefixWrap('.hello-world') plugin defined in vite.config.ts.

Actual Behavior:
The PostCSS plugin processes the CSS twice due to array duplication, leading to a double .hello-world .hello-world prefix.

Reproduction link is to the chromatic build.

System

System:
│  OS: Linux 6.6 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
│  CPU: (16) x64 Intel(R) Core(TM) Ultra 7 265H
│  Shell: 5.9 - /usr/bin/zsh
│  Binaries:
│  Node: 24.11.1 - /run/user/1000/fnm_multishells/217352_1771508128317/bin/node
│  npm: 11.6.2 - /run/user/1000/fnm_multishells/217352_1771508128317/bin/npm
│  pnpm: 10.24.0 - /run/user/1000/fnm_multishells/217352_1771508128317/bin/pnpm
│  <----- active
│  npmPackages:
│  @storybook/react-vite: ^10.2.10 => 10.2.10
│  chromatic: ^15.1.1 => 15.1.1
│  eslint-plugin-storybook: ^10.2.10 => 10.2.10
│  storybook: ^10.2.10 => 10.2.10

Additional context

No response

[dosubot]

Hi @anders-cognite! I'm Dosu and I’m helping the storybook team.

Thanks for the detailed reproduction! This looks like a valid bug stemming from how PR #33740 handles config merging.

The storybook:enforce-output-dir plugin's config hook uses shallow spreading (...config) which, combined with Vite's mergeConfig array concatenation behavior, causes nested arrays like css.postcss.plugins to be duplicated across hook invocations.

Workaround: You can use a dedicated Storybook Vite config via builder options to avoid the merging issue:

// .storybook/main.ts
framework: {
  name: '@storybook/react-vite',
  options: {
    builder: {
      viteConfigPath: '.storybook/vite.config.ts',
    },
  },
}

Then move your PostCSS config to .storybook/vite.config.ts.

The fix would likely involve modifying the plugin's config hook to only return what it needs to override (like the configEnvironment hook already does) rather than spreading the entire config object.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[darshjme-codes]

Triage note:

Bug: @storybook/builder-vite duplicates PostCSS plugins.

Labels applied: bug, needs triage ✓

Suggested additional labels:

• builder: vite
• css

Impact:

• Slower build times (plugins run twice)
• Potential style processing errors
• Increased memory usage

Root cause hypothesis: Plugin merging logic doesn't deduplicate when combining user config with Storybook defaults