feat: support <style vars scoped>

Author: yyx990803

example/ScriptSetup.vue

@@ -2,6 +2,7 @@
   <h2>{{ hello }}</h2>
   <div>
     {{ count }} <button @click="inc">+</button>
+    <button @click="changeColor">change color</button>
     <Button/>
   </div>
 </template>
@@ -17,4 +18,15 @@ export function inc() {
 }
 
 export const hello = 'hi from script setup'
+
+export const color = ref('red')
+export const changeColor = () => {
+  color.value = color.value === 'red' ? 'green' : 'red'
+}
 </script>
+
+<style scoped vars="{ color }">
+h2 {
+  color: var(--color)
+}
+</style>

src/stylePostLoader.ts

@@ -13,6 +13,7 @@ const StylePostLoader: webpack.loader.Loader = function(source, inMap) {
     id: `data-v-${query.id}`,
     map: inMap,
     scoped: !!query.scoped,
+    vars: !!query.vars,
     trim: true
   })