From ad75d899794bf2b42aaf2c3b016690b5716782ac Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 14 Nov 2024 21:40:39 +0800
Subject: [PATCH 1/3] fix(compiler-dom): properly stringify template string
 bindings

---
 .../stringifyStatic.spec.ts.snap              | 10 +++++++++
 .../transforms/stringifyStatic.spec.ts        | 21 +++++++++++++++++++
 packages/shared/src/normalizeProp.ts          |  6 +++---
 3 files changed, 34 insertions(+), 3 deletions(-)

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 a863eb32e61..bb8a6e52298 100644
--- 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 string literal constant bindings 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 a460cfe68eb..382fb2d2947 100644
--- 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 bindings', () => {
+    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/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index f21e6642513..ef598a03ced 100644
--- 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') {

From 954d244d89d5143bbc583f407c4064734b93a50a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 14 Nov 2024 21:49:08 +0800
Subject: [PATCH 2/3] fix: test

---
 .../transforms/__snapshots__/stringifyStatic.spec.ts.snap     | 2 +-
 packages/shared/__tests__/normalizeProp.spec.ts               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 bb8a6e52298..2bf5082693b 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -32,7 +32,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`stringify static html > serializing string literal constant bindings 1`] = `
+exports[`stringify static html > serializing template string bindings 1`] = `
 "const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache) {
diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts
index ae9cbb56661..00c6b294da1 100644
--- 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', () => {

From 8cb713ea104402aef27d13b0a4c7b7bd14edeac0 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 14 Nov 2024 21:53:29 +0800
Subject: [PATCH 3/3] chore: update test

---
 .../transforms/__snapshots__/stringifyStatic.spec.ts.snap       | 2 +-
 .../compiler-dom/__tests__/transforms/stringifyStatic.spec.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 2bf5082693b..2ed15ef5e62 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -32,7 +32,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`stringify static html > serializing template string bindings 1`] = `
+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) {
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 382fb2d2947..79e6fc9c6e8 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -163,7 +163,7 @@ describe('stringify static html', () => {
   })
 
   // #12391
-  test('serializing template string bindings', () => {
+  test('serializing template string style', () => {
     const { ast, code } = compileWithStringify(
       `<div><div :style="\`color:red;\`">${repeat(
         `<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,