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

refactor: shorten scoped css var / animation prefix

Browse Source
This commit is contained in:
Evan You
2020-07-10 18:47:31 -04:00
parent 73807aeaf7
commit 5f271515cf
4 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/compiler-sfc/src/stylePluginScoped.ts
View File

@@ -8,6 +8,7 @@ const cssVarRE = /\bvar\(--(global:)?([^)]+)\)/g
export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
const { id, vars: hasInjectedVars } = options as { id: string; vars: boolean }
const keyframes = Object.create(null)
const shortId = id.replace(/^data-v-/, '')
root.each(function rewriteSelectors(node) {
if (node.type !== 'rule') {
@@ -17,7 +18,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
node.each(rewriteSelectors)
} else if (/-?keyframes$/.test(node.name)) {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + id
keyframes[node.params] = node.params = node.params + '-' + shortId
}
}
return
@@ -170,7 +171,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
// rewrite CSS variables
if (hasInjectedVars && cssVarRE.test(decl.value)) {
decl.value = decl.value.replace(cssVarRE, (_, $1, $2) => {
return $1 ? `var(--${$2})` : `var(--${id}-${$2})`
return $1 ? `var(--${$2})` : `var(--${shortId}-${$2})`
})
}
})