fix(ssr/sfc-css-vars): fix v-bind css vars codegen for SSR

fix #5443
close #5444

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

@@ -205,7 +205,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         for (let a of [1,2,3]) {
           (
   ([__temp,__restore] = _withAsyncContext(() => a)),
@@ -240,7 +240,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         while (d) {
           (
   ([__temp,__restore] = _withAsyncContext(() => 5)),
@@ -295,7 +295,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         let a = 'foo'
         ;(
   ([__temp,__restore] = _withAsyncContext(() => 0)),
@@ -351,7 +351,7 @@ if (ok) {
   __restore()
 )
         }
-      } else { 
+      } else {
         (
   ([__temp,__restore] = _withAsyncContext(() => 5)),
   await __temp,
@@ -1039,8 +1039,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode ssr codegen 1`] = `
-"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
-import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
 
 import { ref } from 'vue'
         
@@ -1048,15 +1047,11 @@ export default {
   __ssrInlineRender: true,
   setup(__props) {
 
-_useCssVars(_ctx => ({
-  \\"xxxxxxxx-count\\": (count.value)
-}))
-
         const count = ref(0)
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"xxxxxxxx-count\\": (count.value)
+  \\"--xxxxxxxx-count\\": (count.value)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)

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

@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from './utils'
+import { compileSFCScript as compile, assertCode, mockId } from './utils'
 
 describe('SFC compile <script setup>', () => {
   test('should expose top level declarations', () => {
@@ -168,7 +168,7 @@ defineExpose({ foo: 123 })
     expect(content).toMatch(/\bexpose\(\{ foo: 123 \}\)/)
   })
 
-  test('<script> after <script setup> the script content not end with `\\n`',() => {
+  test('<script> after <script setup> the script content not end with `\\n`', () => {
     const { content } = compile(`
     <script setup>
     import { x } from './x'
@@ -726,6 +726,8 @@ defineExpose({ foo: 123 })
       expect(content).toMatch(`\n  __ssrInlineRender: true,\n`)
       expect(content).toMatch(`return (_ctx, _push`)
       expect(content).toMatch(`ssrInterpolate`)
+      expect(content).not.toMatch(`useCssVars`)
+      expect(content).toMatch(`"--${mockId}-count": (count.value)`)
       assertCode(content)
     })
   })
@@ -1196,7 +1198,7 @@ const emit = defineEmits(['a', 'b'])
     })
 
     test('multiple `if` nested statements', () => {
-      assertAwaitDetection(`if (ok) { 
+      assertAwaitDetection(`if (ok) {
         let a = 'foo'
         await 0 + await 1
         await 2
@@ -1212,13 +1214,13 @@ const emit = defineEmits(['a', 'b'])
           await 3
           await 4
         }
-      } else { 
+      } else {
         await 5
       }`)
     })
 
     test('multiple `if while` nested statements', () => {
-      assertAwaitDetection(`if (ok) { 
+      assertAwaitDetection(`if (ok) {
         while (d) {
           await 5
         }
@@ -1237,7 +1239,7 @@ const emit = defineEmits(['a', 'b'])
     })
 
     test('multiple `if for` nested statements', () => {
-      assertAwaitDetection(`if (ok) { 
+      assertAwaitDetection(`if (ok) {
         for (let a of [1,2,3]) {
           await a
         }