histoire-dev / histoire-dev/histoire

Dynamic Import of CSS Files Generates One Bundle Instead of Multiple Files, Causing CSS Rule Conflicts (Production Build)

Open
#500 1 comment 0 reactions 0 assignees View on GitHub
to triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.