feat: support css v-bind

Author: yyx990803

package.json

@@ -59,6 +59,6 @@
     "unbuild": "^0.7.4",
     "vite": "^2.9.12",
     "vitest": "^0.15.1",
-    "vue": "^2.7.0-beta.2"
+    "vue": "^2.7.0-beta.3"
   }
 }

playground/App.vue

@@ -9,6 +9,7 @@ import TestCustomBlock from './custom/TestCustomBlock.vue'
 import TestHmr from './hmr/TestHmr.vue'
 import TestAssets from './test-assets/TestAssets.vue'
 import TestES2020Features from './TestES2020Features.vue'
+import TestCssVBind from './css/TestCssVBind.vue'
 </script>
 
 <template>
@@ -24,5 +25,6 @@ import TestES2020Features from './TestES2020Features.vue'
     <TestHmr />
     <TestAssets />
     <TestES2020Features />
+    <TestCssVBind/>
   </div>
 </template>

playground/css/TestCssVBind.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+
+const color = ref('red')
+</script>
+
+<template>
+  <div>
+    <h2>CSS v-bind</h2>
+    <span class="css-v-bind" @click="color = color === 'red' ? 'green' : 'red'"
+      >This should be {{ color }}</span
+    >
+  </div>
+</template>
+
+<style scoped>
+span {
+  color: v-bind(color);
+}
+</style>

pnpm-lock.yaml

@@ -39,6 +39,7 @@ export function resolveScript(
 
   resolved = options.compiler.compileScript(descriptor, {
     ...options.script,
+    id: descriptor.id,
     isProd: options.isProduction,
     sourceMap: options.sourceMap
   })

src/script.ts

@@ -19,7 +19,7 @@ export async function transformStyle(
     ...options.style,
     filename: descriptor.filename,
     id: `data-v-${descriptor.id}`,
-    // isProd: options.isProduction,
+    isProd: options.isProduction,
     source: code,
     scoped: !!block.scoped,
     ...(options.cssDevSourcemap

src/style.ts

@@ -139,4 +139,11 @@ export function declareTests(isBuild: boolean) {
       // )
     }
   })
+
+  test('css v-bind', async () => {
+    const el = await getEl('.css-v-bind')
+    expect(await getComputedColor(el!)).toBe(`rgb(255, 0, 0)`)
+    await el!.click()
+    expect(await getComputedColor(el!)).toBe(`rgb(0, 128, 0)`)
+  })
 }