diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts index 6e6aef111..6fff84076 100644 --- a/packages/plugin-rsc/e2e/basic.test.ts +++ b/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)') { diff --git a/packages/plugin-rsc/examples/basic/package.json b/packages/plugin-rsc/examples/basic/package.json index 6fb6344bc..419c98348 100644 --- a/packages/plugin-rsc/examples/basic/package.json +++ b/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", diff --git a/packages/plugin-rsc/examples/basic/src/routes/root.tsx b/packages/plugin-rsc/examples/basic/src/routes/root.tsx index f679c362e..1bda17eed 100644 --- a/packages/plugin-rsc/examples/basic/src/routes/root.tsx +++ b/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 }) { + diff --git a/packages/plugin-rsc/examples/basic/test-dep/css-in-server/package.json b/packages/plugin-rsc/examples/basic/test-dep/css-in-server/package.json new file mode 100644 index 000000000..946252b68 --- /dev/null +++ b/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": "*" + } +} diff --git a/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.css b/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.css new file mode 100644 index 000000000..9f6f4f39a --- /dev/null +++ b/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); +} diff --git a/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.d.ts b/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.d.ts new file mode 100644 index 000000000..8177ed95c --- /dev/null +++ b/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.d.ts @@ -0,0 +1 @@ +export default function TestDepCssInServer(): import('react').ReactNode diff --git a/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.js b/packages/plugin-rsc/examples/basic/test-dep/css-in-server/server.js new file mode 100644 index 000000000..4fefceb50 --- /dev/null +++ b/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`, + ) +} diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts index c89213f94..df5b70f9b 100644 --- a/packages/plugin-rsc/src/plugin.ts +++ b/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) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3baa0c6a..5509c0050 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -533,6 +533,9 @@ importers: '@vitejs/test-dep-client-in-server2': specifier: file:./test-dep/client-in-server2 version: file:packages/plugin-rsc/examples/basic/test-dep/client-in-server2(react@19.1.0) + '@vitejs/test-dep-css-in-server': + specifier: file:./test-dep/css-in-server + version: file:packages/plugin-rsc/examples/basic/test-dep/css-in-server(react@19.1.0) '@vitejs/test-dep-server-in-client': specifier: file:./test-dep/server-in-client version: file:packages/plugin-rsc/examples/basic/test-dep/server-in-client(react@19.1.0) @@ -2573,6 +2576,11 @@ packages: peerDependencies: react: '*' + '@vitejs/test-dep-css-in-server@file:packages/plugin-rsc/examples/basic/test-dep/css-in-server': + resolution: {directory: packages/plugin-rsc/examples/basic/test-dep/css-in-server, type: directory} + peerDependencies: + react: '*' + '@vitejs/test-dep-non-js@file:packages/plugin-react-swc/playground/ts-lib/test-dep/non-js': resolution: {directory: packages/plugin-react-swc/playground/ts-lib/test-dep/non-js, type: directory} peerDependencies: @@ -6317,6 +6325,10 @@ snapshots: dependencies: react: 19.1.0 + '@vitejs/test-dep-css-in-server@file:packages/plugin-rsc/examples/basic/test-dep/css-in-server(react@19.1.0)': + dependencies: + react: 19.1.0 + '@vitejs/test-dep-non-js@file:packages/plugin-react-swc/playground/ts-lib/test-dep/non-js(react@19.1.0)': dependencies: react: 19.1.0