@vue/compiler-sfc 3.2.28 → 3.2.29

package/dist/compiler-sfc.cjs.js

@@ -109,7 +109,8 @@ function sum (o) {
 var hashSum = sum;
 
 const CSS_VARS_HELPER = `useCssVars`;
-const cssVarRE = /\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g;
+// match v-bind() with max 2-levels of nested parens.
+const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g;
 function genCssVarsFromList(vars, id, isProd) {
     return `{\n  ${vars
         .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
@@ -123,6 +124,14 @@ function genVarName(id, raw, isProd) {
         return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
     }
 }
+function noramlizeExpression(exp) {
+    exp = exp.trim();
+    if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
+        (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
+        return exp.slice(1, -1);
+    }
+    return exp;
+}
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
@@ -130,7 +139,7 @@ function parseCssVars(sfc) {
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
         while ((match = cssVarRE.exec(content))) {
-            const variable = match[1] || match[2] || match[3];
+            const variable = noramlizeExpression(match[1]);
             if (!vars.includes(variable)) {
                 vars.push(variable);
             }
@@ -145,8 +154,8 @@ const cssVarsPlugin = opts => {
         Declaration(decl) {
             // rewrite CSS variables
             if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
-                    return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`;
+                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
+                    return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`;
                 });
             }
         }

package/dist/compiler-sfc.esm-browser.js

@@ -27662,7 +27662,8 @@ function sum (o) {
 var hashSum = sum;
 
 const CSS_VARS_HELPER = `useCssVars`;
-const cssVarRE = /\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g;
+// match v-bind() with max 2-levels of nested parens.
+const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g;
 function genCssVarsFromList(vars, id, isProd) {
     return `{\n  ${vars
         .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
@@ -27676,6 +27677,14 @@ function genVarName(id, raw, isProd) {
         return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
     }
 }
+function noramlizeExpression(exp) {
+    exp = exp.trim();
+    if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
+        (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
+        return exp.slice(1, -1);
+    }
+    return exp;
+}
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
@@ -27683,7 +27692,7 @@ function parseCssVars(sfc) {
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
         while ((match = cssVarRE.exec(content))) {
-            const variable = match[1] || match[2] || match[3];
+            const variable = noramlizeExpression(match[1]);
             if (!vars.includes(variable)) {
                 vars.push(variable);
             }
@@ -27698,8 +27707,8 @@ const cssVarsPlugin = opts => {
         Declaration(decl) {
             // rewrite CSS variables
             if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
-                    return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`;
+                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
+                    return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`;
                 });
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.28",
+  "version": "3.2.29",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.28",
-    "@vue/compiler-dom": "3.2.28",
-    "@vue/compiler-ssr": "3.2.28",
-    "@vue/reactivity-transform": "3.2.28",
-    "@vue/shared": "3.2.28",
+    "@vue/compiler-core": "3.2.29",
+    "@vue/compiler-dom": "3.2.29",
+    "@vue/compiler-ssr": "3.2.29",
+    "@vue/reactivity-transform": "3.2.29",
+    "@vue/shared": "3.2.29",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",