Dynamic styling example in docs doesn't work

[dugip]

Talking about this page here: https://macaron.js.org/docs/dynamic-styling

It claims that colorVar would produce a string like --my-var, but instead it produces var(--my-var), which when passed as a style prop, would result in:

<span style={{ [colorVar]: '123px' }}></span>

<span style="var(--my-var): 123px"></span>

Which is obviously wrong and wont work.

To fix this, createVar should return only the variable name without the var() wrap, perhaps something like:

const { varDeclaration, varName } = createVar();

// varDeclaration: var(--my-var)
// varName: --my-var

[dugip]

@Mokshit06 Any thoughts on this one? I might be able to support with a PR, but I'd like to see what you're thinking about this one.

[Mokshit06]

Thanks for reporting this. That is in fact an issue with the docs, rather than just being style={ [colorVar]: val } it should be style={assignInlineVars({ [colorVar]: val })} as shown here in vanilla-extract docs https://vanilla-extract.style/documentation/packages/dynamic/#assigninlinevars

[dugip]

@Mokshit06 Macaron doesn't export this function. It seems like it comes from @vanilla-extract/dynamic. Could you please make a release that exports it?

[Mokshit06]

Released in v1.2.0!