Extract css units in css expressions automatically

[rvetere]

• [x] Only solve complex arrow functions with the "unitPostFix" helper (BlockStatement inside body)
• [x] Cleanup code - simplify transform expression function, Identifier is not needed anymore we think
• [x] Use the Set pattern for helpers everywhere
• [x] Add more testcases (check if all have valid css :D)
• [x] Add better titles to testcases

fixes #54

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
yacijs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2024 3:56pm

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #64 will not alter performance

_{Comparing units-in-css-expressions (d553ca2) with main (439e1a3)}

Summary

✅ 2 untouched benchmarks

[jantimon]

please add tests for those cases:

const case1 = css`${4}px`

const case2 = css`${size}px`

const case3 = css`${({$indent}) => $indent > 4 ? 10 : $indent}px`

const case4 = css`${({$indent}) => {
  if ($indent > 4) return 10;
  return $indent
}}px`

One idea if we cant fix case3 (or even more complicated cases):

({$indent}) => {
  if ($indent > 4) return 10;
  return $indent
}

for properties an expression is a function which returns a number or string

we could add a helper which executes this function and appends the unit afterwards e.g.:

const __yakAppendUnit = ( baseFunction, unit ) => {
   // create a new function which accepts the same args as `baseFunction`:
   return (...args) => {
      // execute the baseFunction
      const baseFunctionResult = baseFunction(...args);
      // add the unit
      return baseFunctionResult + unit
  }
}

that way we could solve even the most complicated cases:

const case4 = css`${__yakAppendUnit(

({$indent}) => {
  if ($indent > 4) return 10;
  return $indent
}

, "px")}`

site note - the helper function could also be written as:

const __yakAppendUnit = ( fn, unit ) => (...args) => fn(...args) + unit;