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