[VITE] Libraries shipping vanilla extract css loaded out of order when using vite

[otaviosoares]

Describe the bug

It happens when using vite and importing VE css from a library. The css is loaded in a non deterministic way, causing reset css to have a higher priority.

I created a small example using braid-design-system. Apparently, vite's dependency optimizer is bundling the styles in the wrong order, but I'm not sure.

DISCLAIMER: This only happens in dev mode. During build the css file that is extract has the correct order.

WORKAROUND I'm using css layers to avoid this issue but I'm intrigued and would love to know what's causing this behaviour. Any help is appreciated.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qfbgzz

System Info

System:
    OS: macOS 14.2.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 3.28 GB / 128.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 4.0.2 - ~/.yarn/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    bun: 1.0.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.107
    Edge: 123.0.2420.81
    Safari: 17.2.1
  npmPackages:
    vite: ^5.1.4 => 5.1.4

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.

[rururux]

maybe a duplicate of #725

[askoufis]

You're correct that vite's dependency optimization is to blame here. This is our current workaround for this issue:

// vite.config.ts
import { createRequire } from 'node:module';
import { dirname } from 'node:path';
import { cssFileFilter } from '@vanilla-extract/integration';
import type { Plugin } from 'esbuild';

const require = createRequire(import.meta.url);

const fixViteVanillaExtractDepScanPlugin = (): Plugin => ({
  name: 'fix-vite-vanilla-extract-dep-scan',
  setup(build) {
    build.onResolve(
      { filter: cssFileFilter },
      ({ importer, path: pathName }) => ({
        path: require.resolve(pathName, { paths: [dirname(importer)] }),
        external: true,
      })
    );
  },
});

export default {
  optimizeDeps: {
    esbuildOptions: {
      plugins: [fixViteVanillaExtractDepScanPlugin()],
    },
  },
  // The rest of your vite config...
}