From 2289d04af5398791c3a01c9e597dc976e593c852 Mon Sep 17 00:00:00 2001
From: Nurettin Kaya <sibbngheid@gmail.com>
Date: Thu, 12 May 2022 20:57:41 -0700
Subject: [PATCH] fix(plugin-vue): trigger css hmr on custom template languages
 (#6987)

Co-authored-by: patak <matias.capeletto@gmail.com>
---
 packages/plugin-vue/src/handleHotUpdate.ts    |  5 +++++
 playground/tailwind/__test__/tailwind.spec.ts | 21 +++++++++++++++++++
 .../tailwind/src/components/PugTemplate.vue   |  3 +++
 playground/tailwind/src/views/Page.vue        |  4 +++-
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 playground/tailwind/src/components/PugTemplate.vue

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index fbf7d2c1f5d490..0db6b23f936280 100644
--- 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
index ee596a17999a6e..4483aabf6f6597 100644
--- 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
new file mode 100644
index 00000000000000..4169b534dee4ef
--- /dev/null
+++ 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
index 764a2a18e54fdb..84d4af06bb1c18 100644
--- 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)