feat: Support default values for v-bind in CSS

Author: leemotive

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

@@ -103,8 +103,8 @@ describe('CSS vars injection', () => {
     const { content } = compileSFCScript(
       `<script>const a = 1</script>\n` +
         `<style>div{
-          color: v-bind(color);
-          font-size: v-bind('font.size');
+          color: v-bind(color, blue);
+          font-size: v-bind('font.size', 14px);
         }</style>`,
       { isProd: true },
     )
@@ -115,7 +115,7 @@ describe('CSS vars injection', () => {
 
     const { code } = compileStyle({
       source: `.foo {
-        color: v-bind(color);
+        color: v-bind(color, blue);
         font-size: v-bind('font.size');
       }`,
       filename: 'test.css',
@@ -124,7 +124,7 @@ describe('CSS vars injection', () => {
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
-              color: var(--4003f1a6);
+              color: var(--4003f1a6, blue);
               font-size: var(--41b6490a);
       }"
     `)

packages/compiler-sfc/src/style/cssVars.ts

@@ -98,9 +98,9 @@ function lexBinding(content: string, start: number): number | null {
           state = LexerState.inDoubleQuoteString
         } else if (char === `(`) {
           parenDepth++
-        } else if (char === `)`) {
+        } else if (char === `)` || char === ',') {
           if (parenDepth > 0) {
-            parenDepth--
+            char === `)` && parenDepth--
           } else {
             return i
           }
@@ -146,8 +146,8 @@ export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
             const variable = normalizeExpression(value.slice(start, end))
             transformed +=
               value.slice(lastIndex, match.index) +
-              `var(--${genVarName(id, variable, isProd)})`
-            lastIndex = end + 1
+              `var(--${genVarName(id, variable, isProd)}`
+            lastIndex = end
           }
         }
         decl.value = transformed + value.slice(lastIndex)