fix(sfc/style-vars): improve ignore style variable bindings in comments (#4202)

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 }
 }
 
 }"

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)
     })
 

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 =
+export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
-  /\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)) {