Document SFC CSS v-bind types behavior

[segevfiner]

What problem does this feature solve?

SFC CSS support a v-bind function for passing data from the components to its associated CSS. But the behavior in regards to CSS types is not documented. https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

CSS uses various types apart from just plain numbers and string literals, such as units (px, em, rem, etc), which are not obvious how to correctly use with v-bind. I believe this should be documented and explained how to handle correctly in the official docs.

What does the proposed API look like?

Updated documentation.

[skirtles-code]

Agreed. I've seen people ask about this several times on Vue Land. Typically people expect to be able to do something like this:

font-size: v-bind(size) + 'px';    

That won't work.

Wrapping the value in backticks does work, though I'm unclear whether this is official supported or just an accident of the implementation:

font-size: v-bind(`${size}px`)    

Playground

Based on what's currently documented, the 'correct' way to do this would be:

font-size: v-bind('size + "px"')

Playground

Or even font-size: v-bind('`${size}px`').

But this is not obvious.

The tests for this in the core repo make for interesting reading too:

https://github.com/vuejs/core/blob/main/packages/compiler-sfc/__tests__/cssVars.spec.ts#L202