fix(compiler-dom): properly stringify template string style (#12392)

close #12391

diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
index a863eb32e617be7a543ee563a4a596df467be574..2ed15ef5e6287618f69d2dda0ba96a2ed5acd81f 100644 (file)
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -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
 

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index a460cfe68eb0e5a4f40c3b47e6748c3de879a582..79e6fc9c6e85e1697417d285c4190c3ada56a266 100644 (file)
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -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(

diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts
index ae9cbb56661fe754ebeb181a216669eeadba8076..00c6b294da125554267ee714577f5f2f6bdad0c1 100644 (file)
--- a/packages/shared/__tests__/normalizeProp.spec.ts
+++ b/packages/shared/__tests__/normalizeProp.spec.ts
@@ -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', () => {

diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index f21e6642513d7be3c62a8a3ead3a558c08f63a63..ef598a03ced79d4862991ebadec82fd1bb2c61c7 100644 (file)
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -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') {