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 <[email protected]>

Author: y1d7ng

packages/playground/vue/PreProcessors.vue

@@ -6,6 +6,9 @@ p.pug
 p.pug-less
   | This is rendered from <template lang="pug">
   | and styled with <style lang="less">. It should be green.
+p.pug-stylus
+  | This is rendered from <template lang="pug">
+  | and styled with <style lang="stylus">. 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>

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', () => {

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 {