Improve CSS ?url HMR in RSC Framework Mode (#14237)

Author: markdalgleish

integration/helpers/rsc-vite-framework/package.json

@@ -21,7 +21,7 @@
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitejs/plugin-rsc": "0.4.21",
+    "@vitejs/plugin-rsc": "0.4.24",
     "cross-env": "^7.0.3",
     "typescript": "^5.1.6",
     "vite": "^6.2.0",

integration/helpers/rsc-vite/package.json

@@ -10,7 +10,7 @@
     "typecheck": "tsc"
   },
   "devDependencies": {
-    "@vitejs/plugin-rsc": "0.4.21",
+    "@vitejs/plugin-rsc": "0.4.24",
     "@types/express": "^5.0.0",
     "@types/node": "^22.13.1",
     "@types/react": "^19.1.8",

integration/vite-css-test.ts

@@ -547,29 +547,39 @@ async function hmrWorkflow({
         );
 
     const testCases = [
-      { file: "styles-bundled.css", selector: "#css-bundled" },
+      {
+        file: "styles-bundled.css",
+        selector: "#css-bundled",
+      },
       // TODO: Fix HMR for CSS Modules in server-first routes in RSC Framework mode
       ...(routeBase === "rsc-server-first-route"
         ? []
-        : [{ file: "styles.module.css", selector: "#css-modules" }]),
-      // TODO: Fix HMR for `?url` CSS imports in RSC Framework mode: https://github.com/vitejs/vite-plugin-react/issues/772
-      // Once fixed, check if this also fixes HMR for Vanilla Extract
-      ...(templateName.includes("rsc")
-        ? []
-        : [
-            {
-              file: "styles-postcss-linked.css",
-              selector: "#css-postcss-linked",
-            },
+        : ([
             {
-              file: "styles-vanilla-global.css.ts",
-              selector: "#css-vanilla-global",
+              file: "styles.module.css",
+              selector: "#css-modules",
             },
+          ] as const)),
+      {
+        file: "styles-postcss-linked.css",
+        selector: "#css-postcss-linked",
+      },
+      {
+        file: "styles-vanilla-global.css.ts",
+        selector: "#css-vanilla-global",
+      },
+      // TODO: Fix HMR for locally scoped Vanilla Extract styles in RSC
+      // Framework mode. May require changes to the RSC plugin, or Vanilla
+      // Extract. Userland workaround for now:
+      // https://github.com/pawelblaszczyk5/vite-rsc-experiments/blob/643649f2e6562c859d9612126bfc3a183e03c7b5/apps/vanilla-extract/vite.config.ts
+      ...(templateName.includes("rsc")
+        ? []
+        : ([
             {
               file: "styles-vanilla-local.css.ts",
               selector: "#css-vanilla-local",
             },
-          ]),
+          ] as const)),
     ] as const satisfies Array<{
       file: string;
       selector: string;
@@ -584,8 +594,15 @@ async function hmrWorkflow({
         `CSS update for ${routeFile}`,
       ).toHaveCSS("padding", NEW_PADDING);
 
-      // TODO: Fix state preservation when changing CSS Modules in RSC Framework mode
-      if (templateName.includes("rsc") && file === "styles.module.css") {
+      // TODO: Fix state preservation when changing these styles in RSC
+      // Framework mode. This appears to be a deeper HMR issue with
+      // changing non-React modules imported by the route.
+      if (
+        templateName.includes("rsc") &&
+        (file === "styles.module.css" ||
+          file === "styles-postcss-linked.css" ||
+          file === "styles-vanilla-global.css.ts")
+      ) {
         continue;
       }
 

packages/react-router-dev/package.json

@@ -78,7 +78,7 @@
     "@babel/types": "^7.27.7",
     "@npmcli/package-json": "^4.0.1",
     "@react-router/node": "workspace:*",
-    "@vitejs/plugin-rsc": "0.4.21",
+    "@vitejs/plugin-rsc": "0.4.24",
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
     "chokidar": "^4.0.0",

playground/rsc-vite-framework/package.json

@@ -18,7 +18,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitejs/plugin-rsc": "0.4.21",
+    "@vitejs/plugin-rsc": "0.4.24",
     "cross-env": "^7.0.3",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",

playground/rsc-vite/package.json

@@ -15,7 +15,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitejs/plugin-rsc": "0.4.21",
+    "@vitejs/plugin-rsc": "0.4.24",
     "cross-env": "^7.0.3",
     "typescript": "^5.1.6",
     "vite": "^6.2.0"