[Bug]: unocss rspack plugin hmr not work

[me9rez]

Version

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor              
    Memory: 16.93 GB / 31.95 GB
  Browsers:
    Edge: Chromium (132.0.2957.140)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @rsbuild/core: ^1.2.11 => 1.2.11 
    @rsbuild/plugin-vue: ^1.0.6 => 1.0.6

Details

根据官网, 配置rsbuild和unocs环境，pnpm dev启动开发服务器， 修改class，发现页面无法热更新，必须刷新页面后才能看到样式修改效果。(使用postcss模式hmr正常工作)

Reproduce link

https://github.com/me9rez/rsbuild-unocss-hmr-issue

Reproduce Steps

复现步骤：

1. pnpm i
2. pnpm dev
3. 修复App.vue中的class, 发现hmr功能无效

[chenjiahan]

I think this is a issue with the unocss implementation.

According to the unocss documentation, you have to disable the cache to make HMR work, but this will increase the HMR time:

export default defineConfig({
  tools: {
    rspack: {
      cache: false,
    },
  },
});

Related documentation:

• https://github.com/unocss/unocss/blob/43dac8118934e8d4df5385a781322b6b7a5d39d0/docs/integrations/next.md#hot-module-reload
• https://unocss.dev/integrations/webpack#vue-vue-cli

[xbzhang2020]

Maybe using @unocss/postcss is better than using @unocss/webpack/rspack in Rsbuild currently. Here are some problems I encountered.

First, HMR in the unocss postcss plugin works well and quickly. However, the unocss rspack plugin is not so good.

Second, if you use the unocss rspack plugin, @apply, @screen, and theme() directives, which are powered by @unocss/transformer-directives, are unsupported because @unocss/transformer-directives will be ignored in webpack/rspack. However, the uncoss postcss plugin supports these directives.

Related:
https://unocss.dev/integrations/postcss
https://github.com/unocss/unocss/blob/main/packages-integrations/webpack/src/unplugin.ts#L97

[me9rez]

Maybe using @unocss/postcss is better than using @unocss/webpack/rspack in Rsbuild currently. Here are some problems I encountered.

First, HMR in the unocss postcss plugin works well and quickly. However, the unocss rspack plugin is not so good.

Second, if you use the unocss rspack plugin, @apply, @screen, and theme() directives, which are powered by @unocss/transformer-directives, are unsupported because @unocss/transformer-directives will be ignored in webpack/rspack. However, the uncoss postcss plugin supports these directives.

Related: https://unocss.dev/integrations/postcss https://github.com/unocss/unocss/blob/main/packages-integrations/webpack/src/unplugin.ts#L97

Hello, thank you so much for reporting the issues you encountered when using the relevant plugins in Rsbuild. Your analysis is really clear - cut! The differences in HMR and the problems regarding directive support can significantly affect the development experience. The related links you provided are also of great value. We'll look into them carefully and troubleshoot and fix these issues as soon as possible.
Thanks again for your sharing and support!