From 6d427f2300fac03db661763b9b70b0877d2203d9 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 17 Aug 2022 14:51:43 +0800
Subject: [PATCH 1/2] chore: init case

---
 .../__tests__/ssrInjectCssVars.spec.ts        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index b2e5b44518d..7429649efdf 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -1,3 +1,4 @@
+import { BindingTypes } from '@vue/compiler-dom'
 import { compile } from '../src'
 
 describe('ssr: inject <style vars>', () => {
@@ -111,4 +112,24 @@ describe('ssr: inject <style vars>', () => {
       }"
     `)
   })
+
+  test('inject helpers', () => {
+    const result = compile(`<div/>`, {
+      inline: true,
+      bindingMetadata: { dynamic: BindingTypes.SETUP_MAYBE_REF },
+      ssrCssVars: '{ "--hash": (dynamic) }'
+    })
+
+    expect(result.code).toMatchInlineSnapshot(`
+      "(_ctx, _push, _parent, _attrs) => {
+        const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
+      }"
+    `)
+    expect(result.ast.helpers).toMatchInlineSnapshot(`
+      Array [
+        Symbol(mergeProps),
+      ]
+    `)
+  })
 })

From 76d0c53d41b80d0aca94b5f7fda125927b1fc409 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 17 Aug 2022 14:56:17 +0800
Subject: [PATCH 2/2] fix(ssr): forward helpers provided by CSS `v-bind`

---
 packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts | 1 +
 packages/compiler-ssr/src/ssrCodegenTransform.ts         | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index 7429649efdf..97df3045c67 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -129,6 +129,7 @@ describe('ssr: inject <style vars>', () => {
     expect(result.ast.helpers).toMatchInlineSnapshot(`
       Array [
         Symbol(mergeProps),
+        Symbol(unref),
       ]
     `)
   })
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index a7f3ada15b4..755862b5232 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -40,13 +40,17 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   // we do this instead of inlining the expression to ensure the vars are
   // only resolved once per render
   if (options.ssrCssVars) {
+    const cssContext = createTransformContext(createRoot([]), options)
     const varsExp = processExpression(
       createSimpleExpression(options.ssrCssVars, false),
-      createTransformContext(createRoot([]), options)
+      cssContext
     )
     context.body.push(
       createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
     )
+    Array.from(cssContext.helpers.keys()).forEach(helper =>
+      ast.helpers.push(helper)
+    )
   }
 
   const isFragment =