From 3a75d5d6942a1743789192dca9161f7c30a71e58 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Mon, 26 Jul 2021 23:19:56 +0800
Subject: [PATCH] fix(sfc/style-vars): should ignore style variable bindings in
 comments (#4188)

fix #4185
---
 .../__tests__/__snapshots__/cssVars.spec.ts.snap    | 11 +++++++++++
 packages/compiler-sfc/__tests__/cssVars.spec.ts     | 13 +++++++++++++
 packages/compiler-sfc/src/cssVars.ts                |  4 +++-
 3 files changed, 27 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 0c6a96a0..9616b8fd 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -49,6 +49,17 @@ __default__.setup = __setup__
 export default __default__"
 `;
 
+exports[`CSS vars injection codegen should ignore comments 1`] = `
+"export default {
+  setup(__props, { expose }) {
+  expose()
+const color = 'red'
+return { color }
+}
+
+}"
+`;
+
 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 879c5026..10aa33f7 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -161,6 +161,19 @@ describe('CSS vars injection', () => {
       )
     })
 
+    //#4185
+    test('should ignore comments', () => {
+      const { content } = compileSFCScript(
+        `<script setup>const color = 'red'</script>\n` +
+          `<style>
+            div{ /* color: v-bind(color); */ width:20; }
+          </style>`
+      )
+
+      expect(content).not.toMatch(`_useCssVars`)
+      assertCode(content)
+    })
+
     test('w/ <script setup> using the same var multiple times', () => {
       const { content } = compileSFCScript(
         `<script setup>
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 853db99f..5c7b80c9 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -37,7 +37,9 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   const vars: string[] = []
   sfc.styles.forEach(style => {
     let match
-    while ((match = cssVarRE.exec(style.content))) {
+    // 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]
       if (!vars.includes(variable)) {
         vars.push(variable)