From 1d38eac15030ccb948964c3f679207f6d3663def Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 3 Sep 2024 10:07:39 +0800
Subject: [PATCH] fix(cssVars): correctly escape double quotes in SSR

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap       | 4 +++-
 packages/compiler-sfc/__tests__/compileScript.spec.ts        | 5 +++++
 packages/shared/src/escapeHtml.ts                            | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index e175cc0a874..e092d83e743 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -880,11 +880,13 @@ export default {
 
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
   "--xxxxxxxx-count": (count.value),
-  "--xxxxxxxx-style\\\\.color": (style.color)
+  "--xxxxxxxx-style\\\\.color": (style.color),
+  "--xxxxxxxx-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index efc5af522e7..5e20b8a63e1 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -606,6 +606,7 @@ describe('SFC compile <script setup>', () => {
         import { ref } from 'vue'
         const count = ref(0)
         const style = { color: 'red' }
+        const height = ref(0)
         </script>
         <template>
           <div>{{ count }}</div>
@@ -614,6 +615,7 @@ describe('SFC compile <script setup>', () => {
         <style>
         div { color: v-bind(count) }
         span { color: v-bind(style.color) }
+        span { color: v-bind(height + "px") }
         </style>
         `,
         {
@@ -629,6 +631,9 @@ describe('SFC compile <script setup>', () => {
       expect(content).not.toMatch(`useCssVars`)
       expect(content).toMatch(`"--${mockId}-count": (count.value)`)
       expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
+      expect(content).toMatch(
+        `"--${mockId}-height\\\\ \\\\+\\\\ \\\\\\"px\\\\\\"": (height.value + "px")`,
+      )
       assertCode(content)
     })
 
diff --git a/packages/shared/src/escapeHtml.ts b/packages/shared/src/escapeHtml.ts
index 94d07fd4120..e3af6c0c11f 100644
--- a/packages/shared/src/escapeHtml.ts
+++ b/packages/shared/src/escapeHtml.ts
@@ -59,6 +59,6 @@ export function getEscapedCssVarName(
   doubleEscape: boolean,
 ): string {
   return key.replace(cssVarNameEscapeSymbolsRE, s =>
-    doubleEscape ? `\\\\${s}` : `\\${s}`,
+    doubleEscape ? (s === '"' ? '\\\\\\"' : `\\\\${s}`) : `\\${s}`,
   )
 }