From a735eab310b2303f6ce71c9164a01b27f0c12851 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 12:22:06 +0900
Subject: [PATCH 1/9] fix(rsc): remove duplicate server css on initial render

---
 packages/plugin-rsc/src/plugin.ts | 48 +++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 1181c7d1..0e1d0060 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1910,6 +1910,34 @@ export function vitePluginRscCss(
         }
       },
     },
+    createVirtualPlugin(
+      'vite-rsc/remove-duplicate-server-css',
+      async function () {
+        assert.equal(this.environment.mode, 'dev')
+        function removeFn() {
+          document
+            .querySelectorAll("link[rel='stylesheet']")
+            .forEach((node) => {
+              if (
+                node instanceof HTMLElement &&
+                node.dataset.precedence?.startsWith('vite-rsc/')
+              ) {
+                node.remove()
+              }
+            })
+        }
+        return `\
+"use client"
+import React from "react";
+export default function RemoveDuplicateServerCss() {
+  React.useEffect(() => {
+    (${removeFn.toString()})();
+  }, []);
+  return null;
+}
+`
+      },
+    ),
   ]
 }
 
@@ -1940,6 +1968,7 @@ function generateResourcesCode(depsCode: string) {
   const ResourcesFn = (
     React: typeof import('react'),
     deps: ResolvedAssetDeps,
+    RemoveDuplicateServerCss?: React.FC,
   ) => {
     return function Resources() {
       return React.createElement(React.Fragment, null, [
@@ -1960,14 +1989,27 @@ function generateResourcesCode(depsCode: string) {
             src: href,
           }),
         ),
+        RemoveDuplicateServerCss &&
+          React.createElement(RemoveDuplicateServerCss, { key: '' }),
       ])
     }
   }
 
   return `
-    import __vite_rsc_react__ from "react";
-    export const Resources = (${ResourcesFn.toString()})(__vite_rsc_react__, ${depsCode});
-  `
+import __vite_rsc_react__ from "react";
+
+${
+  config.mode === 'serve'
+    ? `import RemoveDuplicateServerCss from "virtual:vite-rsc/remove-duplicate-server-css"`
+    : `const RemoveDuplicateServerCss = undefined;`
+}
+
+export const Resources = (${ResourcesFn.toString()})(
+  __vite_rsc_react__,
+  ${depsCode},
+  RemoveDuplicateServerCss,
+);
+`
 }
 
 export async function transformRscCssExport(options: {

From cadf8499b10393f32cdbf5098f409e2f61f7b86c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 12:24:37 +0900
Subject: [PATCH 2/9] chore: cleanup

---
 packages/plugin-rsc/src/plugin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 0e1d0060..52cd8230 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -2000,7 +2000,7 @@ import __vite_rsc_react__ from "react";
 
 ${
   config.mode === 'serve'
-    ? `import RemoveDuplicateServerCss from "virtual:vite-rsc/remove-duplicate-server-css"`
+    ? `import RemoveDuplicateServerCss from "virtual:vite-rsc/remove-duplicate-server-css";`
     : `const RemoveDuplicateServerCss = undefined;`
 }
 

From f5102896b5193518e2741942a7ac0a20d00bc3b7 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 12:31:37 +0900
Subject: [PATCH 3/9] chore: tweak

---
 packages/plugin-rsc/src/plugin.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 52cd8230..dd495445 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1913,6 +1913,8 @@ export function vitePluginRscCss(
     createVirtualPlugin(
       'vite-rsc/remove-duplicate-server-css',
       async function () {
+        // Remove duplicate css during dev due to server rendered <link> and client inline <style>
+        // https://github.com/remix-run/react-router/blob/166fd940e7d5df9ed005ca68e12de53b1d88324a/packages/react-router/lib/dom-export/hydrated-router.tsx#L245-L274
         assert.equal(this.environment.mode, 'dev')
         function removeFn() {
           document
@@ -1990,7 +1992,9 @@ function generateResourcesCode(depsCode: string) {
           }),
         ),
         RemoveDuplicateServerCss &&
-          React.createElement(RemoveDuplicateServerCss, { key: '' }),
+          React.createElement(RemoveDuplicateServerCss, {
+            key: 'remove-duplicate-css',
+          }),
       ])
     }
   }

From c279a07595190ba45ae2c9ed9919ed038a58c046 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:00:36 +0900
Subject: [PATCH 4/9] test: wip

---
 packages/plugin-rsc/e2e/starter.test.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/plugin-rsc/e2e/starter.test.ts b/packages/plugin-rsc/e2e/starter.test.ts
index 4762dbc2..cef8bc2e 100644
--- a/packages/plugin-rsc/e2e/starter.test.ts
+++ b/packages/plugin-rsc/e2e/starter.test.ts
@@ -6,6 +6,12 @@ import { waitForHydration } from './helper'
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/starter', mode: 'dev' })
   defineStarterTest(f)
+
+  test('no duplicate css', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    // TODO
+  })
 })
 
 test.describe('build-default', () => {

From 4d160901fbf87225fa6b37805ab77d2cb49ea12d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:08:10 +0900
Subject: [PATCH 5/9] chore: comment

---
 packages/plugin-rsc/src/plugin.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index dd495445..0fb6485c 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -837,7 +837,8 @@ window.__vite_plugin_react_preamble_installed__ = true;
         const resolvedEntry = await this.resolve(source)
         assert(resolvedEntry, `[vite-rsc] failed to resolve entry '${source}'`)
         code += `await import(${JSON.stringify(resolvedEntry.id)});`
-        // TODO: this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
+        // server css is normally removed via `RemoveDuplicateServerCss` on useEffect.
+        // this also makes sure they are removed on hmr in case initial rendering failed.
         code += /* js */ `
 const ssrCss = document.querySelectorAll("link[rel='stylesheet']");
 import.meta.hot.on("vite:beforeUpdate", () => {

From a8e3a08c3a67dde95eee9ad6a8219cbad0f0e0a7 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:18:42 +0900
Subject: [PATCH 6/9] fix: fix injection

---
 packages/plugin-rsc/src/plugin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 0fb6485c..71fc7c00 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -2004,7 +2004,7 @@ function generateResourcesCode(depsCode: string) {
 import __vite_rsc_react__ from "react";
 
 ${
-  config.mode === 'serve'
+  config.command === 'serve'
     ? `import RemoveDuplicateServerCss from "virtual:vite-rsc/remove-duplicate-server-css";`
     : `const RemoveDuplicateServerCss = undefined;`
 }

From 1ef0a15998eb52d9d18d6f3760cadc341cac0414 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:36:07 +0900
Subject: [PATCH 7/9] test: add e2e

---
 packages/plugin-rsc/e2e/basic.test.ts            | 16 ++++++++++++++++
 packages/plugin-rsc/e2e/starter.test.ts          |  6 ------
 .../{test.css => test-style-server-manual.css}   |  0
 .../basic/src/routes/style-server/server.tsx     |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)
 rename packages/plugin-rsc/examples/basic/public/{test.css => test-style-server-manual.css} (100%)

diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts
index 5cf1c21f..b7390623 100644
--- a/packages/plugin-rsc/e2e/basic.test.ts
+++ b/packages/plugin-rsc/e2e/basic.test.ts
@@ -473,6 +473,21 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
+      await expectNoServerLinkStylesheet(page)
+    })
+
+    function expectNoServerLinkStylesheet(page: Page) {
+      // check only manually inserted stylesheet link exists
+      return expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
+        'href',
+        '/test-style-server-manual.css',
+      )
+    }
+
+    test('no duplicate css', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await expectNoServerLinkStylesheet(page)
     })
 
     test('adding/removing css client @js', async ({ page }) => {
@@ -557,6 +572,7 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
+      await expectNoServerLinkStylesheet(page)
     })
 
     // TODO: need a way to add/remove links on server hmr. for now, it requires a manually reload.
