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

22
packages/compiler-sfc/__tests__/compileStyle.spec.ts
View File

@@ -155,7 +155,8 @@ describe('SFC scoped CSS', () => {
})
test('scoped keyframes', () => {
const style = compileScoped(`
const style = compileScoped(
`
.anim {
animation: color 5s infinite, other 5s;
}
@@ -190,23 +191,27 @@ describe('SFC scoped CSS', () => {
from { opacity: 0; }
to { opacity: 1; }
}
`)
`,
{ id: 'data-v-test' }
)
expect(style).toContain(
`.anim[test] {\n animation: color-test 5s infinite, other 5s;`
`.anim[data-v-test] {\n animation: color-test 5s infinite, other 5s;`
)
expect(style).toContain(`.anim-2[test] {\n animation-name: color-test`)
expect(style).toContain(
`.anim-3[test] {\n animation: 5s color-test infinite, 5s other;`
`.anim-2[data-v-test] {\n animation-name: color-test`
)
expect(style).toContain(
`.anim-3[data-v-test] {\n animation: 5s color-test infinite, 5s other;`
)
expect(style).toContain(`@keyframes color-test {`)
expect(style).toContain(`@-webkit-keyframes color-test {`)
expect(style).toContain(
`.anim-multiple[test] {\n animation: color-test 5s infinite,opacity-test 2s;`
`.anim-multiple[data-v-test] {\n animation: color-test 5s infinite,opacity-test 2s;`
)
expect(style).toContain(
`.anim-multiple-2[test] {\n animation-name: color-test,opacity-test;`
`.anim-multiple-2[data-v-test] {\n animation-name: color-test,opacity-test;`
)
expect(style).toContain(`@keyframes opacity-test {`)
expect(style).toContain(`@-webkit-keyframes opacity-test {`)
@@ -268,11 +273,12 @@ describe('SFC scoped CSS', () => {
font-size: var(--global:font);
}`,
{
id: 'data-v-test',
vars: true
}
)
expect(code).toMatchInlineSnapshot(`
".foo[test] {
".foo[data-v-test] {
color: var(--test-color);
font-size: var(--font);
}"

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