allow css unit postfixes
jantimon opened this issue · 0 comments
jantimon commented
next-yak converts expressions compiles runtime values like padding: ${size}rem;
to padding: var(--value)rem;
unfortunately this is invalid css. the unit must be part of the variable value e.g. padding: var(--value);
right now the user has to write padding: ${size + "rem"};
which is not intuitive
therefore we should support padding: ${size}rem;
by trying to detect the unit automatically
Cases:
const case1 = css`${4}px`
const case2 = css`${({$indent}) => $indent > 4 ? 10 : $indent}px`
const case3 = css`${({$indent}) => {
if ($indent > 4) return 10;
return $indent
}}px`