transform styled dom component usage for improved performance

.changeset/three-bikes-sit.md

@@ -0,0 +1,6 @@
+---
+"next-yak": minor
+"yak-swc": minor
+---
+
+compile styled.TAG_NAME for better runtime performance

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;

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

@@ -1,9 +1,10 @@
 import { styled } from "next-yak/internal";
 import { siteMaxWidth } from "./constants.yak";
+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: red;
   height: --yak-css-import: url("./constants.yak:siteMaxWidth",mixin)px;
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button);

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

@@ -1,15 +1,16 @@
 import { styled } from "next-yak/internal";
 import { typography } from "./typography.yak";
+import * as __yak from "next-yak/internal";
 import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Headline = /*YAK Extracted CSS:
 .Headline {
   color: red;
   --yak-css-import: url("./typography.yak:typography:h1",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Headline);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Headline);
 export var Button = /*YAK Extracted CSS:
 .Button {
   color: red;
   --yak-css-import: url("./typography.yak:typography:h3",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ __yak.__yak_button(__styleYak.Button);

packages/next-yak/package.json

@@ -3,6 +3,7 @@
   "version": "4.0.0",
   "type": "module",
   "types": "./dist/",
+  "sideEffects": false,
   "license": "MIT",
   "description": "next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration",
   "homepage": "https://yak.js.org/",

packages/next-yak/runtime/__tests__/attrs.test.tsx

@@ -2,7 +2,19 @@ import React, { FunctionComponent } from "react";
 import { render } from "@testing-library/react";
 import { beforeEach, expect, describe, it, vi } from "vitest";
 import { YakThemeProvider } from "../context";
-import { styled } from "../styled";
+import { styled as styledFn } from "../styled";
+
+// This transform is usually done by the SWC plugin.
+// However this `attrs.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  h1: styledFn("h1"),
+  button: styledFn("button"),
+  a: styledFn("a"),
+  p: styledFn("p"),
+  span: styledFn("span"),
+}) as typeof styledFn;
 
 beforeEach(() => {
   vi.spyOn(console, "warn");

packages/next-yak/runtime/__tests__/styled.test.tsx

@@ -7,7 +7,16 @@ import React from "react";
 import { expect, it } from "vitest";
 import { YakThemeProvider } from "../context";
 import { css } from "../cssLiteral";
-import { styled } from "../styled";
+import { styled as styledFn } from "../styled";
+
+// This transform is usually done by the SWC plugin.
+// However this `styled.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  input: styledFn("input"),
+  a: styledFn("a"),
+}) as typeof styledFn;
 
 it("should render a literal element", () => {
   const Component = styled.input``;
@@ -185,7 +194,9 @@ it("should allow falsy values", () => {
 });
 
 it("should execute runtime styles recursively", () => {
-  const Component = styled.input<{ $testProp: boolean }>(
+  const Component = styled.input<{
+    $testProp: boolean;
+  }>(
     ({ $testProp }) =>
       $testProp &&
       css(

packages/next-yak/runtime/internal.ts

@@ -35,3 +35,6 @@ export { useTheme, YakThemeProvider } from "next-yak/context";
 // runtime internals (helpers which get injected by the compiler)
 export { unitPostFix as __yak_unitPostFix } from "./internals/unitPostFix.js";
 export { mergeCssProp as __yak_mergeCssProp } from "./internals/mergeCssProp.js";
+
+// export shorthand for DOM styled components (e.g. for styled.div)
+export * from "./styledDom.js";

packages/next-yak/runtime/mocks/styled.ts

@@ -1 +1,8 @@
-export * from "../styled.js";
+import React from "react";
+import { styled as StyledFactory } from "../styled.js";
+
+export const styled = new Proxy(StyledFactory, {
+  get(target, TagName: keyof React.JSX.IntrinsicElements) {
+    return target(TagName);
+  },
+}) as typeof StyledFactory;

packages/next-yak/runtime/styled.tsx

@@ -59,7 +59,7 @@ type Attrs<
 > = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;
 
 //
-// The `styled()` and `styled.` API
+// The `styled()` API without `styled.` syntax
 //
 // The API design is inspired by styled-components:
 // https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx
@@ -247,7 +247,8 @@ type StyledLiteral<T> = <TCSSProps>(
  * `;
  * ```
  */
-export const styled = new Proxy(
+export const styled =
+  // this type is wrong - but it will work correctly with compiled code
   StyledFactory as typeof StyledFactory & {
     [Tag in HtmlTags]: StyledLiteral<React.JSX.IntrinsicElements[Tag]> & {
       attrs: <
@@ -262,13 +263,7 @@ export const styled = new Proxy(
         Substitute<React.JSX.IntrinsicElements[Tag], TAttrsIn>
       >;
     };
-  },
-  {
-    get(target, TagName: keyof React.JSX.IntrinsicElements) {
-      return target(TagName);
-    },
-  },
-);
+  };
 
 /**
  * Remove all entries that start with a $ sign