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

wip: update sfc style var injection syntax

Browse Source 
ref: https://github.com/vuejs/rfcs/pull/231#issuecomment-728993116
This commit is contained in:
Evan You
2020-11-17 11:43:08 -05:00
parent 41bb7fa330
commit 6e870f5b30
2 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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