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(
- `\n` +
+ `\n` +
``
)
- 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)) {