add tests for prod environment

.changeset/bright-pumas-lie.md

@@ -0,0 +1,2 @@
+---
+---

packages/yak-swc/yak_swc/src/lib.rs

@@ -994,7 +994,7 @@ mod tests {
   use swc_ecma_transforms_testing::FixtureTestConfig;
 
   #[testing::fixture("tests/fixture/**/input.tsx")]
-  fn fixture(input: PathBuf) {
+  fn fixture_dev(input: PathBuf) {
     test_fixture(
       Syntax::Typescript(TsSyntax {
         tsx: true,
@@ -1009,14 +1009,40 @@ mod tests {
         ))
       },
       &input,
-      &input.with_file_name("output.tsx"),
+      &input.with_file_name("output.dev.tsx"),
       FixtureTestConfig {
         module: None,
         sourcemap: false,
         allow_error: true,
       },
     )
   }
+
+  #[testing::fixture("tests/fixture/**/input.tsx")]
+  fn fixture_prod(input: PathBuf) {
+    test_fixture(
+      Syntax::Typescript(TsSyntax {
+        tsx: true,
+        ..Default::default()
+      }),
+      &|tester| {
+        visit_mut_pass(TransformVisitor::new(
+          Some(tester.comments.clone()),
+          "path/input.tsx".to_string(),
+          false,
+          None,
+        ))
+      },
+      &input,
+      &input.with_file_name("output.prod.tsx"),
+      FixtureTestConfig {
+        module: None,
+        sourcemap: false,
+        allow_error: true,
+      },
+    )
+  }
+
   #[testing::fixture("tests/fixture/**/input.yak.tsx")]
   fn fixture_yak(input: PathBuf) {
     test_fixture(

packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx

@@ -0,0 +1,19 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+*/ /*#__PURE__*/ styled.button.attrs({
+    type: "button"
+})(__styleYak.Button);

packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx

@@ -0,0 +1,17 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);

packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx

@@ -0,0 +1,9 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const primary = "green";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  color: green;
+  background: red;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);

packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx

@@ -0,0 +1,55 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const ArticleCard = /*YAK Extracted CSS:
+.ArticleCard {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  &:hover {
+    transform: translateY(-5px);
+  }
+  .card-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+  .card-content {
+    padding: 20px;
+    h2 {
+      font-size: 24px;
+      color: #333;
+      margin-bottom: 10px;
+    }
+    p {
+      font-size: 16px;
+      color: #666;
+      line-height: 1.5;
+    }
+    &::after {
+      content: "";
+      display: block;
+      width: 50px;
+      height: 2px;
+      background-color: #007bff;
+      margin-top: 20px;
+    }
+  }
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #f8f9fa;
+    .author {
+      font-size: 14px;
+      color: #555;
+    }
+    .date {
+      font-size: 14px;
+      color: #777;
+    }
+  }
+}
+*/ /*#__PURE__*/ styled.article(__styleYak.ArticleCard);

packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx

@@ -0,0 +1,31 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const colors = {
+    primary: "#007bff",
+    secondary: "#6c757d",
+    success: "#28a745",
+    danger: "#dc3545",
+    warning: "#ffc107",
+    info: "#17a2b8",
+    light: "#f8f9fa",
+    dark: "#343a40"
+};
+const borderRadius = "4px";
+const stacking = 1;
+export const Button = /*YAK Extracted CSS:
+.Button {
+  background-color: #007bff;
+  color: #f8f9fa;
+  padding: 10px 33.3333%;
+  z-index: 1;
+  margin-top: -1px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  &:hover {
+    background-color: #343a40;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);

packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx

@@ -0,0 +1,17 @@
+import { styled } from "next-yak/internal";
+// @ts-ignore
+import { colors } from "./colorDefinitions";
+// @ts-ignore
+import { fonts } from "./fontDefinitions";
+// @ts-ignore
+import { sizes } from "./sizeDefinitions";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  font-size: --yak-css-import: url("./fontDefinitions:fonts:sm",mixin);
+  color: --yak-css-import: url("./colorDefinitions:colors:dark:primary",mixin);
+  border-color: --yak-css-import: url("./colorDefinitions:colors:shadows:dark:primary",mixin);
+  background-color: --yak-css-import: url("./colorDefinitions:colors:light:full%20opacity",mixin);
+  height: --yak-css-import: url("./sizeDefinitions:sizes:0",mixin);
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);

packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr

@@ -0,0 +1,11 @@
+  x Dynamic mixins must not be exported. Please ensure that this mixin requires no props.
+    ,-[input.js:15:1]
+ 14 |     
+ 15 | ,-> export const buttonStyles = css`
+ 16 | |     padding: 10px 20px;
+ 17 | |     border: none;
+ 18 | |     border-radius: 5px;
+ 19 | |     cursor: pointer;
+ 20 | |     ${textStyles};
+ 21 | `-> `;
+    `----

packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr

@@ -0,0 +1,11 @@
+  x Dynamic mixins must not be exported. Please ensure that this mixin requires no props.
+    ,-[input.js:15:1]
+ 14 |     
+ 15 | ,-> export const buttonStyles = css`
+ 16 | |     padding: 10px 20px;
+ 17 | |     border: none;
+ 18 | |     border-radius: 5px;
+ 19 | |     cursor: pointer;
+ 20 | |     ${textStyles};
+ 21 | `-> `;
+    `----

packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx

@@ -0,0 +1,54 @@
+import { css, styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const textColor = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textColor__$active));
+const textStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textStyles__$active));
+export const buttonStyles = /*YAK EXPORTED MIXIN:buttonStyles
+padding: 10px 20px;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+font-size: 16px;
+color: black;
+color: red;
+*/ /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active));
+export const Button = /*YAK Extracted CSS:
+.Button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.Button__ {
+  &:hover {
+    font-size: 16px;
+    color: black;
+  }
+}
+.Button__-and-$active {
+  &:hover {
+    color: red;
+  }
+}
+.Button {
+  &:focus {
+    font-size: 16px;
+    color: black;
+  }
+}
+.Button__$active {
+  &:focus {
+    color: red;
+  }
+}
+.Button {
+  &:focus {
+    font-size: 16px;
+    color: black;
+  }
+}
+.Button__$active1 {
+  &:focus {
+    color: red;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__-and-$active"])), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active1));

packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx

@@ -0,0 +1,47 @@
+import { css, styled } from "next-yak/internal";
+import { typogaphyMixin } from "./typography";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const textColor = /*#__PURE__*/ css();
+const textStyles = /*#__PURE__*/ css();
+export const buttonStyles = /*YAK EXPORTED MIXIN:buttonStyles
+padding: 10px 20px;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+font-size: 16px;
+color: black;
+--yak-css-import: url("./typography:typogaphyMixin",mixin);
+*/ /*#__PURE__*/ css();
+export const Button = /*YAK Extracted CSS:
+.Button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.Button__ {
+  &:hover {
+    font-size: 16px;
+    color: black;
+  }
+}
+.Button {
+  &:focus {
+    font-size: 16px;
+    color: black;
+    font-size: 16px;
+    color: black;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__));
+export const aspectRatios = {
+    base: /*YAK EXPORTED MIXIN:aspectRatios:base
+padding-top: 100%;
+*/ /*#__PURE__*/ css(),
+    "16:9": /*YAK EXPORTED MIXIN:aspectRatios:16%3A9
+padding-top: 56.25%;
+*/ /*#__PURE__*/ css(),
+    "4:3": /*YAK EXPORTED MIXIN:aspectRatios:4%3A3
+padding-top: 75%;
+*/ /*#__PURE__*/ css()
+};

packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx

@@ -0,0 +1,58 @@
+import { styled } from "next-yak/internal";
+// @ts-ignore
+import { fonts } from "./fonts";
+// @ts-ignore
+import { fancy } from "./fancy";
+// @ts-ignore
+import { yakMixin } from "./constants.yak";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  --yak-css-import: url("./fonts:fonts:h1",mixin);
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);
+export const Button2 = /*YAK Extracted CSS:
+.Button2 {
+  --yak-css-import: url("./fonts:fonts:h1",mixin);
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button2);
+export const Button3 = /*YAK Extracted CSS:
+.Button3 {
+  --yak-css-import: url("./fonts:fonts:h1",mixin);
+  color: green;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button3);
+export const Button4 = /*YAK Extracted CSS:
+.Button4 {
+  --yak-css-import: url("./fonts:fonts:h1",mixin)
+--yak-css-import: url("./fonts:fonts:underline",mixin);
+  color: green;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button4);
+export const Button5 = /*YAK Extracted CSS:
+.Button5 {
+  --yak-css-import: url("./fonts:fonts:h1",mixin);
+  --yak-css-import: url("./fancy:fancy:mixins:specialEffect",mixin);
+  color: green;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button5);
+export const Button6 = /*YAK Extracted CSS:
+.Button6 {
+  &:hover {
+    --yak-css-import: url("./constants.yak:yakMixin",mixin);
+  }
+  --yak-css-import: url("./fancy:fancy:mixins:specialEffect",mixin)
+;
+  color: green;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button6);
+export const Button7 = /*YAK Extracted CSS:
+.Button7 {
+  &:hover {
+    --yak-css-import: url("./constants.yak:yakMixin",mixin);
+  }
+  --yak-css-import: url("./fancy:fancy:aspectRatio:16%3A9",mixin)
+;
+  color: green;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button7);