histoire-dev / histoire-dev/histoire
Isolate global styles
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When using a histoire.setup.js or style block inside a Vue 3 SFC to import global styles, these styles bleed out into the Histoire styling, overriding color, inputs and theming.
I don't think my application styling should inform Histoire's styling, right?
I suggest to either:
- support the [scoped] attribute on style blocks inside SFCs
- to make the whole Histoire render area an iframe no matter the settings for grid/single
- to support a key `styles` in histoire.config.js
### Reproduction
- Create an Histoire Vue 3 project
- Create a style sheet with `*{color: black}`
- Import the style sheet in histoire.setup.js
- Turn on dark mode
- See how the style sheet overrides Histoire's dark theme.
https://stackblitz.com/edit/histoire-vue3-starter-cbmzxo?file=src%2Findex.css
### System Info
```shell
System:
OS: macOS 14.3.1
CPU: Apple M2
Memory: 24.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v21.6.2/bin/npm
Browsers:
Brave Browser: 102.1.39.111
Chrome: 106.0.5249.119
Edge: 106.0.1370.52
Firefox: 106.0.1
Firefox Developer Edition: 125.0
Firefox Nightly: 107.0a1
Safari: 16.0
Safari Technology Preview: 16.4
npmPackages:
@histoire/plugin-vue: ^0.17.15 => 0.17.15
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
histoire: ^0.17.15 => 0.17.15
vite: ^5.2.8 => 5.2.8
```
### Used Package Manager
- npm
- yarn
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Assessment
This issue has not been assessed yet.