Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(compiler-dom): properly stringify template string style (vuejs#12392
Browse files Browse the repository at this point in the history
)

close vuejs#12391
edison1105 authored and noootwo committed Nov 15, 2024
1 parent dfd44ad commit 6a4179a
Showing 4 changed files with 36 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -32,6 +32,16 @@ return function render(_ctx, _cache) {
}"
`;

exports[`stringify static html > serializing template string style 1`] = `
"const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
_createStaticVNode("<div style=\\"color:red;\\"><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span><span class=\\"foo bar\\">1 + false</span></div>", 1)
])))
}"
`;

exports[`stringify static html > should bail for <option> elements with null values 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
21 changes: 21 additions & 0 deletions packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
Original file line number Diff line number Diff line change
@@ -162,6 +162,27 @@ describe('stringify static html', () => {
expect(code).toMatchSnapshot()
})

// #12391
test('serializing template string style', () => {
const { ast, code } = compileWithStringify(
`<div><div :style="\`color:red;\`">${repeat(
`<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
)}</div></div>`,
)
// should be optimized now
expect(ast.cached).toMatchObject([
cachedArrayStaticNodeMatcher(
`<div style="color:red;">${repeat(
`<span class="foo bar">1 + false</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
)}</div>`,
1,
),
])
expect(code).toMatchSnapshot()
})

test('escape', () => {
const { ast, code } = compileWithStringify(
`<div><div>${repeat(
4 changes: 2 additions & 2 deletions packages/shared/__tests__/normalizeProp.spec.ts
Original file line number Diff line number Diff line change
@@ -153,10 +153,10 @@ describe('normalizeStyle', () => {
})

describe('stringifyStyle', () => {
test('should return empty string for undefined or string styles', () => {
test('should return empty string for undefined', () => {
expect(stringifyStyle(undefined)).toBe('')
expect(stringifyStyle('')).toBe('')
expect(stringifyStyle('color: blue;')).toBe('')
expect(stringifyStyle('color: blue;')).toBe('color: blue;')
})

test('should return valid CSS string for normalized style object', () => {
6 changes: 3 additions & 3 deletions packages/shared/src/normalizeProp.ts
Original file line number Diff line number Diff line change
@@ -45,10 +45,10 @@ export function parseStringStyle(cssText: string): NormalizedStyle {
export function stringifyStyle(
styles: NormalizedStyle | string | undefined,
): string {
if (!styles) return ''
if (isString(styles)) return styles

let ret = ''
if (!styles || isString(styles)) {
return ret
}
for (const key in styles) {
const value = styles[key]
if (isString(value) || typeof value === 'number') {

0 comments on commit 6a4179a

Please sign in to comment.