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

inline negative numbers #192

Closed jantimon closed 18 hours ago

jantimon commented 18 hours ago

currently negative numbers in styled components were being converted to CSS variables and evaluated at runtime, even though they are constant values

This PR fixes this by inlining negative numbers directly into the CSS output

For example:

const Button = styled.button`
  margin-top: ${-1}px;
`;

Now correctly outputs:

.Button_xyz {
  margin-top: -1px;
}

Instead of using CSS variables and runtime evaluation

Fixes #191