fix(rsc): improve auto css heuristics (#643)

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`,
+  )
+}

packages/plugin-rsc/src/plugin.ts

@@ -1646,7 +1646,7 @@ export function vitePluginRscCss(
     id: string
     code: string
   }): false | TransformWrapExportFilter {
-    const { query } = parseIdQuery(id)
+    const { filename, query } = parseIdQuery(id)
     if ('vite-rsc-css-export' in query) {
       const value = query['vite-rsc-css-export']
       if (value) {
@@ -1658,8 +1658,13 @@ export function vitePluginRscCss(
 
     const options = rscCssOptions?.rscCssTransform
     if (options === false) return false
-    if (options?.filter && !options.filter(id)) return false
-    if (id.includes('/node_modules/') || !/\.[tj]sx$/.test(id)) return false
+    if (options?.filter && !options.filter(filename)) return false
+    // https://github.com/vitejs/vite/blob/7979f9da555aa16bd221b32ea78ce8cb5292fac4/packages/vite/src/node/constants.ts#L95
+    if (
+      !/\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)\b/.test(code) ||
+      !/\.[tj]sx?$/.test(filename)
+    )
+      return false
 
     // skip transform if no css imports
     const result = esModuleLexer.parse(code)