wip: new cssVars SSR integration + fix cssVars SSR injection for suspense

packages/compiler-ssr/src/runtimeHelpers.ts

@@ -16,7 +16,6 @@ export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
 export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
 export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
 export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
-export const SSR_RESOLVE_CSS_VARS = Symbol(`ssrResolveCssVars`)
 
 export const ssrHelpers = {
   [SSR_INTERPOLATE]: `ssrInterpolate`,
@@ -34,8 +33,7 @@ export const ssrHelpers = {
   [SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
   [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
   [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
-  [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
-  [SSR_RESOLVE_CSS_VARS]: `ssrResolveCssVars`
+  [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
 }
 
 // Note: these are helpers imported from @vue/server-renderer

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -19,11 +19,7 @@ import {
   createRoot
 } from '@vue/compiler-dom'
 import { isString, escapeHtml } from '@vue/shared'
-import {
-  SSR_INTERPOLATE,
-  ssrHelpers,
-  SSR_RESOLVE_CSS_VARS
-} from './runtimeHelpers'
+import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
 import { ssrProcessIf } from './transforms/ssrVIf'
 import { ssrProcessFor } from './transforms/ssrVFor'
 import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
@@ -40,7 +36,7 @@ import { createSSRCompilerError, SSRErrorCodes } from './errors'
 export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   const context = createSSRTransformContext(ast, options)
 
-  // inject <style vars> resolution
+  // inject SFC <style> CSS variables
   // we do this instead of inlining the expression to ensure the vars are
   // only resolved once per render
   if (options.ssrCssVars) {
@@ -49,12 +45,7 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
       createTransformContext(createRoot([]), options)
     )
     context.body.push(
-      createCompoundExpression([
-        `const _cssVars = _${ssrHelpers[SSR_RESOLVE_CSS_VARS]}(`,
-        varsExp,
-        options.scopeId ? `, ${JSON.stringify(options.scopeId)}` : ``,
-        `)`
-      ])
+      createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
     )
   }
 

packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts

@@ -6,9 +6,9 @@ import {
   createSimpleExpression,
   RootNode,
   TemplateChildNode,
-  findDir
+  findDir,
+  isBuiltInType
 } from '@vue/compiler-dom'
-import { SSR_RESOLVE_CSS_VARS } from '../runtimeHelpers'
 
 export const ssrInjectCssVars: NodeTransform = (node, context) => {
   if (!context.ssrCssVars) {
@@ -27,8 +27,6 @@ export const ssrInjectCssVars: NodeTransform = (node, context) => {
     return
   }
 
-  context.helper(SSR_RESOLVE_CSS_VARS)
-
   if (node.type === NodeTypes.IF_BRANCH) {
     for (const child of node.children) {
       injectCssVars(child)
@@ -45,13 +43,27 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
       node.tagType === ElementTypes.COMPONENT) &&
     !findDir(node, 'for')
   ) {
-    node.props.push({
-      type: NodeTypes.DIRECTIVE,
-      name: 'bind',
-      arg: undefined,
-      exp: createSimpleExpression(`_cssVars`, false),
-      modifiers: [],
-      loc: locStub
-    })
+    if (isBuiltInType(node.tag, 'Suspense')) {
+      for (const child of node.children) {
+        if (
+          child.type === NodeTypes.ELEMENT &&
+          child.tagType === ElementTypes.TEMPLATE
+        ) {
+          // suspense slot
+          child.children.forEach(injectCssVars)
+        } else {
+          injectCssVars(child)
+        }
+      }
+    } else {
+      node.props.push({
+        type: NodeTypes.DIRECTIVE,
+        name: 'bind',
+        arg: undefined,
+        exp: createSimpleExpression(`_cssVars`, false),
+        modifiers: [],
+        loc: locStub
+      })
+    }
   }
 }