[Bug]: base-preview-head.html styles are incorrect in production build

[pll-skytech]

Describe the bug

I noticed in my production build that some elements in my stories were affected by some styles from Storybook. I investigated the issue and found out that base-preview-head.html as some nested styles under .sb-errordisplay

When i do a production build and check the output of iframe.html the styles are not scope to .sb-errordisplay anymore:

Chrome applies this style to my h1 in a Canvas:

Reproduction link

https://stackblitz.com/edit/github-eayf3yj9?file=storybook-static%2Fiframe.html&preset=node

Reproduction steps

I was able to reproduce on StackBlitz using your Vite+TS setup.
Simply call the build command and check output iframe.html

System

torybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/addon-onboarding: ^9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/react-vite: ^9.0.0-rc.4 => 9.0.0-rc.4 
    storybook: ^9.0.0-rc.4 => 9.0.0-rc.4

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
The issue is in the CSS scoping of base-preview-head.html styles. The fix requires: 1. Update the CSS in code/core/assets/server/base-preview-head.html to ensure styles are properly scoped: css .sb-errordisplay { /* existing styles */ } .sb-errordisplay h1, .sb-errordisplay h2, .sb-errordisplay h3, .sb-errordisplay h4 { /* heading styles should be scoped here */ } 2. Ensure the build process in code/builder-vite correctly preserves CSS scoping during production builds. 3. Add CSS specificity to prevent style leakage: css .sb-show-main #storybook-root h1 { /* reset any inherited styles */ all: revert; }

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile