vuejs
Document SFC CSS v-bind types behavior
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.
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`)
Based on what's currently documented, the 'correct' way to do this would be:
font-size: v-bind('size + "px"')
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
