diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts index c32daf0f..ab2573df 100644 --- a/packages/compiler-sfc/__tests__/cssVars.spec.ts +++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts @@ -2,52 +2,12 @@ import { compileStyle } from '../src' import { compileSFCScript, assertCode } from './utils' describe('CSS vars injection', () => { - describe('codegen', () => { - test('\n` + - `` - ).content - ) - }) - - test('\n` + - `` - ).content - ) - }) - - test('\n` + `` - ).content - ) - }) - - test('w/ \n` + - `` - ).content - ) - }) - }) - test('generating correct code for nested paths', () => { const { content } = compileSFCScript( `\n` + `` ) expect(content).toMatch(`_useCssVars(_ctx => ({ @@ -71,9 +31,9 @@ describe('CSS vars injection', () => { \n` + `` ) @@ -95,8 +55,8 @@ describe('CSS vars injection', () => { test('should rewrite CSS vars in scoped mode', () => { const { code } = compileStyle({ source: `.foo { - color: var(--v-bind:color); - font-size: var(--:font.size); + color: v-bind(color); + font-size: v-bind('font.size'); }`, filename: 'test.css', id: 'data-v-test' @@ -108,4 +68,44 @@ describe('CSS vars injection', () => { }" `) }) + + describe('codegen', () => { + test('\n` + + `` + ).content + ) + }) + + test('\n` + + `` + ).content + ) + }) + + test('\n` + `` + ).content + ) + }) + + test('w/ \n` + + `` + ).content + ) + }) + }) }) diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts index f88de5bb..b9293bea 100644 --- a/packages/compiler-sfc/src/cssVars.ts +++ b/packages/compiler-sfc/src/cssVars.ts @@ -13,7 +13,7 @@ import { ParserPlugin } from '@babel/parser' import postcss, { Root } from 'postcss' export const CSS_VARS_HELPER = `useCssVars` -export const cssVarRE = /\bvar\(--(?:v-bind)?:([^)]+)\)/g +export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g export function convertCssVarCasing(raw: string): string { return raw.replace(/([^\w-])/g, '_') @@ -24,7 +24,7 @@ export function parseCssVars(sfc: SFCDescriptor): string[] { sfc.styles.forEach(style => { let match while ((match = cssVarRE.exec(style.content))) { - vars.push(match[1]) + vars.push(match[1] || match[2] || match[3]) } }) return vars @@ -38,8 +38,8 @@ export const cssVarsPlugin = postcss.plugin( root.walkDecls(decl => { // rewrite CSS variables if (cssVarRE.test(decl.value)) { - decl.value = decl.value.replace(cssVarRE, (_, $1) => { - return `var(--${shortId}-${convertCssVarCasing($1)})` + decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => { + return `var(--${shortId}-${convertCssVarCasing($1 || $2 || $3)})` }) } })