@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.

[hartz89]

I am experiencing this exact same issue. I'm working in a pnpm monorepo and just migrated our storybook to the vite builder. I've tweaked my vite configuration a lot of different ways:

• preserveSymLinks: true is a non-starter as it blows up so many other transitive dependency imports
• adding several libs to optimizeChunks.include seems to have alleviated some of the issue, because dependency re-optimization is not causing as much HMR churn, but it's still an issue.

I suspect that breaking up some of my barrel files will also help with the impact of this bug, but ultimately won't address the root cause.

It's very problematic and a total performance killer in dev mode in a large project with a lot of VE CSS. I'm investigating, but I'm new to the internals of Vanilla Extract and Vite so any guidance/pointers would be appreciated.

[hartz89]

I have opened PR #1591 to address this issue with a new plugin option. Please let me know if you have feedback on the approach. Initial builds + HMR were working as expected in my local testing.

[hartz89]

Also worth noting that, even without this PR, the following config change drastically improved startup times because it minized dependency re-optimization and related HMR churn:

export default defineConfig({
  plugins: [vanillaExtractPlugin()],
  optimizeDeps: {
    include: [
      '@vanilla-extract/recipes/createRuntimeFn',
      '@vanilla-extract/sprinkles/createRuntimeSprinkles',
    ],
  }
});

I wonder if the plugin should do that by default, or if it's better to let consumers opt-in. In any event, would it be a worthwhile addition to the Vite plugin docs?

[oliveryasuna]

Also worth noting that, even without this PR, the following config change drastically improved startup times because it minized dependency re-optimization and related HMR churn:

export default defineConfig({
plugins: [vanillaExtractPlugin()],
optimizeDeps: {
include: [
'@vanilla-extract/recipes/createRuntimeFn',
'@vanilla-extract/sprinkles/createRuntimeSprinkles',
],
}
});

I wonder if the plugin should do that by default, or if it's better to let consumers opt-in. In any event, would it be a worthwhile addition to the Vite plugin docs?

This also fixes HMR issues in Storybook with Vite.