test(rsc): add starter-extra and enhance css tests

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

@@ -7,7 +7,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },

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

@@ -1021,6 +1021,16 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(0, 165, 255)',
       )
+      editor.edit((s) =>
+        s.replaceAll(
+          'color: rgb(0, 165, 255);',
+          '/* color: rgb(0, 165, 255); */',
+        ),
+      )
+      await expect(page.getByTestId('css-module-client')).toHaveCSS(
+        'color',
+        'rgb(0, 0, 0)',
+      )
       editor.reset()
       await expect(page.getByTestId('css-module-client')).toHaveCSS(
         'color',
@@ -1038,13 +1048,81 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(0, 165, 255)',
       )
+      editor.edit((s) =>
+        s.replaceAll(
+          'color: rgb(0, 165, 255);',
+          '/* color: rgb(0, 165, 255); */',
+        ),
+      )
+      await expect(page.getByTestId('css-module-server')).toHaveCSS(
+        'color',
+        'rgb(0, 0, 0)',
+      )
       editor.reset()
       await expect(page.getByTestId('css-module-server')).toHaveCSS(
         'color',
         'rgb(255, 165, 0)',
       )
     })
 
+    test('css shared hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const server = page.getByTestId('style-shared-server')
+      const client = page.getByTestId('style-shared-client')
+      await expect(server).toHaveCSS('color', 'rgb(255, 165, 0)')
+      await expect(client).toHaveCSS('color', 'rgb(255, 165, 0)')
+
+      const editor = f.createEditor('src/routes/style-shared/shared.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(server).toHaveCSS('color', 'rgb(0, 165, 255)')
+      await expect(client).toHaveCSS('color', 'rgb(0, 165, 255)')
+
+      // TODO: cover rule removal. After a prior server CSS HMR update, shared
+      // CSS can keep a stale client-side style rule here.
+      // editor.edit((s) =>
+      //   s.replaceAll(
+      //     'color: rgb(0, 165, 255);',
+      //     '/* color: rgb(0, 165, 255); */',
+      //   ),
+      // )
+      // await expect(server).toHaveCSS('color', 'rgb(0, 0, 0)')
+      // await expect(client).toHaveCSS('color', 'rgb(0, 0, 0)')
+
+      // editor.reset()
+      // await expect(server).toHaveCSS('color', 'rgb(255, 165, 0)')
+      // await expect(client).toHaveCSS('color', 'rgb(255, 165, 0)')
+    })
+
+    test('css module shared hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const serverCard = page.getByTestId('css-module-shared-server')
+      const clientCard = page.getByTestId('css-module-shared-client')
+      await expect(serverCard).toHaveCSS('color', 'rgb(255, 165, 0)')
+      await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)')
+
+      const editor = f.createEditor('src/routes/style-shared/shared.module.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(serverCard).toHaveCSS('color', 'rgb(0, 165, 255)')
+      await expect(clientCard).toHaveCSS('color', 'rgb(0, 165, 255)')
+
+      editor.edit((s) =>
+        s.replaceAll(
+          'color: rgb(0, 165, 255);',
+          '/* color: rgb(0, 165, 255); */',
+        ),
+      )
+      await expect(serverCard).toHaveCSS('color', 'rgb(0, 0, 0)')
+      await expect(clientCard).toHaveCSS('color', 'rgb(0, 0, 0)')
+
+      editor.reset()
+      await expect(serverCard).toHaveCSS('color', 'rgb(255, 165, 0)')
+      await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)')
+    })
+
     test('css url client hmr', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)

packages/plugin-rsc/e2e/browser-mode.test.ts

@@ -8,13 +8,13 @@ test.skip(({ browserName }) => browserName === 'webkit')
 
 test.describe('dev-browser-mode', () => {
   const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
-  defineStarterTest(f, 'browser-mode')
+  defineStarterTest(f, { variant: 'browser-mode' })
   defineBrowserModeTest(f)
 })
 
 test.describe('build-browser-mode', () => {
   const f = useFixture({ root: 'examples/browser-mode', mode: 'build' })
-  defineStarterTest(f, 'browser-mode')
+  defineStarterTest(f, { variant: 'browser-mode' })
   defineBrowserModeTest(f)
 })
 

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

