From 7a3c6e616385cbc069620ae583d6739a972c0ead Mon Sep 17 00:00:00 2001
From: OneNail <31649110+OneNail@users.noreply.github.com>
Date: Wed, 21 Jul 2021 04:06:28 +0800
Subject: [PATCH] fix: reuse the old preprocessor after changing the lang attr
 (#4224)

* fix(plugin-vue): reuse the old preprocessor after changing the lang attr

* feat(playground): add stylus + change lang test in vue

* chore: add eol line break

Co-authored-by: Shinigami <chrissi92@hotmail.de>
---
 packages/playground/vue/PreProcessors.vue     | 10 ++++++++++
 packages/playground/vue/__tests__/vue.spec.ts | 15 +++++++++++++++
 packages/plugin-vue/src/handleHotUpdate.ts    |  6 +++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/playground/vue/PreProcessors.vue b/packages/playground/vue/PreProcessors.vue
index 50fa8d407ed8cf..ddb636678e8cdd 100644
--- a/packages/playground/vue/PreProcessors.vue
+++ b/packages/playground/vue/PreProcessors.vue
@@ -6,6 +6,9 @@ p.pug
 p.pug-less
   | This is rendered from &lt;template lang="pug"&gt;
   | and styled with &lt;style lang="less"&gt;. It should be green.
+p.pug-stylus
+  | This is rendered from &lt;template lang="pug"&gt;
+  | and styled with &lt;style lang="stylus"&gt;. It should be orange.
 SlotComponent
   template(v-slot:test-slot)
     div.pug-slot slot content
@@ -32,3 +35,10 @@ $color: magenta;
   color: @color;
 }
 </style>
+
+<style lang="stylus">
+color = orange
+
+.pug-stylus
+  color: color
+</style>
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 4626e30e9ac17c..8d13069ded396f 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -56,6 +56,21 @@ describe('pre-processors', () => {
     )
     await untilUpdated(() => getColor(el), 'blue')
   })
+
+  test('stylus + change lang', async () => {
+    expect(await getColor('p.pug-stylus')).toBe('orange')
+    editFile('PreProcessors.vue', (code) =>
+      code
+        .replace('<style lang="stylus">', '<style lang="scss">')
+        .replace('color = orange', '$color: yellow;')
+        .replace('color: color', '{ color: $color; }')
+    )
+    await untilUpdated(() => getColor('p.pug-stylus'), 'yellow')
+    editFile('PreProcessors.vue', (code) =>
+      code.replace('$color: yellow;', '$color: orange;')
+    )
+    await untilUpdated(() => getColor('p.pug-stylus'), 'orange')
+  })
 })
 
 describe('css modules', () => {
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index ae07de16e19c93..fd1275f43050d1 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -88,7 +88,11 @@ export async function handleHotUpdate({
     const next = nextStyles[i]
     if (!prev || !isEqualBlock(prev, next)) {
       didUpdateStyle = true
-      const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))
+      const mod = modules.find(
+        (m) =>
+          m.url.includes(`type=style&index=${i}`) &&
+          m.url.endsWith(`.${next.lang || 'css'}`)
+      )
       if (mod) {
         affectedModules.add(mod)
       } else {