fix(plugin-vue): ensure HMR updates styles when SFC is treated as a type dependency

Author: jh-leong

packages/plugin-vue/src/index.ts

@@ -224,10 +224,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
       if (options.value.compiler.invalidateTypeCache) {
         options.value.compiler.invalidateTypeCache(ctx.file)
       }
+      const matchesFilter = filter.value(ctx.file)
       if (typeDepToSFCMap.has(ctx.file)) {
-        return handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
+        const mod = handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
+        if (!matchesFilter) return mod
       }
-      if (filter.value(ctx.file)) {
+      if (matchesFilter) {
         return handleHotUpdate(
           ctx,
           options.value,

playground/vue/ExportTypeProps1.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="export-type-props1">foo: {{ title }}</div>
+</template>
+
+<script lang="ts">
+export interface FooProps {
+  title?: string
+}
+</script>
+
+<script setup lang="ts">
+defineProps<FooProps>()
+</script>
+
+<style>
+.export-type-props1 {
+  color: red;
+}
+</style>

playground/vue/ExportTypeProps2.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import type { FooProps } from './ExportTypeProps1.vue'
+defineProps<FooProps>()
+</script>
+
+<template>
+  <div>bar: {{ title }}</div>
+</template>

playground/vue/Main.vue

@@ -36,6 +36,8 @@
   <PreCompiledExternalScoped />
   <PreCompiledExternalCssModules />
   <ParserOptions />
+  <ExportTypeProps1 />
+  <ExportTypeProps2 />
 </template>
 
 <script setup lang="ts">
@@ -66,6 +68,8 @@ import PreCompiledExternalScoped from './pre-compiled/external-scoped.vue'
 import PreCompiledExternalCssModules from './pre-compiled/external-cssmodules.vue'
 import ParserOptions from './ParserOptions.vue'
 import HmrCircularReference from './HmrCircularReference.vue'
+import ExportTypeProps1 from './ExportTypeProps1.vue'
+import ExportTypeProps2 from './ExportTypeProps2.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 

playground/vue/__tests__/vue.spec.ts

@@ -409,6 +409,13 @@ describe('macro imported types', () => {
       ),
     )
   })
+
+  test('should update style', async () => {
+    const cls = '.export-type-props1'
+    expect(await getColor(cls)).toBe('red')
+    editFile('ExportTypeProps1.vue', (code) => code.replace('red', 'blue'))
+    await untilUpdated(() => getColor(cls), 'blue')
+  })
 })
 
 test('TS with generics', async () => {