[Bug]: Bundled CSS imported through preview.ts is wrongly applied to the whole docs page

[Th3S4mur41]

Describe the bug

As documented, it is possible to apply bundled CSS to all the stories by importing it in the preview.ts.

Doing so works fine in stories as the CSS is only applied to the Canvas.
In docs however, the CSS is applied to the whole page generating potential conflicts with the args table

e.g. importing a simple style like this in preview.ts

label:has(input[role='switch']) {
	background-color: red;
}

Will have the following effect on the docs:

Reproduction link

https://stackblitz.com/edit/github-aofmqe?file=src%2Fstories%2FButton.stories.js

Reproduction steps

1. Got to the above link
2. In the Docs of the Button Stories, the "disabled" switch toggle should not be affected by the styles defined in /public/index.css and imported in preview.js

System

Storybook 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: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.1.2 => 8.1.2 
    @storybook/addon-links: ^8.1.2 => 8.1.2 
    @storybook/blocks: ^8.1.2 => 8.1.2 
    @storybook/test: ^8.1.2 => 8.1.2 
    @storybook/web-components: ^8.1.2 => 8.1.2 
    @storybook/web-components-vite: ^8.1.2 => 8.1.2 
    storybook: ^8.1.2 => 8.1.2

Additional context

No response

[shilman]

Try rendering your stories in iframes: https://storybook.js.org/docs/api/doc-block-story#inline

(Though beware this unresolved issue #11908 which I hope we can fix soon)

[Th3S4mur41]

Thanks for the workaround @shilman
We'll have to restructure our stories to us it though due to the limitation of the unavailable controls

[aharvard]

I'm also running into this issue. Thanks for reporting it so concisely @Th3S4mur41.

My issues were slightly different but had the same impact.

I have a global wildcard selector * { .... } that negatively leaked into the Source block. Also, the radio controls in the Control panel disappeared due to my global styles reset.

@shilman, I can use the workaround. Thanks for the direction.

[shilman]

@Th3S4mur41 I'm not sure when but I'm hoping we can fix the controls limitation one of these days..