vite: support HMR

[wmertens]

With this change, hot reload works in Qwik and presumably anything else using Vite.

The problem was that a change in css.ts didn't force a regen of the CSS.

[changeset-bot]

🦋 Changeset detected

Latest commit: b21f3b7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@vanilla-extract/vite-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[endigma]

What's pending here? This would majorly help us.

[mattcompiles]

Hey @wmertens 👋

This PR implies that we don't currently support HMR in Vite but that's not true. Are you able to provide a reproduction of the issue that's being resolved here? When testing locally, HMR seems to work fine so I'm not sure why it doesn't work in your scenario?

Also sorry, I know this PR has been open for a while.

[wsow4]

@mattcompiles
I can confirm the bug exists. HMR works in general, but not in every case. Sometimes the page reloads, but you don't see the changes you made in CSS.

The problem is server.moduleGraph.getModulesByFile(virtualId) sometimes returns more than one module and each of that module should be invalidated, but currently the plugin invalidates only the first one.

[MicMonen]

Waiting on this as well.

[mattcompiles]

@wsow4 Thanks for jumping in, I don't doubt you. Just without a reproduction to test against how can we say something has been resolved? If someone provides a reproduction of this issue we will definitely try get it resolved ASAP.

[wmertens]

@mattcompiles Try changing the text color in https://stackblitz.com/edit/qwik-starter-r2tt19?file=src/routes/styles.css.ts - it only works when you restart the server

Note that it's not doing hot reload, just reload.

[mattcompiles]

@wmertens Thanks bud. I'll take a look.

[askoufis]

@mattcompiles Try changing the text color in https://stackblitz.com/edit/qwik-starter-r2tt19?file=src/routes/styles.css.ts - it only works when you restart the server

Note that it's not doing hot reload, just reload.

@wmertens Implementing the fix mentioned by @wsow4 where we invalidate all modules returned by server.moduleGraph.getModulesByFile(virtualId) results in at least a page reload with correct styles when updating a .css.ts file in your reproduction. I'll make a separate PR for that change.

I think the crux of the issue here is that the Vanilla Extract vite plugin handles HMR for vanilla modules, but it does not handle HMR for plain .css files, which are what's being emitted due to logic within the plugin that detects specific plugins (namely the qwik plugin).

If I'm understanding it correctly, you've effectively implemented HMR for emitted CSS. IMO this shouldn't be the responsibility of the Vanilla Extract vite plugin, but rather the qwik vite plugin. In fact, I'm assuming it already has some kind of support for CSS HMR already, so maybe what's needed is some extra logic to handle CSS emitted by vanilla.

[wmertens]

@askoufis no, this PR doesn't implement CSS hot reload, it only re-parses the .css.ts file when it should be, but your solution is more elegant. Closing.