speed up runtime by removing the styled proxy

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

speed up runtime by removing the styled proxy #84

Open jantimon opened 4 months ago

jantimon commented 4 months ago

Right now in next-yak, we use Proxy to provide the same API like styled components.
It lets devs write code like styled.div to style any html element tag or even custom elements.

Unfortunately according to https://romgrk.com/posts/optimizing-javascript proxies prevent compiler optimization and therefore might slow down our runtime during SSR and hydration.

As next-yak compiles the code anyway we can change the components from styled.div`... to styled("div", ...).

jantimon commented 1 month ago

probably we could go a step further:

import { styled } from "next-yak";

const Button = styled.button`...`

could be compiled to (at least for all currently known tags)

import { _styled_button } from "next-yak/internal";

const Button = _styled_button`...`

This would:

minify even better (c.button becomes just n)
reduce garbage collection as factories stay defined
dead code eliminate unused tags
dead code eliminate the proxy (if only known tags are used)