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

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