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

Support Inline Calculations in CSS Template Literals #174

Closed jantimon closed 6 days ago

jantimon commented 6 days ago

When using styled components with next-yak, I often find myself wanting to do simple calculations inline to make my styles more maintainable and self-documenting. Currently, these calculations are only evaluated at runtime and won't work at next-yak

Example

const spacing = 8;
const Container = styled.div`
  /* Currently requires runtime evaluation */
  padding: ${spacing * 2}px ${spacing * 4}px;
  width: ${300 / 2}px;
  height: ${40 * 3}px;

  /* Would be great if this compiled to: */
  padding: 16px 32px;
  width: 150px;
  height: 120px;
`

calculations are often used to:

Current Workaround

Currently, I have to pre-calculate these values manually or accept the runtime performance cost. Neither is ideal for maintainability or performance.

It would be great if next-yak could evaluate simple calculations at build time when: