fix: improve handling of transformed content in hot updates for Vue files

packages/plugin-vue/src/handleHotUpdate.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import _debug from 'debug'
 import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
 import type { HmrContext, ModuleNode } from 'vite'
@@ -160,9 +161,18 @@ export async function handleHotUpdate(
   }
   if (updateType.length) {
     if (file.endsWith('.vue')) {
-      // invalidate the descriptor cache so that the next transform will
-      // re-analyze the file and pick up the changes.
-      invalidateDescriptor(file)
+      // If the descriptor was created from transformed content (e.g., by UnoCSS vue-scoped),
+      // we should update the main cache with the transformed descriptor instead of invalidating it.
+      // This ensures that subsequent style block requests get the correct transformed content.
+      const isTransformedContent = content !== fs.readFileSync(file, 'utf-8')
+      if (isTransformedContent) {
+        // Use the descriptor created from transformed content
+        cache.set(file, descriptor)
+      } else {
+        // invalidate the descriptor cache so that the next transform will
+        // re-analyze the file and pick up the changes.
+        invalidateDescriptor(file)
+      }
     } else {
       // https://github.com/vuejs/vitepress/issues/3129
       // For non-vue files, e.g. .md files in VitePress, invalidating the

playground/unocss-vue-scoped/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloUnoCSS />
+</template>
+
+<script setup lang="ts">
+import HelloUnoCSS from './HelloUnoCSS.vue'
+</script>

playground/unocss-vue-scoped/HelloUnoCSS.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="uno bg-green-200 text-purple">UnoCSS</div>
+</template>

playground/unocss-vue-scoped/__tests__/unocss.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getBgColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+} from '~utils'
+
+test.runIf(isServe)('regenerate CSS and HMR', async () => {
+  const el = await page.$('.uno')
+  expect(await getBgColor(el)).toBe('rgb(187, 247, 208)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('HelloUnoCSS.vue', (code) =>
+        code.replace('bg-green-200', 'bg-red-200'),
+      ),
+    [
+      '[vite] hot updated: /HelloUnoCSS.vue',
+      '[vite] hot updated: /HelloUnoCSS.vue?vue&type=style&index=0&scoped=468ceaae&lang.css',
+    ],
+    false,
+  )
+  const newEl = await page.$('.uno')
+  await expect.poll(() => getBgColor(newEl)).toMatch('rgb(254, 202, 202)')
+})

playground/unocss-vue-scoped/index.html

@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+</script>

playground/unocss-vue-scoped/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vitejs/test-unocss-vue-scoped",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "unocss": "^66.4.2",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^22.16.5",
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}

playground/unocss-vue-scoped/uno.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [presetWind3()],
+  // outputToCssLayers: true,
+})

playground/unocss-vue-scoped/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    UnoCSS({
+      mode: 'vue-scoped',
+      inspector: false,
+    }),
+  ],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})