fix(cssVars): cssVarName should keep backslashe in ssr dev mode

Author: edison1105

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)

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -777,13 +777,15 @@ describe('SFC compile <script setup>', () => {
         <script setup>
         import { ref } from 'vue'
         const count = ref(0)
+        const style = { color: 'red' }
         </script>
         <template>
           <div>{{ count }}</div>
           <div>static</div>
         </template>
         <style>
         div { color: v-bind(count) }
+        span { color: v-bind(style.color) }
         </style>
         `,
         {
@@ -798,6 +800,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)
     })
 

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}`
 }