fix: fix inline css hmr

hi-ogawa · Dec 3, 2024 · 1df4042 · 1df4042
1 parent ea2a629
commit 1df4042
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/vite/src/node/server/environments/rolldown.ts b/packages/vite/src/node/server/environments/rolldown.ts
@@ -18,6 +18,7 @@ import type {
 } from '../..'
 import { CLIENT_ENTRY, VITE_PACKAGE_DIR } from '../../constants'
 import { injectEnvironmentToHooks } from '../../build'
+import { cleanUrl } from '../../../shared/utils'
 
 const require = createRequire(import.meta.url)
 
@@ -141,6 +142,7 @@ class RolldownEnvironment extends DevEnvironment {
   outputOptions!: rolldown.OutputOptions
   lastModules: Record<string, string | null> = {}
   newModules: Record<string, string | null> = {}
+  fileModuleIds = new Set<string>()
   buildPromise?: Promise<void>
 
   static createFactory(
@@ -266,6 +268,7 @@ class RolldownEnvironment extends DevEnvironment {
       modules[id] = current
     }
     this.lastModules = modules
+    this.fileModuleIds = new Set(chunk.moduleIds.map((id) => cleanUrl(id)))
 
     this.buildTimestamp = Date.now()
     console.timeEnd(`[rolldown:${this.name}:build]`)
@@ -300,8 +303,7 @@ ${innerCode}
     if (!this.result) {
       return
     }
-    const output = this.result.output[0]
-    if (!output.moduleIds.includes(ctx.file)) {
+    if (!this.fileModuleIds.has(ctx.file)) {
       return
     }
     if (

diff --git a/playground/rolldown-dev-react/__tests__/basic.spec.ts b/playground/rolldown-dev-react/__tests__/basic.spec.ts
@@ -57,10 +57,12 @@ test.runIf(!isBuild)('hmr css', async () => {
     .toBe('rgb(0, 0, 255)')
   await page.getByRole('button', { name: 'Count: 1' }).click()
 
-  editFile('./src/test-style.css', (s) => s.replace('blue', 'green'))
+  editFile('./src/test-style-inline.css', (s) => s.replace('orange', 'green'))
   await expect
     .poll(() =>
-      page.locator('.test-style').evaluate((el) => getComputedStyle(el).color),
+      page
+        .locator('.test-style-inline')
+        .evaluate((el) => getComputedStyle(el).color),
     )
     .toBe('rgb(0, 128, 0)')
   await page.getByRole('button', { name: 'Count: 2' }).click()