Error 'No CSS for file' with vite watch mode

[JohnnyCrazy]

Describe the bug

Similar to #1302, an error pops up when using the library mode of vite in combination with the --watch parameter. While the initial build succeeds, all incremental ones give an No CSS for file error.

No packages, which modify the tsconfig paths are installed. Pretty barebone setup, just vite + vanilla-extract.

Let me know if you need more info!

Reproduction

https://codesandbox.io/p/devbox/vanilla-bug-hc2k2l

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1
    Memory: 92.81 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.asdf/installs/nodejs/20.9.0/bin/node
    npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.15.5 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 118.0.5993.96
    Safari: 17.1
  npmPackages:
    @vanilla-extract/css: ^1.14.1 => 1.14.1
    @vanilla-extract/vite-plugin: ^4.0.6 => 4.0.6
    vite: ^5.2.0 => 5.2.6

Used Package Manager

pnpm

Logs

❯ pnpm build --watch

> [email protected] build /Users/johnny/projects/vanilla-bug
> tsc && vite build "--watch"

vite v5.2.6 building for production...

watching for file changes...

build started...
✓ 17 modules transformed.
dist/style.css   0.02 kB │ gzip:  0.04 kB
dist/index.js   77.38 kB │ gzip: 19.34 kB
built in 260ms.

build started...
✓ 0 modules transformed.
[commonjs] Could not load /Users/johnny/projects/vanilla-bug/src/styles.css.ts.vanilla.css: No CSS for file: /Users/johnny/projects/vanilla-bug/src/styles.css.ts

build started...
✓ 0 modules transformed.
[commonjs] Could not load /Users/johnny/projects/vanilla-bug/src/styles.css.ts.vanilla.css: No CSS for file: /Users/johnny/projects/vanilla-bug/src/styles.css.ts

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.

[JohnnyCrazy]

Seems to be similar to #1351 , but errors instead of not updating the styles.

[szszoke]

I just encountered this issue after trying this library out in an existing project.

[askoufis]

This is a dupe of #1351. Both issues are fixed by #1397.

[askoufis]

Fixed in @vanilla-extract/[email protected]

[szszoke]

@askoufis I replied on the wrong issue. This is the issue that is still not fixed with 4.0.8.

[szszoke]

I made a tiny project where the issue can still be reproduced: https://github.com/szszoke/vanilla-vite-watch

I also added a patch with my if check that seems to resolve the issue. It can be applied via npx patch-package and reverted via npx patch-package --reverse.

[askoufis]

I made a tiny project where the issue can still be reproduced: https://github.com/szszoke/vanilla-vite-watch

I also added a patch with my if check that seems to resolve the issue. It can be applied via npx patch-package and reverted via npx patch-package --reverse.

@szszoke Oops. I was so focused on the buildEnd and closeWatcher hooks that I forgot to add that if statement 🤦. I can't actually reproduce the error in your repo, but I still think your patch makes sense to do. I've released this change in @vanilla-extract/[email protected].

[szszoke]

Thanks for the quick reaction!

I tried it on Linux and Node 20. If you tested on a different platform then my hunch is that the file watching logic has a slightly different behavior.

@JohnnyCrazy, could you test whether you still have the issue?

[JohnnyCrazy]

It seems fixed on the latest version, styles are correctly updated and written, thanks 👍🏼