Improve CSS HMR in RSC Framework Mode

markdalgleish · markdalgleish · commit 84463dd8fd43 · 2025-08-22T14:55:40.000+10:00
diff --git a/integration/helpers/rsc-parcel/src/routes/root.tsx b/integration/helpers/rsc-parcel/src/routes/root.tsx
@@ -6,7 +6,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Vite (RSC)</title>
+        <title>Parcel (RSC)</title>
         <Links />
       </head>
       <body>
diff --git a/integration/helpers/rsc-vite-framework/package.json b/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.11",
+    "@vitejs/plugin-rsc": "0.4.21",
     "cross-env": "^7.0.3",
     "typescript": "^5.1.6",
     "vite": "^6.2.0",
diff --git a/integration/helpers/rsc-vite/package.json b/integration/helpers/rsc-vite/package.json
@@ -10,7 +10,7 @@
     "typecheck": "tsc"
   },
   "devDependencies": {
-    "@vitejs/plugin-rsc": "0.4.11",
+    "@vitejs/plugin-rsc": "0.4.21",
     "@types/express": "^5.0.0",
     "@types/node": "^22.13.1",
     "@types/react": "^19.1.8",
diff --git a/integration/vite-css-test.ts b/integration/vite-css-test.ts
@@ -34,12 +34,18 @@ const fixtures = [
   templateDisplayName: string;
 }>;
 
-type RouteBasePath = "css" | "rsc-server-first-css";
+type RouteBasePath =
+  | "css-with-links-export"
+  | "css-with-floated-link"
+  | "rsc-server-first-route";
 const getRouteBasePaths = (templateName: TemplateName) => {
-  if (templateName.includes("rsc")) {
-    return ["css", "rsc-server-first-css"] as const satisfies RouteBasePath[];
-  }
-  return ["css"] as const satisfies RouteBasePath[];
+  return [
+    "css-with-links-export",
+    "css-with-floated-link",
+    ...(templateName.includes("rsc")
+      ? (["rsc-server-first-route"] as const)
+      : []),
+  ] as const satisfies RouteBasePath[];
 };
 
 const files = ({ templateName }: { templateName: TemplateName }) => ({
@@ -162,14 +168,17 @@ const files = ({ templateName }: { templateName: TemplateName }) => ({
             return null;
           }
 
-          export function links() {
-            return [{ rel: "stylesheet", href: postcssLinkedStyles }];
+          ${
+            routeBasePath === "css-with-links-export"
+              ? `export function links() { return [{ rel: "stylesheet", href: postcssLinkedStyles }]; }`
+              : ""
           }
 
           function TestRoute() {
             return (
               <>
                 <input />
+                ${routeBasePath !== "css-with-links-export" ? `<link rel="stylesheet" href={postcssLinkedStyles} precedence="default" />` : ""}
                 <div id="entry-client" className="entry-client">
                   <div id="css-modules" className={cssModulesStyles.index}>
                     <div id="css-postcss-linked" className="${routeBasePath}-postcss-linked">
@@ -517,11 +526,6 @@ async function hmrWorkflow({
   base?: string;
   templateName: TemplateName;
 }) {
-  if (templateName.includes("rsc")) {
-    // TODO: Fix CSS HMR support in RSC Framework mode
-    return;
-  }
-
   for (const routeBase of getRouteBasePaths(templateName)) {
     let pageErrors: Error[] = [];
     page.on("pageerror", (error) => pageErrors.push(error));
@@ -555,10 +559,11 @@ async function hmrWorkflow({
     await Promise.all(
       [
         "#css-bundled",
-        "#css-postcss-linked",
         "#css-modules",
-        "#css-vanilla-global",
-        "#css-vanilla-local",
+        ...(!templateName.includes("rsc")
+          ? // TODO: Fix these in RSC Framework Mode
+            ["#css-postcss-linked", "#css-vanilla-global", "#css-vanilla-local"]
+          : []),
       ].map(
         async (selector) =>
           await expect(page.locator(selector)).toHaveCSS(
@@ -569,9 +574,13 @@ async function hmrWorkflow({
     );
 
     // Ensure CSS updates were handled by HMR
-    await expect(input).toHaveValue("stateful");
+    // TODO: Fix state preservation in RSC Framework mode
+    if (!templateName.includes("rsc")) {
+      await expect(input).toHaveValue("stateful");
+    }
 
-    if (routeBase === "css") {
+    // RSC Framework Mode doesn't support custom entries yet
+    if (!templateName.includes("rsc")) {
       // The following change triggers a full page reload, so we check it after all the checks for HMR state preservation
       await edit("app/entry.client.css", modifyCss);
       await expect(page.locator("#entry-client")).toHaveCSS(
diff --git a/packages/react-router-dev/package.json b/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.11",
+    "@vitejs/plugin-rsc": "0.4.21",
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
     "chokidar": "^4.0.0",
diff --git a/packages/react-router/lib/rsc/server.ssr.tsx b/packages/react-router/lib/rsc/server.ssr.tsx
@@ -112,6 +112,8 @@ export async function routeRSCServerRequest({
     throw new Error("Missing body in server response");
   }
 
+  const detectRedirectResponse = serverResponse.clone();
+
   let serverResponseB: Response | null = null;
   if (hydrate) {
     serverResponseB = serverResponse.clone();
@@ -126,7 +128,12 @@ export async function routeRSCServerRequest({
   };
 
   try {
-    const payload = await getPayload();
+    if (!detectRedirectResponse.body) {
+      throw new Error("Failed to clone server response");
+    }
+    const payload = (await createFromReadableStream(
+      detectRedirectResponse.body,
+    )) as RSCPayload;
     if (
       serverResponse.status === SINGLE_FETCH_REDIRECT_STATUS &&
       payload.type === "redirect"
diff --git a/playground/rsc-vite-framework/package.json b/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.11",
+    "@vitejs/plugin-rsc": "0.4.21",
     "cross-env": "^7.0.3",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
diff --git a/playground/rsc-vite/package.json b/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.11",
+    "@vitejs/plugin-rsc": "0.4.21",
     "cross-env": "^7.0.3",
     "typescript": "^5.1.6",
     "vite": "^6.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
