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
108 stars 2 forks source link

tree-shaking #87

Closed jantimon closed 4 months ago

jantimon commented 4 months ago

add /*#__PURE__ */ to hide

https://play.swc.rs/?version=1.3.100&code=H4sIAAAAAAAAA0vOzysuUUhUsFXQ11JIrFDQ0tfXUo6PDwgNco2PB%2FMgohUamtZcyWDFqWDFyIoqEZLJQMkqEJerPDMvJb9cLzs1tQAolmoNALpqo%2BRqAAAA&config=H4sIAAAAAAAAA02NSw7DIAxE95wCed1F21XVO%2FQQiDoRFT9hRyqKuHuAkLQ7zxvPzCqkhA9peMq1nlVElQjTqSuh7Fl9KwHOEUknExkuh8vUrElZwo7K7gCrNCO3FNL9enuMBNgQCI%2FEYM54M%2BX%2FTR1cTEjUWDm3nPKzxc72LTH2fg2clt4Khl7hvfTvxkTZAFqflY3rAAAA

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
yacijs ✅ Ready (Inspect) Visit Preview Apr 15, 2024 0:35am
codspeed-hq[bot] commented 4 months ago

CodSpeed Performance Report

Merging #87 will not alter performance

Comparing tree-shaking (4115a70) with main (3240e35)

Summary

✅ 2 untouched benchmarks

Mad-Kat commented 4 months ago

What would happen if we have the following case:

import { css } from "next-yak";

let globalCounter = 0;

const headline = css\`
  color: red;
  \${globalCounter++ && css\`
    color: blue;
  \`}
\`;

This would result in something like this:

import { css } from "next-yak";

let globalCounter = 0;

const headline =
/*YAK Extracted CSS:
...some css*/
/*#__PURE__*/
css(__styleYak.headline, globalCounter++ && css(__styleYak.headline__headline));

Pure wouldn't mean pure here 😄

jantimon commented 4 months ago

SWC Demo

Your example would work - the minifier removes everything but globalCounter: shot-7sVWJbkc@2x