vanilla-extract: 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