jantimon/next-yak

allow css unit postfixes

jantimon opened this issue · 0 comments

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`