fix(compiler-sfc): support complex expression in CSS v-bind() (#5114)

fix #5109

Author: edison1105

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'
 

packages/compiler-sfc/__tests__/cssVars.spec.ts

@@ -195,6 +195,31 @@ 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' );
+ }
+ 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)
  })

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[],