From 2024d11db03d9c6e49e20b3355f3df0ba04bb834 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 29 Aug 2022 11:09:21 +0800
Subject: [PATCH] fix(ssr): forward helpers provided by CSS `v-bind` (#6489)

fix #6201
---
 .../__tests__/ssrInjectCssVars.spec.ts        | 22 +++++++++++++++++++
 .../compiler-ssr/src/ssrCodegenTransform.ts   |  6 ++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index b2e5b44518d..97df3045c67 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,25 @@ 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),
+        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 =