From b298b3c4f10d4db1acbbbc0e85d29249cef0d5e9 Mon Sep 17 00:00:00 2001
From: edison1105 <daiwei521@126.com>
Date: Fri, 21 Jul 2023 21:52:36 +0800
Subject: [PATCH 1/2] fix(cssVars): cssVarName should keep backslashe in ssr
 dev mode

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap   | 4 +++-
 packages/compiler-sfc/__tests__/compileScript.spec.ts    | 3 +++
 packages/compiler-sfc/src/style/cssVars.ts               | 9 ++++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 073874363b8..b0076294efe 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1003,10 +1003,12 @@ export default {
   setup(__props) {
 
         const count = ref(0)
+        const style = { color: 'red' }
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"--xxxxxxxx-count\\": (count.value)
+  \\"--xxxxxxxx-count\\": (count.value),
+  \\"--xxxxxxxx-style\\\\\\\\.color\\": (style.color)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 312e93fccbe..d046fbd9d34 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -778,6 +778,7 @@ describe('SFC compile <script setup>', () => {
         <script setup>
         import { ref } from 'vue'
         const count = ref(0)
+        const style = { color: 'red' }
         </script>
         <template>
           <div>{{ count }}</div>
@@ -785,6 +786,7 @@ describe('SFC compile <script setup>', () => {
         </template>
         <style>
         div { color: v-bind(count) }
+        span { color: v-bind(style.color) }
         </style>
         `,
         {
@@ -799,6 +801,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`ssrInterpolate`)
       expect(content).not.toMatch(`useCssVars`)
       expect(content).toMatch(`"--${mockId}-count": (count.value)`)
+      expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
       assertCode(content)
     })
 
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 9fe727bc5dc..cbb7648dce9 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -21,9 +21,12 @@ export function genCssVarsFromList(
   isSSR = false
 ): string {
   return `{\n  ${vars
-    .map(
-      key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
-    )
+    .map(key => {
+      const varName = genVarName(id, key, isProd)
+      return `"${isSSR ? `--` : ``}${
+        isSSR && !isProd ? varName.replace(/\\/g, '\\\\') : varName
+      }": (${key})`
+    })
     .join(',\n  ')}\n}`
 }
 

From 2dd9b45170b0404f973c78f219f248c4031a1933 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 18:30:13 +0800
Subject: [PATCH 2/2] refactor: double escape directly

---
 packages/compiler-sfc/src/script/utils.ts  |  6 ++++--
 packages/compiler-sfc/src/style/cssVars.ts | 21 +++++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index 3cbc270269a..bc621d25840 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -121,6 +121,8 @@ export function getEscapedPropName(key: string) {
 
 export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
 
-export function getEscapedCssVarName(key: string) {
-  return key.replace(cssVarNameEscapeSymbolsRE, s => `\\${s}`)
+export function getEscapedCssVarName(key: string, doubleEscape: boolean) {
+  return key.replace(cssVarNameEscapeSymbolsRE, s =>
+    doubleEscape ? `\\\\${s}` : `\\${s}`
+  )
 }
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index cbb7648dce9..cb5274bc287 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -21,21 +21,26 @@ export function genCssVarsFromList(
   isSSR = false
 ): string {
   return `{\n  ${vars
-    .map(key => {
-      const varName = genVarName(id, key, isProd)
-      return `"${isSSR ? `--` : ``}${
-        isSSR && !isProd ? varName.replace(/\\/g, '\\\\') : varName
-      }": (${key})`
-    })
+    .map(
+      key =>
+        `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`
+    )
     .join(',\n  ')}\n}`
 }
 
-function genVarName(id: string, raw: string, isProd: boolean): string {
+function genVarName(
+  id: string,
+  raw: string,
+  isProd: boolean,
+  isSSR = false
+): string {
   if (isProd) {
     return hash(id + raw)
   } else {
     // escape ASCII Punctuation & Symbols
-    return `${id}-${getEscapedCssVarName(raw)}`
+    // #7823 need to double-escape in SSR because the attributes are rendered
+    // into an HTML string
+    return `${id}-${getEscapedCssVarName(raw, isSSR)}`
   }
 }