root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(compiler-sfc): only escape parsing-breaking characters in v-bind css var names (#6816) 

close #6803
This commit is contained in:
三咲智子 Kevin Deng 2022-11-09 11:30:05 +08:00 committed by GitHub
parent 2c27556fe5
commit 57c9013837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
View File

@ -75,9 +75,9 @@ export default {
_useCssVars(_ctx => ({
\\"xxxxxxxx-foo\\": (_unref(foo)),
\\"xxxxxxxx-foo____px_\\": (_unref(foo) + 'px'),
\\"xxxxxxxx-_a___b____2____px_\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
\\"xxxxxxxx-__a___b______2___a_\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
\\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'),
\\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
\\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
}))
let a = 100
@ -133,7 +133,7 @@ import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color),
\\"xxxxxxxx-font_size\\": (_ctx.font.size)
\\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__

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

@ -12,7 +12,7 @@ describe('CSS vars injection', () => {
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-color": (_ctx.color),
"${mockId}-font_size": (_ctx.font.size)
"${mockId}-font\\.size": (_ctx.font.size)
})`)
assertCode(content)
})
@ -79,6 +79,10 @@ describe('CSS vars injection', () => {
source: `.foo {
color: v-bind(color);
font-size: v-bind('font.size');
font-weight: v-bind(_φ);
font-size: v-bind(1-字号);
font-family: v-bind(フォント);
}`,
filename: 'test.css',
id: 'data-v-test'
@ -86,7 +90,11 @@ describe('CSS vars injection', () => {
expect(code).toMatchInlineSnapshot(`
".foo {
color: var(--test-color);
font-size: var(--test-font_size);
font-size: var(--test-font\\\\.size);
font-weight: var(--test-_φ);
font-size: var(--test-1-字号);
font-family: var(--test-フォント);
}"
`)
})
@ -225,10 +233,10 @@ describe('CSS vars injection', () => {
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-foo": (_unref(foo)),
"${mockId}-foo____px_": (_unref(foo) + 'px'),
"${mockId}-_a___b____2____px_": ((_unref(a) + _unref(b)) / 2 + 'px'),
"${mockId}-__a___b______2___a_": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
})`)
"${mockId}-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
"${mockId}-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
"${mockId}-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
}))`)
assertCode(content)
})

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

@ -30,7 +30,11 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
if (isProd) {
return hash(id + raw)
} else {
return `${id}-${raw.replace(/([^\w-])/g, '_')}`
// escape ASCII Punctuation & Symbols
return `${id}-${raw.replace(
/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g,
s => `\\${s}`
)}`
}
}