docs: add HMR workaround for vanilla-extract-css plugin (#6053)

Co-authored-by: neverland <[email protected]>

Author: JSerFeng

website/docs/en/guide/styling/css-in-js.mdx

@@ -67,6 +67,8 @@ Please note, you must select the SWC plugin that matches the current version of
 
 Rsbuild supports [@vanilla-extract/webpack-plugin](https://npmjs.com/package/@vanilla-extract/webpack-plugin). You can add the following config to use [vanilla-extract](https://github.com/vanilla-extract-css/vanilla-extract):
 
+Currently, Rspack has an [HMR issue](https://github.com/web-infra-dev/rsbuild/issues/6049) when using `splitChunks` together with `@vanilla-extract/webpack-plugin`. In development mode, you can use a special `splitChunks` configuration to work around this issue.
+
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
@@ -80,6 +82,20 @@ export default defineConfig({
       },
     }),
   ],
+  performance: {
+    chunkSplit: {
+      override: {
+        cacheGroups: {
+          vanilla: {
+            test: /@vanilla-extract\/webpack-plugin/,
+            // make sure the chunk contains modules created by @vanilla-extract/webpack-plugin has stable id in development mode to avoid HMR issues
+            name: process.env.NODE_ENV === 'development' && 'vanilla',
+            chunks: 'all',
+          },
+        },
+      },
+    },
+  },
   tools: {
     rspack: {
       plugins: [new VanillaExtractPlugin()],

website/docs/zh/guide/styling/css-in-js.mdx

@@ -67,6 +67,8 @@ export default defineConfig({
 
 Rsbuild 支持使用 [@vanilla-extract/webpack-plugin](https://npmjs.com/package/@vanilla-extract/webpack-plugin) 插件，你可以添加以下配置来使用 [vanilla-extract](https://github.com/vanilla-extract-css/vanilla-extract)：
 
+目前，Rspack 在同时使用 `splitChunks` 和 `@vanilla-extract/webpack-plugin` 时存在一个 [HMR 问题](https://github.com/web-infra-dev/rsbuild/issues/6049)。在开发模式下，你可以使用特殊的 `splitChunks` 配置来规避这个问题。
+
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
@@ -80,6 +82,20 @@ export default defineConfig({
       },
     }),
   ],
+  performance: {
+    chunkSplit: {
+      override: {
+        cacheGroups: {
+          vanilla: {
+            test: /@vanilla-extract\/webpack-plugin/,
+            // 确保在开发模式下 @vanilla-extract/webpack-plugin 产生虚拟模块所在的 Chunk id 稳定以避免 HMR 问题
+            name: process.env.NODE_ENV === 'development' && 'vanilla',
+            chunks: 'all',
+          },
+        },
+      },
+    },
+  },
   tools: {
     rspack: {
       plugins: [new VanillaExtractPlugin()],