feat: support <style vars scoped>

vuejs · Sep 9, 2020 · 1692287 · 1692287
1 parent fb09c8b
commit 1692287
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/example/ScriptSetup.vue b/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>
diff --git a/src/stylePostLoader.ts b/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
   })