add own class name hashing

.changeset/tender-tomatoes-rescue.md

@@ -0,0 +1,6 @@
+---
+"yak-swc": minor
+"next-yak": minor
+---
+
+minify class names for production builds

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

@@ -1,19 +1,21 @@
 import { styled, css } from "next-yak/internal";
 import { colors, negative, siteMaxWidth } from "./constants";
-import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_wIxfWW) {
   color: red;
   height: --yak-css-import: url("./constants:siteMaxWidth",mixin)px;
   color: --yak-css-import: url("./constants:colors:primary",mixin);
   background-color: --yak-css-import: url("./constants:colors:secondary",mixin);
   z-index: --yak-css-import: url("./constants:negative",mixin);
 }
-.Button__ {
+// cssmodules-pure-ignore
+:global(.Button___wIxfWW) {
   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__*/ styled.button("Button_wIxfWW", function(param) {
     var $variant = param.$variant;
-    return $variant === "secondary" && /*#__PURE__*/ css(__styleYak.Button__);
+    return $variant === "secondary" && /*#__PURE__*/ css("Button___wIxfWW");
 });

packages/cross-file-tests/__tests__/fixtures/constant/output/index.yak.module.css

@@ -1,11 +1,13 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_wIxfWW) {
   color: red;
   height: 10px;
   color: var(--color-primary);
   background-color: var(--color-secondary);
   z-index: -1;
 }
-.Button__ {
+/* cssmodules-pure-ignore * /
+:global(.Button___wIxfWW) {
   color: var(--color-secondary);
   background-color: var(--color-primary);
 }

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 __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_bAtfrp) {
   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__*/ styled.button("Button_bAtfrp");

packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.yak.module.css

@@ -1,4 +1,5 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_bAtfrp) {
   color: var(--color-primary);
   background-color: var(--color-secondary);
 }

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

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

packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.yak.module.css

@@ -1,4 +1,5 @@
-.Icon {
+/* cssmodules-pure-ignore * /
+:global(.Icon_je4Wtv) {
   display: inline-block;
   width: 20px;
   height: 20px;

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

@@ -1,14 +1,16 @@
 import { styled } from "next-yak/internal";
 import { buttonMixin } from './mixin';
 import { primaryButtonMixin } from './helper/anotherMixin';
-import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_oPtJMe) {
   --yak-css-import: url("./mixin:buttonMixin",mixin);
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ styled.button("Button_oPtJMe");
 export var PrimaryButton = /*YAK Extracted CSS:
-.PrimaryButton {
+// cssmodules-pure-ignore
+:global(.PrimaryButton_oPtJMe) {
   --yak-css-import: url("./helper/anotherMixin:primaryButtonMixin",mixin);
 }
-*/ /*#__PURE__*/ styled(Button)(__styleYak.PrimaryButton);
+*/ /*#__PURE__*/ styled(Button)("PrimaryButton_oPtJMe");

packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.yak.module.css

@@ -1,11 +1,13 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_oPtJMe) {
   color: black;
 :global(.icon_Icon__vdEsc) {
   color: black;
 }
 
 }
-.PrimaryButton {
+/* cssmodules-pure-ignore * /
+:global(.PrimaryButton_oPtJMe) {
   color: black;
 :global(.icon_Icon__vdEsc) {
   color: black;

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

@@ -1,30 +1,34 @@
 import { styled, css } from "next-yak/internal";
-import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 var buttonTextMixin = /*#__PURE__*/ css(function(param) {
     var $disabled = param.$disabled;
-    return $disabled && /*#__PURE__*/ css(__styleYak.buttonTextMixin__$disabled);
+    return $disabled && /*#__PURE__*/ css("buttonTextMixin__$disabled_xEUJ1U");
 });
 var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_xEUJ1U) {
   color: black;
 }
-.Button__$disabled {
+// cssmodules-pure-ignore
+:global(.Button__$disabled_xEUJ1U) {
   opacity: 0.5;
 }
-.Button__$hasIcon {
+// cssmodules-pure-ignore
+:global(.Button__$hasIcon_xEUJ1U) {
   padding-left: 30px;
 }
-.Button__$disabled-01 {
+// cssmodules-pure-ignore
+:global(.Button__$disabled_xEUJ1U-01) {
   color: gray;
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) {
+*/ /*#__PURE__*/ styled.button("Button_xEUJ1U", function(param) {
     var $disabled = param.$disabled;
-    return $disabled && /*#__PURE__*/ css(__styleYak.Button__$disabled);
+    return $disabled && /*#__PURE__*/ css("Button__$disabled_xEUJ1U");
 }, function(param) {
     var $hasIcon = param.$hasIcon;
-    return $hasIcon && /*#__PURE__*/ css(__styleYak.Button__$hasIcon);
+    return $hasIcon && /*#__PURE__*/ css("Button__$hasIcon_xEUJ1U");
 }, function(param) {
     var $disabled = param.$disabled;
-    return $disabled && /*#__PURE__*/ css(__styleYak["Button__$disabled-01"]);
+    return $disabled && /*#__PURE__*/ css("Button__$disabled_xEUJ1U-01");
 });
 export default Button;

packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.yak.module.css

@@ -1,12 +1,16 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_xEUJ1U) {
   color: black;
 }
-.Button__$disabled {
+/* cssmodules-pure-ignore * /
+:global(.Button__$disabled_xEUJ1U) {
   opacity: 0.5;
 }
-.Button__$hasIcon {
+/* cssmodules-pure-ignore * /
+:global(.Button__$hasIcon_xEUJ1U) {
   padding-left: 30px;
 }
-.Button__$disabled-01 {
+/* cssmodules-pure-ignore * /
+:global(.Button__$disabled_xEUJ1U-01) {
   color: gray;
 }

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

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

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

@@ -1,13 +1,14 @@
 import { styled } from "next-yak/internal";
 import { AnyIcon, Icon } from "./icon";
-import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_JKqlji) {
   --yak-css-import: url("./icon:Icon",selector) {
     margin-right: 10px;
   }
   --yak-css-import: url("./icon:AnyIcon",selector) {
     margin-right: 15px;
   }
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ styled.button("Button_JKqlji");

packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css

@@ -1,4 +1,5 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_JKqlji) {
   :global(.icon_Icon___yEni) {
     margin-right: 10px;
   }

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

@@ -1,12 +1,13 @@
 import { styled } from "next-yak/internal";
 import { lastChildMixin } from './mixin';
-import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 var ListItem = /*YAK Extracted CSS:
-.ListItem {
+// cssmodules-pure-ignore
+:global(.ListItem_PZqRtI) {
   margin-bottom: 10px;
   &:hover {
     --yak-css-import: url("./mixin:lastChildMixin",mixin);
   }
 }
-*/ /*#__PURE__*/ styled.li(__styleYak.ListItem);
+*/ /*#__PURE__*/ styled.li("ListItem_PZqRtI");
 export default ListItem;

packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.yak.module.css

@@ -1,4 +1,5 @@
-.ListItem {
+/* cssmodules-pure-ignore * /
+:global(.ListItem_PZqRtI) {
   margin-bottom: 10px;
   &:hover {
     &:last-child {

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 __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-.Button {
+// cssmodules-pure-ignore
+:global(.Button_Mx2s9f) {
   color: red;
   height: --yak-css-import: url("./constants.yak:siteMaxWidth",mixin)px;
 }
-*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+*/ /*#__PURE__*/ styled.button("Button_Mx2s9f");

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

@@ -1,4 +1,5 @@
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_Mx2s9f) {
   color: red;
   height: 10px;
 }

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

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

packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.yak.module.css

@@ -1,4 +1,5 @@
-.Headline {
+/* cssmodules-pure-ignore * /
+:global(.Headline_mxjUbw) {
   color: red;
 
         font-family: "Roboto", sans-serif;
@@ -8,7 +9,8 @@
         letter-spacing: 0.00938em;
 
 }
-.Button {
+/* cssmodules-pure-ignore * /
+:global(.Button_mxjUbw) {
   color: red;
 
         font-family: "Roboto", sans-serif;