jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
118 stars 4 forks source link

Extract css units in css expressions automatically #64

Closed rvetere closed 8 months ago

rvetere commented 8 months ago

fixes #54

vercel[bot] commented 8 months ago

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] commented 8 months ago

CodSpeed Performance Report

Merging #64 will not alter performance

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

Summary

✅ 2 untouched benchmarks

jantimon commented 8 months ago

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;