From 771635b72af598c4dd5c3a034b31613fe208e4b3 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Wed, 28 Jul 2021 22:51:25 +0800
Subject: [PATCH] fix(sfc/style-vars): improve ignore style variable bindings
 in comments (#4202)

---
 .../__tests__/__snapshots__/cssVars.spec.ts.snap     | 12 +++++++++---
 packages/compiler-sfc/__tests__/cssVars.spec.ts      |  8 ++++++--
 packages/compiler-sfc/src/cssVars.ts                 |  5 ++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index 9616b8fdfd7..dd45d4546ec 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -50,11 +50,17 @@ export default __default__"
 `;
 
 exports[`CSS vars injection codegen should ignore comments 1`] = `
-"export default {
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+
+export default {
   setup(__props, { expose }) {
   expose()
-const color = 'red'
-return { color }
+
+_useCssVars(_ctx => ({
+  \\"xxxxxxxx-width\\": (width)
+}))
+const color = 'red';const width = 100
+return { color, width }
 }
 
 }"
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 10aa33f7419..67447310c6f 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -164,13 +164,17 @@ describe('CSS vars injection', () => {
     //#4185
     test('should ignore comments', () => {
       const { content } = compileSFCScript(
-        `<script setup>const color = 'red'</script>\n` +
+        `<script setup>const color = 'red';const width = 100</script>\n` +
           `<style>
+            /* comment **/
             div{ /* color: v-bind(color); */ width:20; }
+            div{ width: v-bind(width); }
+            /* comment */
           </style>`
       )
 
-      expect(content).not.toMatch(`_useCssVars`)
+      expect(content).not.toMatch(`"${mockId}-color": (color)`)
+      expect(content).toMatch(`"${mockId}-width": (width)`)
       assertCode(content)
     })
 
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 5c7b80c9c70..f51269f1269 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -12,8 +12,7 @@ import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
-export const cssVarRE =
-  /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
+export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
 
 export function genCssVarsFromList(
   vars: string[],
@@ -38,7 +37,7 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   sfc.styles.forEach(style => {
     let match
     // ignore v-bind() in comments /* ... */
-    const content = style.content.replace(/\/\*[\s\S]*\*\//g, '')
+    const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
     while ((match = cssVarRE.exec(content))) {
       const variable = match[1] || match[2] || match[3]
       if (!vars.includes(variable)) {