add shared-graph e2e tests

Author: jantimon

packages/plugin-rsc/e2e/nested-rsc-css-hmr.test.ts

@@ -2,27 +2,11 @@ import { expect, test } from '@playwright/test'
 import { useFixture } from './fixture'
 import { expectNoReload, waitForHydration } from './helper'
 
-// Verifies CSS HMR for server components whose modules live exclusively
-// in the `rsc` environment and are rendered through a nested Flight
-// stream (`renderToReadableStream` + `createFromReadableStream`) — the
-// pattern used by frameworks like TanStack Start's `createServerFn` +
-// `renderServerComponent`.
-//
-// The fixture sets `cssLinkPrecedence: false` (matching TanStack Start's
-// config) so plugin-rsc's emitted `<link>` has no `precedence` attribute
-// and React 19's resource-manager dedup/swap path is not in play. This
-// is the configuration where the underlying CSS-HMR issues surface;
-// under the default (`true`) path Vite's client CSS HMR + Float
-// dedup papers over them.
-//
-// The test performs a round-trip edit (change color, then revert) in the
-// same dev session. The revert is load-bearing: a naive fix can make the
-// first edit land while leaving every subsequent edit silently stuck on
-// the previous value (Vite's client CSS HMR hangs its `Promise.all` when
-// it races React's reconciliation of the RSC-owned `<link>`, which
-// blocks every later WebSocket message including the next `rsc:update`).
-// Asserting after the revert catches that regression class.
-
+// Covers CSS HMR for server-only components rendered via nested Flight stream
+// (renderToReadableStream + createFromReadableStream — TanStack Start's
+// createServerFn / renderServerComponent shape)
+// Fixture uses cssLinkPrecedence: false so React 19 Float dedup/swap is off
+// and raw HMR path is exercised
 test.describe('nested-rsc-css-hmr', () => {
   const f = useFixture({
     root: 'examples/nested-rsc-css-hmr',
@@ -44,38 +28,17 @@ test.describe('nested-rsc-css-hmr', () => {
       'color',
       'rgb(0, 165, 255)',
     )
+    // Revert is load-bearing: naive fix lands edit 1 but wedges Vite's
+    // Promise.all racing React's <link> reconcile, blocking later rsc:update
     editor.reset()
     await expect(page.locator('.test-nested-rsc-inner')).toHaveCSS(
       'color',
       'rgb(255, 165, 0)',
     )
   })
 
-  // Verifies that *removing* a CSS rule (not just changing its value) takes
-  // effect across HMR edits. Because plugin-rsc's HMR fix appends a
-  // `?t=<ts>` cache-buster to the emitted `<link href>` on every RSC
-  // re-render, each edit produces a `<link>` with a new href. This test
-  // asserts two things that a value-only edit can't catch:
-  //
-  // 1. The previous `<link>` is actually unmounted by React on each edit
-  //    (no DOM accumulation). If old `<link>` nodes lingered — as happens
-  //    when React 19 Float manages them by precedence and dedupes by href
-  //    rather than by intent — a deleted property would still cascade from
-  //    the stale stylesheet and the change would be silently lost.
-  // 2. Commenting out the `color` rule actually falls back to the UA
-  //    default (`rgb(0, 0, 0)`), which exercises the unmount path end to
-  //    end (browser drops the old sheet, no rule applies anymore).
-  //
-  // The link-count assertion uses `[data-rsc-css-href]` so it only counts
-  // RSC-emitted stylesheets for `inner.css` and ignores other links Vite
-  // or React may inject (HMR client style tags, preload hints, etc).
-  //
-  // Note: in this fixture two `<link>`s for `inner.css` exist on initial
-  // load — one from the outer Root tree's `collectCss`, one from the
-  // nested Flight stream's own `collectCss`. The accumulation bug we want
-  // to catch is "count grows per edit" (yak-style), so we capture the
-  // initial count and assert it stays equal across edits — not that it
-  // equals 1.
+  // Rule removal (not just value change) checks the unmount path: old <link>
+  // must drop, else the cascade keeps the stale rule
   test('round-trip with property removal does not leave stale link', async ({
     page,
   }) => {
@@ -86,6 +49,10 @@ test.describe('nested-rsc-css-hmr', () => {
       'rgb(255, 165, 0)',
     )
 
+    // [data-rsc-css-href] scopes to RSC-emitted links, ignores Vite/React
+    // injections
+    // Two on load: outer Root collectCss + nested Flight collectCss
+    // Bug shape is "grows per edit", so assert equal-to-initial, not equal-to-1
     const innerLinks = page.locator(
       'link[rel="stylesheet"][data-rsc-css-href*="inner.css"]',
     )
@@ -103,10 +70,8 @@ test.describe('nested-rsc-css-hmr', () => {
     )
     await expect(innerLinks).toHaveCount(initialLinkCount)
 
-    // Edit 2: remove the rule — color must fall back to the inherited
-    // value (`:root { color: #213547 }` from `index.css`, light scheme =
-    // rgb(33, 53, 71)). If any old `<link>` for `inner.css` were still
-    // attached, the cascade would keep the blue.
+    // Edit 2: remove rule — falls back to :root color from index.css
+    // (rgb(33, 53, 71)) — stale <link> would keep the blue
     editor.edit((s) =>
       s.replaceAll(
         'color: rgb(0, 165, 255);',
@@ -119,12 +84,86 @@ test.describe('nested-rsc-css-hmr', () => {
     )
     await expect(innerLinks).toHaveCount(initialLinkCount)
 
-    // Edit 3: revert — back to original orange.
+    // Edit 3: revert — back to original orange
     editor.reset()
     await expect(page.locator('.test-nested-rsc-inner')).toHaveCSS(
       'color',
       'rgb(255, 165, 0)',
     )
     await expect(innerLinks).toHaveCount(initialLinkCount)
   })
+
+  // card.module.css reached from RSC graph (card.tsx server component) and
+  // client graph (client-tracker.tsx 'use client' side-effect import) — shape
+  // TanStack Start hits when a route re-declares an RSC-owned stylesheet on
+  // the client
+  // Exercises the hasClientJsImporter branch of hotUpdate: fix filters the
+  // CSS-typed module out of the HMR payload (so Vite's default client HMR
+  // doesn't cloneNode+mutate the RSC <link>) while keeping the JS-typed
+  // wrapper so updateStyle() keeps refreshing <style data-vite-dev-id>
+  // .module.css on purpose — plain .css has no JS wrapper to keep
+  // Tests guard the config shape; they don't repro the (timing-sensitive)
+  // hydration race
+  test('css module reached by both RSC and client graphs hot-updates across edits', async ({
+    page,
+  }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'color',
+      'rgb(128, 0, 128)',
+    )
+
+    await using _ = await expectNoReload(page)
+    const editor = f.createEditor('src/shared-graph/card.module.css')
+
+    editor.edit((s) => s.replaceAll('rgb(128, 0, 128)', 'rgb(255, 0, 0)'))
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'color',
+      'rgb(255, 0, 0)',
+    )
+
+    editor.edit((s) => s.replaceAll('rgb(255, 0, 0)', 'rgb(0, 0, 255)'))
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'color',
+      'rgb(0, 0, 255)',
+    )
+
+    editor.reset()
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'color',
+      'rgb(128, 0, 128)',
+    )
+  })
+
+  // Covers the "keep JS wrapper in the HMR payload" half: without wrapper
+  // self-accept, removed rules stay live on <style data-vite-dev-id>
+  test('removing a rule from the shared css module falls through the cascade', async ({
+    page,
+  }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'text-transform',
+      'uppercase',
+    )
+
+    await using _ = await expectNoReload(page)
+    const editor = f.createEditor('src/shared-graph/card.module.css')
+    editor.edit((s) =>
+      s.replaceAll(
+        'text-transform: uppercase;',
+        '/* text-transform: removed */',
+      ),
+    )
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'text-transform',
+      'none',
+    )
+    editor.reset()
+    await expect(page.locator('[data-testid="shared-graph-card"]')).toHaveCSS(
+      'text-transform',
+      'uppercase',
+    )
+  })
 })

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/root.tsx

