fix(dev): Prevent stripping query params from CSS in HMR

packages/playground/hmr/__tests__/hmr.spec.ts

@@ -139,4 +139,20 @@ if (!isBuild) {
       'title2'
     )
   })
+
+  test('CSS update preserves query params', async () => {
+    await page.goto(viteTestUrl)
+
+    editFile('global.css', (code) => code.replace('white', 'tomato'))
+
+    const elprev = await page.$('.css-prev')
+    const elpost = await page.$('.css-post')
+    await untilUpdated(() => elprev.textContent(), 'param=required')
+    await untilUpdated(() => elpost.textContent(), 'param=required')
+    const textprev = await elprev.textContent()
+    const textpost = await elpost.textContent()
+    expect(textprev).not.toBe(textpost)
+    expect(textprev).not.toMatch('direct')
+    expect(textpost).not.toMatch('direct')
+  })
 }

packages/playground/hmr/global.css

@@ -0,0 +1,3 @@
+body {
+  background: white;
+}

packages/playground/hmr/hmr.js

@@ -35,6 +35,19 @@ if (import.meta.hot) {
 
   import.meta.hot.on('vite:beforeUpdate', (event) => {
     console.log(`>>> vite:beforeUpdate -- ${event.type}`)
+
+    const cssUpdate = event.updates.find(
+      (update) =>
+        update.type === 'css-update' && update.path.match('global.css')
+    )
+    if (cssUpdate) {
+      const el = document.querySelector('#global-css')
+      text('.css-prev', el.href)
+      // We don't have a vite:afterUpdate event, but updates are currently sync
+      setTimeout(() => {
+        text('.css-post', el.href)
+      }, 0)
+    }
   })
 
   import.meta.hot.on('vite:error', (event) => {

packages/playground/hmr/index.html

@@ -1,6 +1,9 @@
+<link id="global-css" rel="stylesheet" href="./global.css?param=required" />
 <script type="module" src="./hmr.js"></script>
 
 <div class="app"></div>
 <div class="dep"></div>
 <div class="nested"></div>
 <div class="custom"></div>
+<div class="css-prev"></div>
+<div class="css-post"></div>

packages/vite/src/client/client.ts

@@ -39,6 +39,12 @@ function warnFailedFetch(err: Error, path: string | string[]) {
   )
 }
 
+function cleanUrl(pathname: string): string {
+  const url = new URL(pathname, location.toString())
+  url.searchParams.delete('direct')
+  return url.pathname + url.search
+}
+
 // Listen for messages
 socket.addEventListener('message', async ({ data }) => {
   handleMessage(JSON.parse(data))
@@ -73,21 +79,21 @@ async function handleMessage(payload: HMRPayload) {
         } else {
           // css-update
           // this is only sent when a css file referenced with <link> is updated
-          let { path, timestamp } = update
-          path = path.replace(/\?.*/, '')
+          const { path, timestamp } = update
+          const searchUrl = cleanUrl(path)
           // can't use querySelector with `[href*=]` here since the link may be
           // using relative paths so we need to use link.href to grab the full
           // URL for the include check.
           const el = Array.from(
             document.querySelectorAll<HTMLLinkElement>('link')
-          ).find((e) => e.href.includes(path))
+          ).find((e) => cleanUrl(e.href).includes(searchUrl))
           if (el) {
-            const newPath = `${base}${path.slice(1)}${
-              path.includes('?') ? '&' : '?'
+            const newPath = `${base}${searchUrl.slice(1)}${
+              searchUrl.includes('?') ? '&' : '?'
             }t=${timestamp}`
             el.href = new URL(newPath, el.href).href
           }
-          console.log(`[vite] css hot updated: ${path}`)
+          console.log(`[vite] css hot updated: ${searchUrl}`)
         }
       })
       break