test: e2e

Author: hi-ogawa

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

@@ -322,11 +322,19 @@ function defineTest(f: Fixture) {
     await page.goto(f.url())
     await waitForHydration(page)
     await testCss(page)
+    await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
   })
 
   testNoJs('css @nojs', async ({ page }) => {
     await page.goto(f.url())
     await testCss(page)
+    await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
   })
 
   async function testCss(page: Page, color = 'rgb(255, 165, 0)') {

packages/plugin-rsc/examples/basic/package.json

@@ -26,6 +26,7 @@
     "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
     "@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",
     "@vitejs/test-dep-server-in-server": "file:./test-dep/server-in-server",
+    "@vitejs/test-dep-css-in-server": "file:./test-dep/css-in-server",
     "rsc-html-stream": "^0.0.7",
     "tailwindcss": "^4.1.11",
     "vite": "^7.0.5",

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -30,6 +30,7 @@ import { TestUseCache } from './use-cache/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
 import { TestBrowserOnly } from './browser-only/client'
 import { TestTransitiveCjsClient } from './deps/transitive-cjs/client'
+import TestDepCssInServer from '@vitejs/test-dep-css-in-server/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -51,6 +52,7 @@ export function Root(props: { url: URL }) {
         <TestCssClientNoSsr url={props.url} />
         <TestTailwindClient />
         <TestTailwindServer />
+        <TestDepCssInServer />
         <TestHydrationMismatch url={props.url} />
         <TestHmrClientDep />
         <TestTemporaryReference />

packages/plugin-rsc/examples/basic/test-dep/css-in-server/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vitejs/test-dep-css-in-server",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.css

@@ -0,0 +1,3 @@
+.test-dep-css-in-server {
+  color: rgb(255, 165, 0);
+}

packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.d.ts

@@ -0,0 +1 @@
+export default function TestDepCssInServer(): import('react').ReactNode

packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import './server.css'
+
+const h = React.createElement
+
+export default function TestDepCssInServer() {
+  return h(
+    'div',
+    { className: 'test-dep-css-in-server' },
+    `test-dep-css-in-server`,
+  )
+}