fix(rsc): keep manually added link stylesheet during dev (#663)

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -326,6 +326,10 @@ function defineTest(f: Fixture) {
       'color',
       'rgb(255, 165, 0)',
     )
+    await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
   })
 
   testNoJs('css @nojs', async ({ page }) => {
@@ -335,6 +339,10 @@ function defineTest(f: Fixture) {
       'color',
       'rgb(255, 165, 0)',
     )
+    await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
   })
 
   async function testCss(page: Page, color = 'rgb(255, 165, 0)') {
@@ -453,6 +461,10 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
+      await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+        'color',
+        'rgb(255, 165, 0)',
+      )
     })
 
     // TODO: need a way to add/remove links on server hmr. for now, it requires a manually reload.

packages/plugin-rsc/examples/basic/public/test.css

@@ -0,0 +1,3 @@
+.test-style-server-manual {
+  color: orange;
+}

packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx

@@ -8,6 +8,12 @@ export function TestStyleServer() {
       <div data-testid="css-module-server" className={styles.server}>
         test-css-module-server
       </div>
+      <link
+        rel="stylesheet"
+        href="/test.css"
+        precedence="test-style-server-manual"
+      />
+      <div className="test-style-server-manual">test-style-server-manual</div>
     </>
   )
 }

packages/plugin-rsc/examples/basic/vite.config.ts

@@ -123,6 +123,8 @@ export default { fetch: handler };
             source: `\
 /favicon.ico
   Cache-Control: public, max-age=3600, s-maxage=3600
+/test.css
+  Cache-Control: public, max-age=3600, s-maxage=3600
 /assets/*
   Cache-Control: public, max-age=31536000, immutable
 `,

packages/plugin-rsc/src/plugin.ts

@@ -829,14 +829,16 @@ 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
-        // should remove only the ones we injected during ssr, which are duplicated by browser imports for HMR.
-        // technically this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
-        // TODO: there migth be a clever way to let Vite deduplicate itself.
-        // cf. https://github.com/withastro/astro/blob/acb9b302f56e38833a1ab01147f7fde0bf967889/packages/astro/src/vite-plugin-astro-server/pipeline.ts#L133-L135
-        code += `
+        // TODO: this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
+        code += /* js */ `
 const ssrCss = document.querySelectorAll("link[rel='stylesheet']");
-import.meta.hot.on("vite:beforeUpdate", () => ssrCss.forEach(node => node.remove()));
+import.meta.hot.on("vite:beforeUpdate", () => {
+  ssrCss.forEach(node => {
+    if (node.dataset.precedence?.startsWith("vite-rsc/")) {
+      node.remove();
+    }
+  });
+});
 `
         // close error overlay after syntax error is fixed and hmr is triggered.
         // https://github.com/vitejs/vite/blob/8033e5bf8d3ff43995d0620490ed8739c59171dd/packages/vite/src/client/client.ts#L318-L320

packages/plugin-rsc/src/ssr.tsx

@@ -60,6 +60,9 @@ function preloadDeps(deps: ResolvedAssetDeps) {
     })
   }
   for (const href of deps.css) {
-    ReactDOM.preinit(href, { as: 'style' })
+    ReactDOM.preinit(href, {
+      as: 'style',
+      precedence: 'vite-rsc/client-reference',
+    })
   }
 }