Skip to content

Commit

Permalink
fix(compiler-sfc): only escape parsing-breaking characters in v-bind …
Browse files Browse the repository at this point in the history
…css var names (#6816)

close #6803
  • Loading branch information
sxzz authored Nov 9, 2022
1 parent 2c27556 commit 57c9013
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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__
Expand Down
20 changes: 14 additions & 6 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down Expand Up @@ -79,14 +79,22 @@ 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'
})
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-フォント);
}"
`)
})
Expand Down Expand Up @@ -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)
})

Expand Down
6 changes: 5 additions & 1 deletion packages/compiler-sfc/src/cssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`
)}`
}
}

Expand Down

0 comments on commit 57c9013

Please sign in to comment.