transform styled dom component usage for improved performance

[Jan Nicklas (jantimon)]

When looking at the minified next-yak usages I had an idea for a smaller bundle size

Initially, we transformed the imports from:

import { styled } from "next-yak";
const Button = styled.button`color: red`;

to:

import { __yakButton } from "next-yak/internal";
const Button = __yakButton("Button");

This worked well - but unfortunately we noticed that Webpack was wrapping our function calls with (0, __yakButton) to ensure proper this binding..

After we learned that additional transform we went a step further - Instead of individual imports, we now use:

import * as __yak from "next-yak/internal";
const Button = __yak.__yakButton("Button");

This eliminates the need for webpack's this binding wrapper and once minified results in output like a.b("button")

Example App Build Size
before (main + next15 + react19)

Route (app)                              Size     First Load JS
┌ ○ /                                    3.28 kB         103 kB
├ ○ /_not-found                          899 B           101 kB
├ ○ /keyframes                           2.29 kB         102 kB
└ ○ /order                               1.54 kB         102 kB
+ First Load JS shared by all            100 kB
  ├ chunks/18aa1bd3-4741c29c83fa99c2.js  52.5 kB
  ├ chunks/403-2dffffd4e9af9212.js       45.6 kB
  └ other shared chunks (total)          1.94 kB

after

Route (app)                              Size     First Load JS
┌ ○ /                                    1.63 kB         104 kB
├ ○ /_not-found                          896 B           101 kB
├ ○ /keyframes                           557 B           103 kB
└ ○ /order                               1.6 kB          102 kB
+ First Load JS shared by all            100 kB
  ├ chunks/33ec684a-c8b3128d1b2f1c72.js  52.5 kB
  ├ chunks/837-3f0abb390c7a0265.js       45.6 kB
  └ other shared chunks (total)          1.94 kB

[codspeed-hq]

CodSpeed Performance Report

Merging #154 will not alter performance

_{Comparing feature/styled-dom (b613991) with main (07bed79)}

Summary

✅ 2 untouched benchmarks

[changeset-bot]

🦋 Changeset detected

Latest commit: b613991

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
next-yak	Minor
yak-swc	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Jan Nicklas (jantimon)]

The example app fails because of styled.input.attrs (which should probably be compiled to __yak_input.attrs)