fix: improve code gen when using cssVars in SSR (vuejs#85)

Author: edison1105

src/transform.ts

@@ -111,9 +111,10 @@ export async function compileFile(
   const [clientScript, bindings] = clientScriptResult
   clientCode += clientScript
 
-  // script ssr only needs to be performed if using <script setup> where
-  // the render fn is inlined.
-  if (descriptor.scriptSetup) {
+  // script ssr needs to be performed if :
+  // 1.using <script setup> where the render fn is inlined.
+  // 2.using cssVars, as it do not need to be injected during SSR.
+  if (descriptor.scriptSetup || descriptor.cssVars.length > 0) {
     const ssrScriptResult = await doCompileScript(
       store,
       descriptor,
@@ -127,7 +128,7 @@ export async function compileFile(
       ssrCode = `/* SSR compile error: ${store.state.errors[0]} */`
     }
   } else {
-    // when no <script setup> is used, the script result will be identical.
+    // the script result will be identical.
     ssrCode += clientScript
   }
 
@@ -285,6 +286,7 @@ async function doCompileTemplate(
   isTS: boolean
 ) {
   const templateResult = store.compiler.compileTemplate({
+    isProd: false,
     ...store.options?.template,
     source: descriptor.template!.content,
     filename: descriptor.filename,
@@ -293,7 +295,6 @@ async function doCompileTemplate(
     slotted: descriptor.slotted,
     ssr,
     ssrCssVars: descriptor.cssVars,
-    isProd: false,
     compilerOptions: {
       ...store.options?.template?.compilerOptions,
       bindingMetadata,