transform styled dom component usage for improved performance (#154)

Co-authored-by: Gabriel Nadler <gabriel.nadler@digitecgalaxus.ch>

Author: jantimon

.changeset/three-bikes-sit.md

@@ -0,0 +1,6 @@
+---
+"next-yak": minor
+"yak-swc": minor
+---
+
+improve bundle size by compiling styled.TAG_NAME

.github/workflows/codspeed.yml

@@ -76,7 +76,7 @@ jobs:
         run: cd packages/benchmarks && pnpm run codspeed
 
       - name: Run benchmarks
-        uses: CodSpeedHQ/action@v2
+        uses: CodSpeedHQ/action@v3
         with:
           working-directory: "packages/benchmarks"
           run: NODE_ENV=production node --enable-source-maps ./codspeed/dist/index.bench.mjs

packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx

@@ -1,5 +1,6 @@
 import { styled, css } from "next-yak/internal";
 import { colors, negative, siteMaxWidth } from "./constants";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
 .Button {
@@ -13,7 +14,7 @@ export var Button = /*YAK Extracted CSS:
   color: --yak-css-import: url("./constants:colors:secondary",mixin);
   background-color: --yak-css-import: url("./constants:colors:primary",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) {
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button, function(param) {
     var $variant = param.$variant;
     return $variant === "secondary" && /*#__PURE__*/ css(__styleYak.Button__);
 });

packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx

@@ -1,9 +1,10 @@
 import { styled } from "next-yak/internal";
 import { colors } from "./constants";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
 .Button {
   color: --yak-css-import: url("./constants:colors:primary",mixin);
   background-color: --yak-css-import: url("./constants:colors:secondary",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button);

packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx

@@ -1,9 +1,10 @@
 import { styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css";
 export var Icon = /*YAK Extracted CSS:
 .Icon {
   display: inline-block;
   width: 20px;
   height: 20px;
 }
-*/ /*#__PURE__*/ styled.span(__styleYak.Icon);
+*/ /*#__PURE__*/ __yak.__yak_span(__styleYak.Icon);

packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx

@@ -1,12 +1,13 @@
 import { styled } from "next-yak/internal";
 import { buttonMixin } from './mixin';
 import { primaryButtonMixin } from './helper/anotherMixin';
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
 .Button {
   --yak-css-import: url("./mixin:buttonMixin",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button);
 export var PrimaryButton = /*YAK Extracted CSS:
 .PrimaryButton {
   --yak-css-import: url("./helper/anotherMixin:primaryButtonMixin",mixin);

packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx

@@ -1,4 +1,5 @@
 import { styled, css } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 var buttonTextMixin = /*#__PURE__*/ css(function(param) {
     var $disabled = param.$disabled;
@@ -17,7 +18,7 @@ var Button = /*YAK Extracted CSS:
 .Button__$disabled-01 {
   color: gray;
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) {
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button, function(param) {
     var $disabled = param.$disabled;
     return $disabled && /*#__PURE__*/ css(__styleYak.Button__$disabled);
 }, function(param) {

packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx

@@ -1,4 +1,5 @@
 import { styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css";
-export var Icon = /*#__PURE__*/ styled.svg();
-export var AnyIcon = /*#__PURE__*/ styled.svg();
+export var Icon = /*#__PURE__*/ __yak.__yak_svg();
+export var AnyIcon = /*#__PURE__*/ __yak.__yak_svg();

packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx

@@ -1,5 +1,6 @@
 import { styled } from "next-yak/internal";
 import { AnyIcon, Icon } from "./icon";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
 .Button {
@@ -10,4 +11,4 @@ export var Button = /*YAK Extracted CSS:
     margin-right: 15px;
   }
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button);

packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx

@@ -1,5 +1,6 @@
 import { styled } from "next-yak/internal";
 import { lastChildMixin } from './mixin';
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 var ListItem = /*YAK Extracted CSS:
 .ListItem {
@@ -8,5 +9,5 @@ var ListItem = /*YAK Extracted CSS:
     --yak-css-import: url("./mixin:lastChildMixin",mixin);
   }
 }
-*/ /*#__PURE__*/ styled.li(__styleYak.ListItem);
+*/ /*#__PURE__*/ __yak.__yak_li(__styleYak.ListItem);
 export default ListItem;