fix(rsc): fix CSS HMR with ?url (#776)

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

Author: hi-ogawa

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

@@ -632,11 +632,15 @@ function defineTest(f: Fixture) {
 
     async function expectNoDuplicateServerCss(page: Page) {
       // check only manually inserted stylesheet link exists
-      // (toHaveAttribute passes only when locator matches single element)
-      await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
-        'href',
-        '/test-style-server-manual.css',
-      )
+      await expect(page.locator('link[rel="stylesheet"]')).toHaveCount(3)
+      for (const locator of await page
+        .locator('link[rel="stylesheet"]')
+        .all()) {
+        await expect(locator).toHaveAttribute(
+          'data-precedence',
+          'test-style-manual-link',
+        )
+      }
     }
 
     test('no duplicate server css', async ({ page }) => {
@@ -854,6 +858,56 @@ function defineTest(f: Fixture) {
     )
   })
 
+  test('css url client @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-style-url-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+
+    if (f.mode !== 'dev') return
+
+    // test client css url HMR
+    await using _ = await expectNoReload(page)
+    const editor = f.createEditor('src/routes/style-client/client-url.css')
+    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+    await expect(page.locator('.test-style-url-client')).toHaveCSS(
+      'color',
+      'rgb(0, 165, 255)',
+    )
+    editor.reset()
+    await expect(page.locator('.test-style-url-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
+  test('css url server @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.test-style-url-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+
+    if (f.mode !== 'dev') return
+
+    // test server css url HMR
+    await using _ = await expectNoReload(page)
+    const editor = f.createEditor('src/routes/style-server/server-url.css')
+    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+    await expect(page.locator('.test-style-url-server')).toHaveCSS(
+      'color',
+      'rgb(0, 165, 255)',
+    )
+    editor.reset()
+    await expect(page.locator('.test-style-url-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  })
+
   test('tailwind @js', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)

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

@@ -12,22 +12,15 @@ export function TestCssQueriesClient(props: {
 }) {
   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)} />
+          <link rel="stylesheet" href={cssUrl} />
           <style>{cssInline}</style>
           <style>{cssRaw}</style>
-          <link rel="stylesheet" href={urlWithHmr(props.serverUrl)} />
+          <link rel="stylesheet" href={props.serverUrl} />
           <style>{props.serverInline}</style>
           <style>{props.serverRaw}</style>
         </>

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

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

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

@@ -3,6 +3,7 @@
 import './client.css'
 import { TestClientDep } from './client-dep'
 import styles from './client.module.css'
+import styleUrl from './client-url.css?url'
 
 export function TestStyleClient() {
   return (
@@ -11,6 +12,12 @@ export function TestStyleClient() {
       <div data-testid="css-module-client" className={styles.client}>
         test-css-module-client
       </div>
+      <link
+        rel="stylesheet"
+        href={styleUrl}
+        precedence="test-style-manual-link"
+      />
+      <div className="test-style-url-client">test-style-url-client</div>
       <TestClientDep />
     </>
   )

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

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

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

@@ -1,5 +1,6 @@
 import './server.css'
 import styles from './server.module.css'
+import styleUrl from './server-url.css?url'
 
 export function TestStyleServer() {
   return (
@@ -8,10 +9,16 @@ export function TestStyleServer() {
       <div data-testid="css-module-server" className={styles.server}>
         test-css-module-server
       </div>
+      <link
+        rel="stylesheet"
+        href={styleUrl}
+        precedence="test-style-manual-link"
+      />
+      <div className="test-style-url-server">test-style-url-server</div>
       <link
         rel="stylesheet"
         href="/test-style-server-manual.css"
-        precedence="test-style-server-manual"
+        precedence="test-style-manual-link"
       />
       <div className="test-style-server-manual">test-style-server-manual</div>
     </>

packages/plugin-rsc/src/plugin.ts

@@ -481,7 +481,9 @@ export default function vitePluginRsc(
           if (this.environment.name === 'client') {
             // filter out `.css?direct` (injected by SSR) to avoid browser full reload
             // when changing non-self accepting css such as `module.css`.
-            return ctx.modules.filter((m) => !m.id?.includes('?direct'))
+            return ctx.modules.filter(
+              (m) => !(m.id?.includes('?direct') && !m.isSelfAccepting),
+            )
           }
         }