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

transform styled dom component usage for improved performance #154

Open jantimon opened 2 months ago

jantimon commented 2 months ago

This is a nice to have performance optimizations by transforming the following code:

From:

import { styled } from "next-yak";
const button = styled.button`...`

To:

import { __yak_button } from "next-yak/internal";
const button = __yak_button`...`

Benefits:

  1. Reduces runtime overhead by eliminating proxy object property lookup
  2. Enables better tree-shaking, potentially reducing bundle size
  3. Improves minification efficiency

This optimization could lead to faster execution and smaller bundle sizes, especially beneficial for large applications with many styled components.

codspeed-hq[bot] commented 2 months ago

CodSpeed Performance Report

Merging #154 will not alter performance

Comparing feature/styled-dom (60058eb) with main (4a7ff24)

Summary

✅ 2 untouched benchmarks