@vanilla-extract/vite-plugin loads css files multiple times in Storybook when using theme

[SamBernaerdtOntoforce]

Describe the bug

Minimal Problem:
When using themes, vite loads a new (filename).css.ts.vanilla.css?t=1728553686586 file for every other file that uses itin the development build of storybook.

Expected:
Each .css.ts file should only be loaded once (until it changes and causes a hot reload)

Problem:
This might not be an issue on the small reproducible project, but on a larger project, where multiple theme files are composited, each of the theme files is loaded for each component using a theme value. This causes so many file loads that it freezes storybook.

Reproduction

https://github.com/SamBernaerdtOntoforce/vanilla-extract-theme-and-storybook

System Info

System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M2 Pro
    Memory: 279.81 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.7.3/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.3/bin/npm
    pnpm: 8.8.0 - ~/.nvm/versions/node/v21.7.3/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.100
    Edge: 129.0.2792.79
    Safari: 18.0
  npmPackages:
    @vanilla-extract/css: ^1.16.0 => 1.16.0
    @vanilla-extract/vite-plugin: ^4.0.16 => 4.0.16
    vite: ^5.4.8 => 5.4.8

Used Package Manager

yarn

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[askoufis]

Thanks for the reproduction! It definitely looks like there could be an optimization here. This doesn't seem related specifically to Storybook as I can reproduce the issue using just a vite dev server.

It seems that the issue starts once HMR has kicked in at least once. Different files that share the same dependency (e.g. shared.css.ts) end up with different timestamped imports of that file, causing both of them to be loaded, even though only 1 is necessary.

I'm also seeing some inconsistency in how many .vanilla.css files are loaded. Occasionally each file is loaded only once:

However most of the time the same file is loaded a few times (but with different timestamps):

This could be a result of how vite loads modules during development, and maybe there's nothing we can do to change it. I'll need to dig into it some more.