feat: ssr support for <style vars>

packages/compiler-ssr/src/index.ts

@@ -24,6 +24,7 @@ import { ssrTransformFor } from './transforms/ssrVFor'
 import { ssrTransformModel } from './transforms/ssrVModel'
 import { ssrTransformShow } from './transforms/ssrVShow'
 import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttrs'
+import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
 
 export function compile(
   template: string,
@@ -57,6 +58,7 @@ export function compile(
       transformExpression,
       ssrTransformSlotOutlet,
       ssrInjectFallthroughAttrs,
+      ssrInjectCssVars,
       ssrTransformElement,
       ssrTransformComponent,
       trackSlotScopes,

packages/compiler-ssr/src/runtimeHelpers.ts

@@ -16,6 +16,7 @@ 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`,
@@ -33,7 +34,8 @@ export const ssrHelpers = {
   [SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
   [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
   [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
-  [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
+  [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
+  [SSR_RESOLVE_CSS_VARS]: `ssrResolveCssVars`
 }
 
 // Note: these are helpers imported from @vue/server-renderer

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -11,10 +11,19 @@ import {
   CompilerOptions,
   IfStatement,
   CallExpression,
-  isText
+  isText,
+  processExpression,
+  createSimpleExpression,
+  createCompoundExpression,
+  createTransformContext,
+  createRoot
 } from '@vue/compiler-dom'
 import { isString, escapeHtml } from '@vue/shared'
-import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
+import {
+  SSR_INTERPOLATE,
+  ssrHelpers,
+  SSR_RESOLVE_CSS_VARS
+} from './runtimeHelpers'
 import { ssrProcessIf } from './transforms/ssrVIf'
 import { ssrProcessFor } from './transforms/ssrVFor'
 import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
@@ -30,6 +39,25 @@ import { createSSRCompilerError, SSRErrorCodes } from './errors'
 
 export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   const context = createSSRTransformContext(ast, options)
+
+  // inject <style vars> resolution
+  // we do this instead of inlining the expression to ensure the vars are
+  // only resolved once per render
+  if (options.ssrCssVars) {
+    const varsExp = processExpression(
+      createSimpleExpression(options.ssrCssVars, false),
+      createTransformContext(createRoot([]), options)
+    )
+    context.body.push(
+      createCompoundExpression([
+        `const _cssVars = ${ssrHelpers[SSR_RESOLVE_CSS_VARS]}(`,
+        varsExp,
+        options.scopeId ? `, ${JSON.stringify(options.scopeId)}` : ``,
+        `)`
+      ])
+    )
+  }
+
   const isFragment =
     ast.children.length > 1 && ast.children.some(c => !isText(c))
   processChildren(ast.children, context, isFragment)

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

@@ -0,0 +1,57 @@
+import {
+  NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  locStub,
+  createSimpleExpression,
+  RootNode,
+  TemplateChildNode,
+  findDir
+} from '@vue/compiler-dom'
+import { SSR_RESOLVE_CSS_VARS } from '../runtimeHelpers'
+
+export const ssrInjectCssVars: NodeTransform = (node, context) => {
+  if (!context.ssrCssVars) {
+    return
+  }
+
+  // _cssVars is initailized once per render function
+  // the code is injected in ssrCodegenTrasnform when creating the
+  // ssr transform context
+  if (node.type === NodeTypes.ROOT) {
+    context.identifiers._cssVars = 1
+  }
+
+  const parent = context.parent
+  if (!parent || parent.type !== NodeTypes.ROOT) {
+    return
+  }
+
+  context.helper(SSR_RESOLVE_CSS_VARS)
+
+  if (node.type === NodeTypes.IF_BRANCH) {
+    for (const child of node.children) {
+      injectCssVars(child)
+    }
+  } else {
+    injectCssVars(node)
+  }
+}
+
+function injectCssVars(node: RootNode | TemplateChildNode) {
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    (node.tagType === ElementTypes.ELEMENT ||
+      node.tagType === ElementTypes.COMPONENT) &&
+    !findDir(node, 'for')
+  ) {
+    node.props.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'bind',
+      arg: undefined,
+      exp: createSimpleExpression(`_cssVars`, false),
+      modifiers: [],
+      loc: locStub
+    })
+  }
+}