feat: ssr support for <style vars>

packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts

@@ -0,0 +1,99 @@
+import { compile } from '../src'
+
+describe('ssr: inject <style vars>', () => {
+  test('basic', () => {
+    expect(
+      compile(`<div/>`, {
+        ssrCssVars: `{ color }`
+      }).code
+    ).toMatchInlineSnapshot(`
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
+      }"
+    `)
+  })
+
+  test('fragment', () => {
+    expect(
+      compile(`<div/><div/>`, {
+        ssrCssVars: `{ color }`
+      }).code
+    ).toMatchInlineSnapshot(`
+      "const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+        _push(\`<!--[--><div\${
+          _ssrRenderAttrs(_cssVars)
+        }></div><div\${
+          _ssrRenderAttrs(_cssVars)
+        }></div><!--]-->\`)
+      }"
+    `)
+  })
+
+  test('passing on to components', () => {
+    expect(
+      compile(`<div/><foo/>`, {
+        ssrCssVars: `{ color }`
+      }).code
+    ).toMatchInlineSnapshot(`
+      "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
+      const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_foo = _resolveComponent(\\"foo\\")
+
+        const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+        _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
+        _push(_ssrRenderComponent(_component_foo, _cssVars, null, _parent))
+        _push(\`<!--]-->\`)
+      }"
+    `)
+  })
+
+  test('v-if branches', () => {
+    expect(
+      compile(`<div v-if="ok"/><template v-else><div/><div/></template>`, {
+        ssrCssVars: `{ color }`
+      }).code
+    ).toMatchInlineSnapshot(`
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+        if (_ctx.ok) {
+          _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
+        } else {
+          _push(\`<!--[--><div\${
+            _ssrRenderAttrs(_cssVars)
+          }></div><div\${
+            _ssrRenderAttrs(_cssVars)
+          }></div><!--]-->\`)
+        }
+      }"
+    `)
+  })
+
+  test('w/ scopeId', () => {
+    expect(
+      compile(`<div/>`, {
+        ssrCssVars: `{ color }`,
+        scopeId: 'data-v-foo'
+      }).code
+    ).toMatchInlineSnapshot(`
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _cssVars = ssrResolveCssVars({ color: _ctx.color }, \\"data-v-foo\\")
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))} data-v-foo></div>\`)
+      }"
+    `)
+  })
+})

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
+    })
+  }
+}