@@ -8,10 +8,10 @@ test.skip(({ browserName }) => browserName === 'webkit')
 
 test.describe('dev-browser', () => {
   const f = useFixture({ root: 'examples/browser', mode: 'dev' })
-  defineStarterTest(f, 'no-ssr')
+  defineStarterTest(f, { variant: 'no-ssr' })
 })
 
 test.describe('build-browser', () => {
   const f = useFixture({ root: 'examples/browser', mode: 'build' })
-  defineStarterTest(f, 'no-ssr')
+  defineStarterTest(f, { variant: 'no-ssr' })
 })

packages/plugin-rsc/e2e/build-app.test.ts

@@ -7,7 +7,7 @@ test.describe('buildApp hook', () => {
   const root = 'examples/e2e/temp/buildApp'
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },

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

@@ -3,11 +3,20 @@ import { useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 
 test.describe('dev-cloudflare', () => {
-  const f = useFixture({ root: 'examples/starter-cf-single', mode: 'dev' })
+  const f = useFixture({
+    root: 'examples/starter-extra',
+    mode: 'dev',
+    command: 'pnpm cf:dev',
+  })
   defineStarterTest(f)
 })
 
 test.describe('build-cloudflare', () => {
-  const f = useFixture({ root: 'examples/starter-cf-single', mode: 'build' })
+  const f = useFixture({
+    root: 'examples/starter-extra',
+    mode: 'build',
+    buildCommand: 'pnpm cf:build',
+    command: 'pnpm cf:preview',
+  })
   defineStarterTest(f)
 })

packages/plugin-rsc/e2e/css-code-split.test.ts

@@ -7,7 +7,7 @@ test.describe('cssCodeSplit-false', () => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },
@@ -23,33 +23,6 @@ test.describe('cssCodeSplit-false', () => {
 
           export default mergeConfig(baseConfig, overrideConfig)
         `,
-        // test server css module too
-        // (starter example already tests normal server css)
-        'src/server-only.module.css': /* css */ `
-          .serverOnly {
-            color: rgb(123, 45, 67);
-          }
-        `,
-        'src/server-only.tsx': /* js */ `
-          import styles from './server-only.module.css'
-          export function ServerOnly() {
-            return (
-              <button data-testid="server-only" className={styles.serverOnly}>
-                server-only
-              </button>
-            )
-          }
-        `,
-        'src/root.tsx': {
-          edit: (s) =>
-            s
-              .replace(
-                `import { ClientCounter } from './client.tsx'`,
-                `import { ClientCounter } from './client.tsx';
-                 import { ServerOnly } from './server-only.tsx'`,
-              )
-              .replace(`<ClientCounter />`, `<ClientCounter /><ServerOnly />`),
-        },
       },
     })
   })
@@ -60,10 +33,9 @@ test.describe('cssCodeSplit-false', () => {
 
     test('server css module', async ({ page }) => {
       await page.goto(f.url())
-      await expect(page.getByTestId('server-only')).toHaveCSS(
-        'color',
-        'rgb(123, 45, 67)',
-      )
+      await expect(
+        page.getByTestId('starter-extra-server-css-module'),
+      ).toHaveCSS('color', 'rgb(123, 45, 67)')
     })
   })
 })

packages/plugin-rsc/e2e/css-link-precedence.test.ts

@@ -1,14 +1,13 @@
-import { expect, test } from '@playwright/test'
+import { test } from '@playwright/test'
 import { setupInlineFixture, useFixture } from './fixture'
-import { expectNoReload, waitForHydration } from './helper'
 import { defineStarterTest } from './starter'
 
 test.describe('cssLinkPrecedence-false', () => {
   const root = 'examples/e2e/temp/cssLinkPrecedence-false'
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },
@@ -31,26 +30,6 @@ test.describe('cssLinkPrecedence-false', () => {
   test.describe('dev', () => {
     const f = useFixture({ root, mode: 'dev' })
     defineStarterTest(f)
-
-    // TODO: move css hmr test to `starter.ts`
-    test('css hmr', async ({ page }) => {
-      await page.goto(f.url())
-      await waitForHydration(page)
-      const card = page.locator('.card').nth(0)
-
-      await using _ = await expectNoReload(page)
-      const editor = f.createEditor('src/index.css')
-      editor.edit((s) =>
-        s.replace(
-          '.card {\n  padding: 1rem;',
-          `.card {\n  padding: 1rem; background-color: rgb(255, 0, 200);`,
-        ),
-      )
-      await expect(card).toHaveCSS('background-color', 'rgb(255, 0, 200)')
-
-      editor.reset()
-      await expect(card).not.toHaveCSS('background-color', 'rgb(255, 0, 200)')
-    })
   })
 
   test.describe('build', () => {

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

@@ -7,7 +7,7 @@ test.describe('invalid directives', () => {
     const root = 'examples/e2e/temp/use-server-in-use-client'
     test.beforeAll(async () => {
       await setupInlineFixture({
-        src: 'examples/starter',
+        src: 'examples/starter-extra',
         dest: root,
         files: {
           'src/client.tsx': /* tsx */ `

packages/plugin-rsc/e2e/import-environment.test.ts

@@ -6,7 +6,7 @@ test.describe('viteRsc.import', () => {
   const root = 'examples/e2e/temp/import-environment'
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'src/framework/entry.rsc.tsx': {

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

@@ -15,7 +15,7 @@ test.describe(() => {
     'test-vite-rsc',
   )
   test.beforeAll(async () => {
-    await setupIsolatedFixture({ src: 'examples/starter', dest: tmpRoot })
+    await setupIsolatedFixture({ src: 'examples/starter-extra', dest: tmpRoot })
   })
 
   test.describe('dev-isolated', () => {
@@ -42,7 +42,7 @@ test.describe('vite 6', () => {
   )
   test.beforeAll(async () => {
     await setupIsolatedFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: tmpRoot,
       overrides: {
         vite: '^6',
@@ -68,7 +68,7 @@ test.describe('react-server-dom-webpack', () => {
   )
   test.beforeAll(async () => {
     await setupIsolatedFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: tmpRoot,
     })
     const {

packages/plugin-rsc/e2e/manual-css.test.ts

@@ -10,7 +10,7 @@ test.describe('manual-css', () => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         // Disable auto CSS injection

packages/plugin-rsc/e2e/middleware-mode.test.ts

@@ -7,7 +7,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
     })
   })

packages/plugin-rsc/e2e/module-runner.test.ts

@@ -7,7 +7,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },

packages/plugin-rsc/e2e/nested-outdir.test.ts

@@ -9,7 +9,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },

packages/plugin-rsc/e2e/no-ssr.test.ts

@@ -6,12 +6,12 @@ import { defineStarterTest } from './starter'
 
 test.describe('dev-no-ssr', () => {
   const f = useFixture({ root: 'examples/no-ssr', mode: 'dev' })
-  defineStarterTest(f, 'no-ssr')
+  defineStarterTest(f, { variant: 'no-ssr' })
 })
 
 test.describe('build-no-ssr', () => {
   const f = useFixture({ root: 'examples/no-ssr', mode: 'build' })
-  defineStarterTest(f, 'no-ssr')
+  defineStarterTest(f, { variant: 'no-ssr' })
 
   test('no ssr build', () => {
     expect(fs.existsSync(path.join(f.root, 'dist/ssr'))).toBe(false)

packages/plugin-rsc/e2e/react-compiler.test.ts

@@ -8,7 +8,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.base.ts': { cp: 'vite.config.ts' },

packages/plugin-rsc/e2e/render-built-url.test.ts

@@ -18,7 +18,7 @@ test.describe(() => {
       }
     }
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.ts': /* js */ `
@@ -120,7 +120,7 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     await setupInlineFixture({
-      src: 'examples/starter',
+      src: 'examples/starter-extra',
       dest: root,
       files: {
         'vite.config.ts': /* js */ `