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