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

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

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
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

histoire-dev / histoire