fix(ssr): forward helpers provided by CSS v-bind (#6489)

fix #6201
This commit is contained in:
Anthony Fu 2022-08-29 11:09:21 +08:00 committed by GitHub
parent 81a7819535
commit 2024d11db0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 1 deletions

View File

@ -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),
]
`)
})
})

View File

@ -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 =