fix(plugin-vue): trigger css hmr on custom template languages (#6987)

Co-authored-by: patak <matias.capeletto@gmail.com>
vitejs · May 13, 2022 · 2289d04 · 2289d04
1 parent 638b168
commit 2289d04
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -146,6 +146,11 @@ export async function handleHotUpdate(
     // template is inlined into main, add main module instead
     if (!templateModule) {
       affectedModules.add(mainModule)
+    } else if (mainModule && !affectedModules.has(mainModule)) {
+      const styleImporters = [...mainModule.importers].filter((m) =>
+        /\.css($|\?)/.test(m.url)
+      )
+      styleImporters.forEach((m) => affectedModules.add(m))
     }
   }
   if (didUpdateStyle) {

diff --git a/playground/tailwind/__test__/tailwind.spec.ts b/playground/tailwind/__test__/tailwind.spec.ts
@@ -3,6 +3,7 @@ import {
   editFile,
   untilUpdated,
   getColor,
+  getBgColor,
   browserLogs,
   page
 } from '~utils'
@@ -64,4 +65,24 @@ if (!isBuild) {
 
     browserLogs.length = 0
   })
+
+  test('regenerate CSS and HMR (pug template)', async () => {
+    browserLogs.length = 0
+    const el = await page.$('.pug')
+
+    expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+
+    editFile('src/components/PugTemplate.vue', (code) =>
+      code.replace('bg-red-400', 'bg-red-600')
+    )
+
+    await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+
+    expect(browserLogs).toMatchObject([
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/components/PugTemplate.vue?vue&type=template&lang.js'
+    ])
+
+    browserLogs.length = 0
+  })
 }
diff --git a/playground/tailwind/src/components/PugTemplate.vue b/playground/tailwind/src/components/PugTemplate.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>
diff --git a/playground/tailwind/src/views/Page.vue b/playground/tailwind/src/views/Page.vue
@@ -8,15 +8,17 @@
       Tailwind style
     </div>
     <HelloWorld />
+    <PugTemplate />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import HelloWorld from '../components/HelloWorld.vue'
+import PugTemplate from '../components/PugTemplate.vue'
 
 export default defineComponent({
-  components: { HelloWorld },
+  components: { HelloWorld, PugTemplate },
   setup() {
     const val = ref(0)