test: simplify

Author: hi-ogawa

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

@@ -1,16 +1,8 @@
-import fs from 'node:fs'
-import path from 'node:path'
 import { expect, test } from '@playwright/test'
 import { setupInlineFixture, useFixture } from './fixture'
 import { waitForHydration } from './helper'
 import { defineStarterTest } from './starter'
 
-// When `build.cssCodeSplit: false`, Vite emits a single consolidated CSS
-// bundle asset and no `importedCss` metadata on chunks. The rsc plugin must
-// still copy the rsc environment's CSS asset into the client output and
-// reference it from server-component resources, otherwise RSC-only CSS
-// (e.g. from a server component module) goes missing from the client build.
-
 test.describe('cssCodeSplit-false', () => {
   const root = 'examples/e2e/temp/cssCodeSplit-false'
 
@@ -19,28 +11,20 @@ test.describe('cssCodeSplit-false', () => {
       src: 'examples/starter',
       dest: root,
       files: {
+        'vite.config.base.ts': { cp: 'vite.config.ts' },
         'vite.config.ts': /* js */ `
-          import rsc from '@vitejs/plugin-rsc'
-          import react from '@vitejs/plugin-react'
-          import { defineConfig } from 'vite'
+          import { defineConfig, mergeConfig } from 'vite'
+          import baseConfig from './vite.config.base.ts'
 
-          export default defineConfig({
-            build: { cssCodeSplit: false },
-            plugins: [
-              react(),
-              rsc({
-                entries: {
-                  client: './src/framework/entry.browser.tsx',
-                  ssr: './src/framework/entry.ssr.tsx',
-                  rsc: './src/framework/entry.rsc.tsx',
-                }
-              }),
-            ],
+          const overrideConfig = defineConfig({
+            build: {
+              cssCodeSplit: false,
+            },
           })
+
+          export default mergeConfig(baseConfig, overrideConfig)
         `,
-        // CSS module imported exclusively by a server component module, so its
-        // styles only reach the client via plugin-rsc's server-resources <link>
-        // path.
+        // test server css module
         'src/server-only.module.css': /* css */ `
           .serverOnly {
             color: rgb(123, 45, 67);
@@ -49,15 +33,20 @@ test.describe('cssCodeSplit-false', () => {
         'src/server-only.tsx': /* js */ `
           import styles from './server-only.module.css'
           export function ServerOnly() {
-            return <div data-testid="server-only" className={styles.serverOnly}>rsc-css-only</div>
+            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'\nimport { ServerOnly } from './server-only.tsx'`,
+                `import { ClientCounter } from './client.tsx';
+                 import { ServerOnly } from './server-only.tsx'`,
               )
               .replace(`<ClientCounter />`, `<ClientCounter /><ServerOnly />`),
         },
@@ -69,19 +58,8 @@ test.describe('cssCodeSplit-false', () => {
     const f = useFixture({ root, mode: 'build' })
     defineStarterTest(f)
 
-    test('rsc-only css is present in the client output', () => {
-      const dir = path.join(f.root, 'dist/client/assets')
-      const cssFiles = fs.readdirSync(dir).filter((n) => n.endsWith('.css'))
-      const combined = cssFiles
-        .map((n) => fs.readFileSync(path.join(dir, n), 'utf-8'))
-        .join('\n')
-      // minifier may hex-encode; accept either form
-      expect(combined).toMatch(/rgb\(123,\s*45,\s*67\)|#7b2d43/i)
-    })
-
-    test('rsc-only css is applied at runtime', async ({ page }) => {
+    test('server css module', async ({ page }) => {
       await page.goto(f.url())
-      await waitForHydration(page)
       await expect(page.getByTestId('server-only')).toHaveCSS(
         'color',
         'rgb(123, 45, 67)',