From 9613b9c46eb78dbe97613559401fb0c62c903315 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 15 Dec 2021 14:22:28 +0800
Subject: [PATCH 1/2] fix(cssVars): cssVars work with complex expression

---
 .../__snapshots__/cssVars.spec.ts.snap        | 21 ++++++++++++++++++
 .../compiler-sfc/__tests__/cssVars.spec.ts    | 22 +++++++++++++++++++
 packages/compiler-sfc/src/cssVars.ts          |  2 +-
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index 5e31fc5ba4e..b44f584b206 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -66,6 +66,27 @@ return { color, width }
 }"
 `;
 
+exports[`CSS vars injection codegen should work with w/ complex expression 1`] = `
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose();
+
+_useCssVars(_ctx => ({
+  \\"xxxxxxxx-_a___b____2____px__\\": ((_unref(a) + _unref(b)) / 2 + 'px' ),
+  \\"xxxxxxxx-__a___b______2___a_\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
+}))
+
+        let a = 100
+        let b = 200
+        
+return { a, b }
+}
+
+}"
+`;
+
 exports[`CSS vars injection codegen w/ <script setup> 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 67447310c6f..9b7d6914dba 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -195,6 +195,28 @@ describe('CSS vars injection', () => {
       // color should only be injected once, even if it is twice in style
       expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-color": (color)
+})`)
+      assertCode(content)
+    })
+
+    test('should work with w/ complex expression', () => {
+      const { content } = compileSFCScript(
+        `<script setup>
+        let a = 100
+        let b = 200
+        </script>\n` +
+          `<style>
+          div {
+            color: v-bind((a + b) / 2 + 'px' );
+          }
+          p {
+            color: v-bind(((a + b)) / (2 * a));
+          }
+        </style>`
+      )
+      expect(content).toMatch(`_useCssVars(_ctx => ({
+  "${mockId}-_a___b____2____px__": ((_unref(a) + _unref(b)) / 2 + 'px' ),
+  "${mockId}-__a___b______2___a_": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 })`)
       assertCode(content)
     })
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 3032e2fbf5d..f231616da93 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -13,7 +13,7 @@ import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
 export const cssVarRE =
-  /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
+  /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g
 
 export function genCssVarsFromList(
   vars: string[],

From e5c5836d8582b06995a5e15a6bae9641a300cbc2 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 15 Dec 2021 16:05:53 +0800
Subject: [PATCH 2/2] chore: improve code

---
 packages/compiler-sfc/__tests__/cssVars.spec.ts | 3 +++
 packages/compiler-sfc/src/cssVars.ts            | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 9b7d6914dba..965c9a5202b 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -209,6 +209,9 @@ describe('CSS vars injection', () => {
           div {
             color: v-bind((a + b) / 2 + 'px' );
           }
+          div {
+            color: v-bind    ((a + b) / 2 + 'px' );
+          }
           p {
             color: v-bind(((a + b)) / (2 * a));
           }
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index f231616da93..da3e164aeaf 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -13,7 +13,7 @@ import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
 export const cssVarRE =
-  /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g
+  /\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g
 
 export function genCssVarsFromList(
   vars: string[],