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

add Build-time Evaluation for CSS Calculations #175

Closed jantimon closed 6 days ago

jantimon commented 6 days ago

This PR adds support for evaluating simple calculations in CSS template literals at build time, improving runtime performance while maintaining code readability.

Changes

Examples

// Input
const theme = {
  spacing: {
    base: 8,
    lg: 16
  }
};

const Container = styled.div`
  /* Simple calculations */
  width: ${300 / 2}px;
  height: ${40 * 3}px;

  /* With constants */
  padding: ${theme.spacing.base * 2}px ${theme.spacing.lg * 1.5}px;

  /* With parentheses */
  margin: ${(theme.spacing.base + 4) * 2}px;
`;

// Output (after build)
const Container = styled.div`
  width: 150px;
  height: 120px;
  padding: 16px 24px;
  margin: 24px;
`;

Performance Impact

Notes

Fixes #174