From 15a8aceaf01c34b43df87d528b62b415f0fb9bd0 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 18 Feb 2022 17:02:35 +0300
Subject: [PATCH 1/2] fix(plugin-vue): trigger css hmr on custom template
 languages

---
 .../tailwind/__test__/tailwind.spec.ts        | 28 ++++++++++++++++++-
 .../tailwind/src/components/PugTemplate.vue   |  3 ++
 .../playground/tailwind/src/views/Page.vue    |  4 ++-
 packages/playground/testUtils.ts              |  5 ++++
 packages/plugin-vue/src/handleHotUpdate.ts    |  5 ++++
 5 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/tailwind/src/components/PugTemplate.vue

diff --git a/packages/playground/tailwind/__test__/tailwind.spec.ts b/packages/playground/tailwind/__test__/tailwind.spec.ts
index 47f6b7ccf49037..7522a69514b211 100644
--- a/packages/playground/tailwind/__test__/tailwind.spec.ts
+++ b/packages/playground/tailwind/__test__/tailwind.spec.ts
@@ -1,4 +1,10 @@
-import { isBuild, editFile, untilUpdated, getColor } from '../../testUtils'
+import {
+  isBuild,
+  editFile,
+  untilUpdated,
+  getColor,
+  getBgColor
+} from '../../testUtils'
 
 test('should render', async () => {
   expect(await page.textContent('#pagetitle')).toBe('|Page title|')
@@ -57,4 +63,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/packages/playground/tailwind/src/components/PugTemplate.vue b/packages/playground/tailwind/src/components/PugTemplate.vue
new file mode 100644
index 00000000000000..4169b534dee4ef
--- /dev/null
+++ b/packages/playground/tailwind/src/components/PugTemplate.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>
diff --git a/packages/playground/tailwind/src/views/Page.vue b/packages/playground/tailwind/src/views/Page.vue
index ec59b44238c733..07c2175fe48d0a 100644
--- a/packages/playground/tailwind/src/views/Page.vue
+++ b/packages/playground/tailwind/src/views/Page.vue
@@ -6,15 +6,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)
 
diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts
index 0ae0c6e8766e95..0c8186d4ed121d 100644
--- a/packages/playground/testUtils.ts
+++ b/packages/playground/testUtils.ts
@@ -64,6 +64,11 @@ export async function getBg(el: string | ElementHandle): Promise<string> {
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage)
 }
 
+export async function getBgColor(el: string | ElementHandle): Promise<string> {
+  el = await toEl(el)
+  return el.evaluate((el) => getComputedStyle(el as Element).backgroundColor)
+}
+
 export function readFile(filename: string): string {
   return fs.readFileSync(path.resolve(testDir, filename), 'utf-8')
 }
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 2bce3950563367..096f013ec6285d 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -141,6 +141,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) {

From 085386d2085d9fdf69fc532b3b0d959d9e5f5261 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 12 May 2022 22:06:55 +0200
Subject: [PATCH 2/2] chore: apply poyoho regex suggestion

---
 packages/plugin-vue/src/handleHotUpdate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 096f013ec6285d..2a85cfa66ae63c 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -143,7 +143,7 @@ export async function handleHotUpdate(
       affectedModules.add(mainModule)
     } else if (mainModule && !affectedModules.has(mainModule)) {
       const styleImporters = [...mainModule.importers].filter((m) =>
-        /\.css/.test(m.url)
+        /\.css($|\?)/.test(m.url)
       )
       styleImporters.forEach((m) => affectedModules.add(m))
     }