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