Windi CSS HMR not working for Svelte + vite app

Question

I created a Svelte project with Vite and added windicss. I am using Yarn as build tool. I added WindiCSS to vite using https://windicss.org/integrations/vite.html#install. It works fine when I start the project using,

yarn dev

But HMR (Hot Module Reload) for Windi CSS does not work. But when I kill the server and restart it picks up the Windi CSS changes. Even the Devtool changes are working fine, only HMR is not working.

package.json file,

{
  "name": "svelte-in",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
    "svelte": "^3.37.0",
    "vite": "^2.6.4",
    "vite-plugin-windicss": "^1.4.11",
    "windicss": "^3.1.9"
  }
}

vite.config.js file,

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(), 
    WindiCSS()
  ]
})

And main.js is,

import App from './App.svelte'
import 'virtual:windi.css'
import 'virtual:windi-devtools'     // To enable windi in dev tools

const app = new App({
  target: document.getElementById('app')
})

export default app

Not sure if I am missing anything else.

Answer 1

I had to put WindiCSS() before svelte() for HMR to work.