theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(compiler-sfc): fix css v-bind inside other css functions

Browse Source 
fix #5302, close #5306
This commit is contained in:
Evan You
2022-01-23 20:58:43 +08:00
parent 283df0ad68
commit 16fa18da6d
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/compiler-sfc/src/cssVars.ts
View File

@@ -12,8 +12,8 @@ import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
export const CSS_VARS_HELPER = `useCssVars`
export const cssVarRE =
/\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g
// match v-bind() with max 2-levels of nested parens.
const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g
export function genCssVarsFromList(
vars: string[],
@@ -33,6 +33,17 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
}
}
function noramlizeExpression(exp: string) {
exp = exp.trim()
if (
(exp[0] === `'` && exp[exp.length - 1] === `'`) ||
(exp[0] === `"` && exp[exp.length - 1] === `"`)
) {
return exp.slice(1, -1)
}
return exp
}
export function parseCssVars(sfc: SFCDescriptor): string[] {
const vars: string[] = []
sfc.styles.forEach(style => {
@@ -40,7 +51,7 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
// ignore v-bind() in comments /* ... */
const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
while ((match = cssVarRE.exec(content))) {
const variable = match[1] || match[2] || match[3]
const variable = noramlizeExpression(match[1])
if (!vars.includes(variable)) {
vars.push(variable)
}
@@ -62,8 +73,8 @@ export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
Declaration(decl) {
// rewrite CSS variables
if (cssVarRE.test(decl.value)) {
decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`
decl.value = decl.value.replace(cssVarRE, (_, $1) => {
return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`
})
}
}