fix: preserve base in HMR for CSS referenced in link tags (#4407)

vitejs · Jul 28, 2021 · a06b26b · a06b26b
1 parent 2986f6e
commit a06b26b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -1,4 +1,10 @@
-import { isBuild, readManifest } from '../../testUtils'
+import {
+  editFile,
+  getColor,
+  isBuild,
+  readManifest,
+  untilUpdated
+} from '../../testUtils'
 
 const outerAssetMatch = isBuild
   ? /\/dev\/assets\/logo\.\w{8}\.png/
@@ -25,4 +31,16 @@ if (isBuild) {
     expect(htmlEntry.css.length).toEqual(1)
     expect(htmlEntry.assets.length).toEqual(1)
   })
+} else {
+  test('preserve the base in CSS HMR', async () => {
+    await untilUpdated(() => getColor('body'), 'black') // sanity check
+    editFile('frontend/entrypoints/global.css', (code) =>
+      code.replace('black', 'red')
+    )
+    await untilUpdated(() => getColor('body'), 'red') // successful HMR
+
+    // Verify that the base (/dev/) was added during the css-update
+    const link = await page.$('link[rel="stylesheet"]')
+    expect(await link.getAttribute('href')).toContain('/dev/global.css?t=')
+  })
 }
diff --git a/packages/playground/backend-integration/frontend/entrypoints/global.css b/packages/playground/backend-integration/frontend/entrypoints/global.css
@@ -8,6 +8,7 @@ body {
 }
 
 body {
+  color: black;
   margin: 4vh auto;
   max-width: 800px;
   padding: 0 4vw;

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
@@ -84,7 +84,7 @@ async function handleMessage(payload: HMRPayload) {
             ) as HTMLLinkElement[]
           ).find((e) => e.href.includes(path))
           if (el) {
-            const newPath = `${path}${
+            const newPath = `${base}${path.slice(1)}${
               path.includes('?') ? '&' : '?'
             }t=${timestamp}`
             el.href = new URL(newPath, el.href).href