@@ -4,6 +4,8 @@ import { getServerCounter, updateServerCounter } from './action.tsx'
 import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
 import { TestNestedRsc } from './nested-rsc/server.tsx'
+import { SharedGraphCard } from './shared-graph/card.tsx'
+import { SharedGraphClientTracker } from './shared-graph/client-tracker.tsx'
 
 export function Root(props: { url: URL }) {
   return (
@@ -48,6 +50,10 @@ function App(props: { url: URL }) {
       <div className="card">
         <TestNestedRsc />
       </div>
+      <div className="card">
+        <SharedGraphCard />
+        <SharedGraphClientTracker />
+      </div>
       <ul className="read-the-docs">
         <li>
           Edit <code>src/client.tsx</code> to test client HMR.

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/shared-graph/card.module.css

@@ -0,0 +1,5 @@
+.card {
+  padding: 12px;
+  color: rgb(128, 0, 128);
+  text-transform: uppercase;
+}

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/shared-graph/card.tsx

@@ -0,0 +1,9 @@
+import styles from './card.module.css'
+
+export function SharedGraphCard() {
+  return (
+    <div className={styles.card} data-testid="shared-graph-card">
+      shared-graph-card
+    </div>
+  )
+}

packages/plugin-rsc/examples/nested-rsc-css-hmr/src/shared-graph/client-tracker.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+// Side-effect import of a CSS module that's also consumed by an RSC
+// component (`./card.tsx`). The import has no runtime consumer on the
+// client — its only job is to put `card.module.css` into the client
+// environment's module graph so Vite's `hasClientJsImporter` flag
+// flips to true for that file. This mirrors the pattern a route file
+// uses in frameworks like TanStack Start, where an RSC-owned
+// stylesheet is re-declared on the client so Vite's HMR runtime
+// tracks it during dev.
+import './card.module.css'
+
+export function SharedGraphClientTracker() {
+  return null
+}

packages/plugin-rsc/src/plugin.ts

@@ -723,50 +723,41 @@ export default function vitePluginRsc(
       async hotUpdate(ctx) {
         if (isCSSRequest(ctx.file)) {
           if (this.environment.name === 'client') {
-            // With the default (`cssLinkPrecedence: true`) setup Vite's default
-            // client CSS HMR handles the swap already
+            // Default (cssLinkPrecedence: true) — Vite's client CSS HMR
+            // already handles the swap
             if (rscPluginOptions.cssLinkPrecedence !== false) return
 
-            // Only relevant when this CSS is reachable from the RSC
-            // module graph — otherwise Vite's default CSS HMR applies
+            // Only relevant when CSS is reachable from the RSC graph —
+            // otherwise Vite's default client CSS HMR applies
             const rscMod =
               ctx.server.environments.rsc?.moduleGraph.getModuleById(ctx.file)
             if (!rscMod) return
 
-            // If the CSS also has a client-side JS importer, Vite's
-            // default client CSS HMR is still needed to update the
-            // non-RSC usages — only skip it when the CSS is RSC-only
-            const hasClientJsImporter = ctx.modules.some((mod) =>
-              [...mod.importers].some((imp) => imp.id && !isCSSRequest(imp.id)),
-            )
-            if (hasClientJsImporter) return
-
-            // Skip Vite's default client CSS HMR for RSC-only CSS. The
-            // RSC-side `rsc:update` event drives a Flight refetch that
-            // brings a fresh `?t=<timestamp>` href, which is enough.
+            // Drop the CSS-typed module (e.g. `?direct`) — it drives Vite's
+            // default <link> swap (find matching <link> by path, cloneNode,
+            // rewrite href with `?t=<timestamp>`) which picks up the
+            // RSC-rendered <link data-rsc-css-href> as its target
+            // RSC does its own swap (rsc:update -> Flight refetch, reconciled
+            // in place by the `css:<href>` key), so letting both run against
+            // the same <link> causes mid-render attribute mutations and
+            // later HMR edits silently drop
             //
-            // Why skipping matters: with `cssLinkPrecedence: false` the
-            // emitted `<link>` is React-owned (Float won't manage it
-            // without precedence). Vite's client CSS HMR clones that
-            // `<link>`, appends the clone, and awaits its `load`/`error`
-            // event inside a `Promise.all`. React's RSC re-render
-            // unmounts the original before the clone's event fires, the
-            // Promise never resolves, and every subsequent WebSocket
-            // message (including the next edit's `rsc:update`) queues
-            // forever behind the hung promise. The first edit in a
-            // session appears to work via Vite's `<style>` injection;
-            // every later edit is silently ignored.
-            return []
+            // Keep the JS-typed wrapper (the .css file served as JS when
+            // imported from JS) so Vite still emits its js-update, which
+            // re-runs updateStyle(id, content) against <style data-vite-dev-id>
+            // Without it, removing a rule (e.g. text-transform: uppercase)
+            // leaves the stale rule live on <style> and the cascade still
+            // wins over the refreshed <link>
+            return ctx.modules.filter((mod) => mod.type !== 'css')
           } else if (this.environment.name === 'rsc') {
-            // Walk up the importer chain from the changed CSS and
-            // invalidate every derived `\0virtual:vite-rsc/css?type=rsc&...`
-            // module we encounter. Those virtuals are what emit `<link
-            // rel="stylesheet">` into the Flight stream via `collectCss` ->
-            // `normalizeViteImportAnalysisUrl`. Without invalidating them,
-            // the next render uses the cached transform with the pre-edit
-            // href. We intentionally do NOT invalidate the JS importers
-            // themselves (inner.tsx, server.tsx, ...) — those are fine to
-            // keep; only the derived CSS virtual needs to be recomputed.
+            // Walk importers of the changed CSS and invalidate every derived
+            // `\0virtual:vite-rsc/css?type=rsc&...` module — those emit
+            // <link rel="stylesheet"> into the Flight stream via collectCss +
+            // normalizeViteImportAnalysisUrl
+            // Without invalidation the next render reuses the cached transform
+            // with the pre-edit href
+            // JS importers (inner.tsx, server.tsx, ...) are left alone — only
+            // the derived CSS virtual needs recomputing
             const visited = new Set<string>()
             const walk = (mod: EnvironmentModuleNode) => {
               if (!mod.id || visited.has(mod.id)) return
@@ -2277,15 +2268,13 @@ function vitePluginRscCss(
 
     recurse(entryId)
 
-    // When `cssLinkPrecedence: false`, React 19 Float won't manage the
-    // emitted `<link>` as a resource and Vite's client-side CSS HMR can't
-    // rely on href-pathname-match swapping (see hotUpdate comment above).
-    // To make the browser pick up updated CSS after an HMR edit we need to
-    // include the HMR timestamp in the emitted href. Under the default
-    // (`cssLinkPrecedence: true`) path we deliberately leave the href bare
-    // so Vite's client CSS HMR can find and swap the `<link>` in-place —
-    // that's what matches behavior before this fix and keeps the basic
-    // `css hmr server` path working with Float dedup.
+    // cssLinkPrecedence: false — without `precedence` React leaves the
+    // <link> as a regular DOM element (no auto-dedupe / resource handling)
+    // and Vite's client CSS HMR can't swap it by href-pathname match either
+    // (see hotUpdate above), so bake the HMR timestamp into the href and
+    // let the RSC-side Flight refetch drive the swap
+    // Default (true) leaves the href bare so Vite's client CSS HMR can swap
+    // the <link> in place — matches pre-fix behavior
     const usePrecedence = rscCssOptions?.cssLinkPrecedence !== false
     const hrefs = [...cssIds].map((id) => {
       let url = normalizeViteImportAnalysisUrl(environment, id)