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

fix #5443
close #5444

Author: yyx990803

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,24 +1039,19 @@ 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'
 
 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
         }

packages/compiler-sfc/src/compileScript.ts

@@ -431,11 +431,12 @@ export function compileScript(
                 prop.key
               )
             }
-            
-            const propKey = prop.key.type === 'StringLiteral'
-              ? prop.key.value
-              : (prop.key as Identifier).name
-            
+
+            const propKey =
+              prop.key.type === 'StringLiteral'
+                ? prop.key.value
+                : (prop.key as Identifier).name
+
             if (prop.value.type === 'AssignmentPattern') {
               // default value { foo = 123 }
               const { left, right } = prop.value
@@ -1304,7 +1305,11 @@ export function compileScript(
   }
 
   // 8. inject `useCssVars` calls
-  if (cssVars.length) {
+  if (
+    cssVars.length &&
+    // no need to do this when targeting SSR
+    !(options.inlineTemplate && options.templateOptions?.ssr)
+  ) {
     helperImports.add(CSS_VARS_HELPER)
     helperImports.add('unref')
     s.prependRight(

packages/compiler-sfc/src/compileTemplate.ts

@@ -202,7 +202,7 @@ function doCompileTemplate({
     cacheHandlers: true,
     ssrCssVars:
       ssr && ssrCssVars && ssrCssVars.length
-        ? genCssVarsFromList(ssrCssVars, shortId, isProd)
+        ? genCssVarsFromList(ssrCssVars, shortId, isProd, true)
         : '',
     scopeId: scoped ? longId : undefined,
     slotted,

packages/compiler-sfc/src/cssVars.ts

@@ -18,10 +18,13 @@ const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g
 export function genCssVarsFromList(
   vars: string[],
   id: string,
-  isProd: boolean
+  isProd: boolean,
+  isSSR = false
 ): string {
   return `{\n  ${vars
-    .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
+    .map(
+      key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
+    )
     .join(',\n  ')}\n}`
 }