diff --git a/packages/plugin-rsc/e2e/starter.test.ts b/packages/plugin-rsc/e2e/starter.test.ts
index cef8bc2e..4762dbc2 100644
--- a/packages/plugin-rsc/e2e/starter.test.ts
+++ b/packages/plugin-rsc/e2e/starter.test.ts
@@ -6,12 +6,6 @@ import { waitForHydration } from './helper'
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/starter', mode: 'dev' })
   defineStarterTest(f)
-
-  test('no duplicate css', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-    // TODO
-  })
 })
 
 test.describe('build-default', () => {
diff --git a/packages/plugin-rsc/examples/basic/public/test.css b/packages/plugin-rsc/examples/basic/public/test-style-server-manual.css
similarity index 100%
rename from packages/plugin-rsc/examples/basic/public/test.css
rename to packages/plugin-rsc/examples/basic/public/test-style-server-manual.css
diff --git a/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx b/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
index 66166992..4a6e2180 100644
--- a/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
+++ b/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
@@ -10,7 +10,7 @@ export function TestStyleServer() {
       </div>
       <link
         rel="stylesheet"
-        href="/test.css"
+        href="/test-style-server-manual.css"
         precedence="test-style-server-manual"
       />
       <div className="test-style-server-manual">test-style-server-manual</div>

From 994fb85e844ae5580c3f3bf88c288742e4fa2343 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:39:02 +0900
Subject: [PATCH 8/9] test: tweak

---
 packages/plugin-rsc/e2e/basic.test.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts
index b7390623..df698bcf 100644
--- a/packages/plugin-rsc/e2e/basic.test.ts
+++ b/packages/plugin-rsc/e2e/basic.test.ts
@@ -476,9 +476,10 @@ function defineTest(f: Fixture) {
       await expectNoServerLinkStylesheet(page)
     })
 
-    function expectNoServerLinkStylesheet(page: Page) {
+    async function expectNoServerLinkStylesheet(page: Page) {
       // check only manually inserted stylesheet link exists
-      return expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
+      // (toHaveAttribute passes only when locator matches single element)
+      await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
         'href',
         '/test-style-server-manual.css',
       )

From ae05b9345f68dc31399a292d83a4d6ce3d280c88 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 12 Aug 2025 14:41:36 +0900
Subject: [PATCH 9/9] test: tweak

---
 packages/plugin-rsc/e2e/basic.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts
index df698bcf..3860cf80 100644
--- a/packages/plugin-rsc/e2e/basic.test.ts
+++ b/packages/plugin-rsc/e2e/basic.test.ts
@@ -473,10 +473,10 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
-      await expectNoServerLinkStylesheet(page)
+      await expectNoDuplicateServerCss(page)
     })
 
-    async function expectNoServerLinkStylesheet(page: Page) {
+    async function expectNoDuplicateServerCss(page: Page) {
       // check only manually inserted stylesheet link exists
       // (toHaveAttribute passes only when locator matches single element)
       await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
@@ -485,10 +485,10 @@ function defineTest(f: Fixture) {
       )
     }
 
-    test('no duplicate css', async ({ page }) => {
+    test('no duplicate server css', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)
-      await expectNoServerLinkStylesheet(page)
+      await expectNoDuplicateServerCss(page)
     })
 
     test('adding/removing css client @js', async ({ page }) => {
@@ -573,7 +573,7 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
-      await expectNoServerLinkStylesheet(page)
+      await expectNoDuplicateServerCss(page)
     })
 
     // TODO: need a way to add/remove links on server hmr. for now, it requires a manually reload.