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

Co-authored-by: Claude <[email protected]>

Author: hi-ogawa

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,40 @@
+'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) {
+    if (import.meta.hot) {
+      href += '?t=' + Date.now()
+    }
+    return href
+  }
+
+  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</div>
+      <div className="test-css-inline-client">test-css-inline-client</div>
+      <div className="test-css-raw-client">test-css-raw-client</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,21 @@
+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</div>
+        <div className="test-css-inline-server">test-css-inline-server</div>
+        <div className="test-css-raw-server">test-css-raw-server</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>
   )