vite plugin does not support HMR for vite >= 2.5.0

Describe the bug

I’ve created a fresh vite project via yarn create vite vite-vanilla-extract-test --template react- ts and set up vanilla extract. Here’s the vite.config.ts:

import {defineConfig} from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import {vanillaExtractPlugin} from "@vanilla-extract/vite-plugin";

export default defineConfig({
  plugins: [reactRefresh(), vanillaExtractPlugin()],
})

Changing any file css.tsx leads to a full refresh of the page which makes iterating on styles rather cumbersome.

For experimentation, I’ve created a *.module.css file. And here it does work as expected and you’ll find this line in the logs:

Not sure whether it’s a known limitation of the plugin. In that case it might be worth mentioning it in the README.

On the plus side it seems like you can remove the There are currently no automatic readable class names warning as it seems to be working with the latest version 🙂

System Info

System:
    OS: macOS 10.15.7
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 1.33 GB / 20.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 88.1.20.110
    Chrome: 93.0.4577.63
    Firefox: 87.0
    Safari: 14.1.2
  npmPackages:
    @vanilla-extract/vite-plugin: ^2.0.2 => 2.0.2 
    vite: ^2.5.4 => 2.5.6 

[mattcompiles]

Just released @vanilla-extract/vite-plugin v2.1.0. It allows you to switch the style runtime from the vite one to the vanilla-extract one. Try passing devStyleRuntime: 'vanilla-extract' and let me know if the HMR experience improves. We may move to it by default if it results in a better dev experience.

[mattcompiles]

With the release of v3 of the vite-plugin all known HMR issues should now be working. 🙌