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

fix #5443
close #5444

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