Probably I have similiar issue with SolidJS + UnoCSS as well. Enabling transformerVariantGroup make Solid's HMR go crazy on first run. But then, after caching. it works fine.

UPD: @webaddkevin setting mode: "per-module" in config fixed issue for me.

Well, it doesn't fix issue, but whole page refresh is not so annoying
Had to disable HMR at all due UnoCSS continues to infinity refresh itself

Probably I have similiar issue with SolidJS + UnoCSS as well. Enabling transformerVariantGroup make Solid's HMR go crazy on first run. But then, after caching. it works fine.

UPD: @webaddkevin setting mode: "per-module" in config fixed issue for me.

Thanks, setting 'mode: "per-module" is useful, problem solved

unocss.mp4

Can you provide a reproducible demo?

unocss.mp4

Can you provide a reproducible demo?

I'd be happy to, but I have large project. I'll try

More clear description of my problem:

I have SolidJS project with vite-plugin-solid, HMR enabled. I have self-made "keep-alive" components. They probably very different from OP's Vue components.
Anyway, after enabling transformerVariantGroup, navigating to any "keep-alive" lazy-loaded page triggers HMR for many components on page and page flickers. Sometimes new page doesn't load at all. However, after navigating multiple times seems components become cached and it works kinda ok. Switching to mode: "per-module" fixes this flickering, but, if exception throws in my code, in about half of times it starts to infinity refresh HMR as shown on video.

I'm not sure I can provide repdoducible demo, because I have pretty large project which is closed-source for now. But, if any maintainer is interested to help and fix this, I can send project in PM.

Also, I tried to use #3741 branch, but it didn't fix the issue for me

UPD: maybe it's more related to vite/vite-plugin-solid.
UPD2: I ran my project without unocss vite plugin and it works perfectly fine -_-

vite

@MrFoxPro If possible, I hope you can streamline the project and send it to me, and I can help debug it.

vite

@MrFoxPro If possible, I hope you can streamline the project and send it to me, and I can help debug it.

Ok,seems like the main problem is resolved with using mode: 'per-module' in dev mode. When using "global" it changes Solid plugin HMR behaviour, namely: it starts reloading all components dependening on target instead of only target itself. Repro & demo:

https://github.com/MrFoxPro/unocss-hmr-bug

But since per-module is experimental, it doesn't work well, like in this video (I wasn't able to reproduce this so far) and also seems like styles are applied in different order, so result is kinda inconsistent with build output. It also produces large number of CSS files, so firefox slows down a lot.