histoire-dev / histoire-dev/histoire
Dynamic Import of CSS Files Generates One Bundle Instead of Multiple Files, Causing CSS Rule Conflicts (Production Build)
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When dynamically importing CSS files in a conditional, all imported CSS files are bundled into a single file instead of being split into multiple files. This results in a large bundle file that combines all CSS rules, causing conflicts with the CSS stylesheets that are used in different parts of the application.
**Expected Result:**
The dynamically imported CSS files should be split into multiple files, each containing the CSS rules specific to that file, even when using a conditional statement to load the files based on a query string.
**Actual Result:**
All imported CSS files are bundled into a single file, resulting in a large file that combines all CSS rules, causing conflicts with the CSS stylesheets used in different parts of the application, even when using build.cssCodeSplit set to true.
### Reproduction
https://stackblitz.com/edit/histoire-vue3-starter-euqwza?file=package.json
### System Info
```shell
System:
OS: macOS 13.2.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 1.15 GB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.15.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 111.0.5563.110
Edge: 111.0.1661.54
Firefox: 109.0
Safari: 16.3
Safari Technology Preview: 15.4
npmPackages:
@histoire/plugin-vue: ^0.15.8 => 0.15.8
@vitejs/plugin-vue: ^4.1.0 => 4.1.0
histoire: ^0.15.9 => 0.15.9
vite: ^4.2.1 => 4.2.1
```
### Used Package Manager
npm
### 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
Research direction
Start with the linked StackBlitz reproduction and its package.json, then run the Vite production build with build.cssCodeSplit set to true. Compare the generated CSS outputs for conditional dynamic imports; done means separate CSS files are produced and their rules no longer conflict.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100