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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
packages/compiler-sfc/__tests__/cssVars.spec.ts
View File

@ -2,52 +2,12 @@ import { compileStyle } from '../src'
import { compileSFCScript, assertCode } from './utils'
describe('CSS vars injection', () => {
describe('codegen', () => {
test('<script> w/ no default export', () => {
assertCode(
compileSFCScript(
`<script>const a = 1</script>\n` +
`<style>div{ color: var(--v-bind:color); }</style>`
).content
)
})
test('<script> w/ default export', () => {
assertCode(
compileSFCScript(
`<script>export default { setup() {} }</script>\n` +
`<style>div{ color: var(--:color); }</style>`
).content
)
})
test('<script> w/ default export in strings/comments', () => {
assertCode(
compileSFCScript(
`<script>
// export default {}
export default {}
</script>\n` + `<style>div{ color: var(--:color); }</style>`
).content
)
})
test('w/ <script setup>', () => {
assertCode(
compileSFCScript(
`<script setup>const color = 'red'</script>\n` +
`<style>div{ color: var(--:color); }</style>`
).content
)
})
})
test('generating correct code for nested paths', () => {
const { content } = compileSFCScript(
`<script>const a = 1</script>\n` +
`<style>div{
color: var(--v-bind:color);
color: var(--v-bind:font.size);
color: v-bind(color);
font-size: v-bind('font.size');
}</style>`
)
expect(content).toMatch(`_useCssVars(_ctx => ({
@ -71,9 +31,9 @@ describe('CSS vars injection', () => {
</script>\n` +
`<style>
div {
color: var(--:color);
font-size: var(--:size);
border: var(--:foo);
color: v-bind(color);
font-size: v-bind(size);
border: v-bind(foo);
}
</style>`
)
@ -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('<script> w/ no default export', () => {
assertCode(
compileSFCScript(
`<script>const a = 1</script>\n` +
`<style>div{ color: v-bind(color); }</style>`
).content
)
})
test('<script> w/ default export', () => {
assertCode(
compileSFCScript(
`<script>export default { setup() {} }</script>\n` +
`<style>div{ color: v-bind(color); }</style>`
).content
)
})
test('<script> w/ default export in strings/comments', () => {
assertCode(
compileSFCScript(
`<script>
// export default {}
export default {}
</script>\n` + `<style>div{ color: v-bind(color); }</style>`
).content
)
})
test('w/ <script setup>', () => {
assertCode(
compileSFCScript(
`<script setup>const color = 'red'</script>\n` +
`<style>div{ color: v-bind(color); }</style>`
).content
)
})
})
})

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