Support Inline Calculations in CSS Template Literals

[jantimon]

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:

• To document the math behind certain values (e.g. ${spacing * 2}px is clearer than 16px)
• To derive values from constants for consistency
• To handle aspect ratios and scaling

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:

• They only involve numbers and arithmetic operators (+, -, *, /)
• All variables used are constants