search

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

improve auto generated conditional class names #161

Open jantimon opened 1 month ago

jantimon commented 1 month ago

right now we generate class names for binary expressions

e.g. 

const Button styled.button`
  ${({$primary}) => $primary ? css`color:red` : css`color:blue`};
`

becomes Button__primary or Button__not-primary

we should also extend that for string and number values

e.g.:

const Button styled.button`
  ${({$variant}) => $variant === 'primary' ? css`color:red` : css`color:blue`};
`

could become Button__variant-primary or Button__variant-not-primary