fix(rsc): exclude CSS imports with special queries from automatic injection

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

@@ -1152,4 +1152,31 @@ function defineTest(f: Fixture) {
       '(cacheFnCount = 4, nonCacheFnCount = 6)',
     )
   })
+
+  test('css queries', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+
+    const tests = [
+      ['.test-css-url-client', 'rgb(255, 100, 0)'],
+      ['.test-css-inline-client', 'rgb(255, 50, 0)'],
+      ['.test-css-raw-client', 'rgb(255, 0, 0)'],
+      ['.test-css-url-server', 'rgb(0, 255, 100)'],
+      ['.test-css-inline-server', 'rgb(0, 255, 50)'],
+      ['.test-css-raw-server', 'rgb(0, 255, 0)'],
+    ] as const
+
+    // css with queries are not injected automatically
+    for (const [selector] of tests) {
+      await expect(page.locator(selector)).toHaveCSS('color', 'rgb(0, 0, 0)')
+    }
+
+    // inject css manually
+    await page.getByRole('button', { name: 'test-css-queries' }).click()
+
+    // verify styles
+    for (const [selector, color] of tests) {
+      await expect(page.locator(selector)).toHaveCSS('color', color)
+    }
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-inline.css

@@ -0,0 +1,3 @@
+.test-css-inline-client {
+  color: rgb(255, 50, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-raw.css

@@ -0,0 +1,3 @@
+.test-css-raw-client {
+  color: rgb(255, 0, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-url.css

@@ -0,0 +1,3 @@
+.test-css-url-client {
+  color: rgb(255, 100, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import cssUrl from './client-url.css?url'
+import cssInline from './client-inline.css?inline'
+import cssRaw from './client-raw.css?raw'
+import React from 'react'
+
+export function TestCssQueriesClient(props: {
+  serverUrl: string
+  serverInline: string
+  serverRaw: string
+}) {
+  const [enabled, setEnabled] = React.useState(false)
+
+  function urlWithHmr(href: string) {
+    return href + (import.meta.env.BASE_URL ? '?t=' + Date.now() : '')
+  }
+
+  return (
+    <div>
+      <button onClick={() => setEnabled(!enabled)}>test-css-queries</button>
+      {enabled && (
+        <>
+          <link rel="stylesheet" href={urlWithHmr(cssUrl)} />
+          <style>{cssInline}</style>
+          <style>{cssRaw}</style>
+          <link rel="stylesheet" href={urlWithHmr(props.serverUrl)} />
+          <style>{props.serverInline}</style>
+          <style>{props.serverRaw}</style>
+        </>
+      )}
+      <div className="test-css-url-client">test-css-url-client: {cssUrl}</div>
+      <div className="test-css-inline-client">
+        test-css-inline-client:{' '}
+        {typeof cssInline === 'string' ? 'string' : 'other'}
+      </div>
+      <div className="test-css-raw-client">
+        test-css-raw-client: {typeof cssRaw === 'string' ? 'string' : 'other'}
+      </div>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-inline.css

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

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-raw.css

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

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-url.css

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

packages/plugin-rsc/examples/basic/src/routes/css-queries/server.tsx

@@ -0,0 +1,26 @@
+import cssUrl from './server-url.css?url'
+import cssInline from './server-inline.css?inline'
+import cssRaw from './server-raw.css?raw'
+import { TestCssQueriesClient } from './client'
+
+export function TestCssQueries() {
+  return (
+    <div>
+      <TestCssQueriesClient
+        serverUrl={cssUrl}
+        serverInline={cssInline}
+        serverRaw={cssRaw}
+      />
+      <div>
+        <div className="test-css-url-server">test-css-url-server: {cssUrl}</div>
+        <div className="test-css-inline-server">
+          test-css-inline-server:{' '}
+          {typeof cssInline === 'string' ? 'string' : 'other'}
+        </div>
+        <div className="test-css-raw-server">
+          test-css-raw-server: {typeof cssRaw === 'string' ? 'string' : 'other'}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -35,6 +35,7 @@ import TestDepCssInServer from '@vitejs/test-dep-css-in-server/server'
 import { TestHmrSharedServer } from './hmr-shared/server'
 import { TestHmrSharedClient } from './hmr-shared/client'
 import { TestHmrSharedAtomic } from './hmr-shared/atomic/server'
+import { TestCssQueries } from './css-queries/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -83,6 +84,7 @@ export function Root(props: { url: URL }) {
         <TestBrowserOnly />
         <TestUseCache />
         <TestReactCache url={props.url} />
+        <TestCssQueries />
       </body>
     </html>
   )

packages/plugin-rsc/examples/basic/src/server.tsx

@@ -26,7 +26,7 @@ export default async function handler(request: Request): Promise<Response> {
       `default-src 'self';`,
       // `unsafe-eval` is required during dev since React uses eval for findSourceMapURL feature
       `script-src 'self' 'nonce-${nonce}' ${import.meta.env.DEV ? `'unsafe-eval'` : ``};`,
-      `style-src 'self' 'nonce-${nonce}';`,
+      `style-src 'self' 'unsafe-inline';`,
       // allow blob: worker for Vite server ping shared worker
       import.meta.hot && `worker-src 'self' blob:;`,
     ]

packages/plugin-rsc/src/plugin.ts

@@ -1664,6 +1664,10 @@ export async function findSourceMapURL(
 export function vitePluginRscCss(
   rscCssOptions?: Pick<RscPluginOptions, 'rscCssTransform'>,
 ): Plugin[] {
+  function hasSpecialCssQuery(id: string): boolean {
+    return /[?&](url|inline|raw)(\b|=|&|$)/.test(id)
+  }
+
   function collectCss(environment: DevEnvironment, entryId: string) {
     const visited = new Set<string>()
     const cssIds = new Set<string>()
@@ -1681,6 +1685,9 @@ export function vitePluginRscCss(
       for (const next of mod?.importedModules ?? []) {
         if (next.id) {
           if (isCSSRequest(next.id)) {
+            if (hasSpecialCssQuery(next.id)) {
+              continue
+            }
             cssIds.add(next.id)
           } else {
             recurse(next.id)