From fcba925c4dd0c79f68241b450cff71af1d9fd2dd Mon Sep 17 00:00:00 2001
From: Jan Nicklas <j.nicklas@me.com>
Date: Tue, 3 Dec 2024 15:43:35 +0100
Subject: [PATCH 1/3] allow to define the prefix for generated names (#225)

---
 .changeset/silver-hairs-clean.md              |  5 ++++
 packages/yak-swc/yak_swc/src/lib.rs           | 13 ++++++--
 .../yak-swc/yak_swc/src/naming_convention.rs  | 30 ++++++++++++++-----
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/silver-hairs-clean.md

diff --git a/.changeset/silver-hairs-clean.md b/.changeset/silver-hairs-clean.md
new file mode 100644
index 00000000..b7c8ef51
--- /dev/null
+++ b/.changeset/silver-hairs-clean.md
@@ -0,0 +1,5 @@
+---
+"yak-swc": minor
+---
+
+allow to define the prefix for generated names
diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs
index 93eddd1d..154c45ac 100644
--- a/packages/yak-swc/yak_swc/src/lib.rs
+++ b/packages/yak-swc/yak_swc/src/lib.rs
@@ -56,6 +56,8 @@ pub struct Config {
   /// To ensure that the hash is consistent accross multiple systems the relative path
   /// from the base dir to the source file is used.
   pub base_path: String,
+  /// Prefix for the generated css identifier
+  pub prefix: Option<String>,
 }
 
 pub struct TransformVisitor<GenericComments>
@@ -106,7 +108,12 @@ impl<GenericComments> TransformVisitor<GenericComments>
 where
   GenericComments: Comments,
 {
-  pub fn new(comments: Option<GenericComments>, filename: String, dev_mode: bool) -> Self {
+  pub fn new(
+    comments: Option<GenericComments>,
+    filename: String,
+    dev_mode: bool,
+    prefix: Option<String>,
+  ) -> Self {
     Self {
       current_css_state: None,
       current_declaration: vec![],
@@ -115,7 +122,7 @@ where
       current_exported: false,
       variables: VariableVisitor::new(),
       yak_library_imports: YakImportVisitor::new(),
-      naming_convention: NamingConvention::new(filename.clone(), dev_mode),
+      naming_convention: NamingConvention::new(filename.clone(), dev_mode, prefix),
       variable_name_selector_mapping: FxHashMap::default(),
       expression_replacement: None,
       css_module_identifier: None,
@@ -959,6 +966,7 @@ pub fn process_transform(program: Program, metadata: TransformPluginProgramMetad
     metadata.comments,
     deterministic_path,
     config.dev_mode,
+    config.prefix,
   )))
 }
 
@@ -997,6 +1005,7 @@ mod tests {
           Some(tester.comments.clone()),
           "path/input.tsx".to_string(),
           true,
+          None,
         ))
       },
       &input,
diff --git a/packages/yak-swc/yak_swc/src/naming_convention.rs b/packages/yak-swc/yak_swc/src/naming_convention.rs
index 045e09d5..a3ee028c 100644
--- a/packages/yak-swc/yak_swc/src/naming_convention.rs
+++ b/packages/yak-swc/yak_swc/src/naming_convention.rs
@@ -6,18 +6,27 @@ pub struct NamingConvention {
   file_name: String,
   file_name_hash: Option<String>,
   dev_mode: bool,
+  prefix: String,
 }
 
 /// A naming convention that generates safe unique names for CSS variables, classes, and other identifiers.
 /// Use the `generate_unique_name` method to generate a unique name based on a base name.
 /// e.g. `generate_unique_name("foo bar")` might return `"foo_bar-01"`, `"foo_bar-02"`, etc.
 impl NamingConvention {
-  pub fn new(file_name: String, dev_mode: bool) -> Self {
+  pub fn new(file_name: String, dev_mode: bool, prefix: Option<String>) -> Self {
     Self {
       postfix_counters: FxHashMap::default(),
       file_name,
       file_name_hash: None,
       dev_mode,
+      prefix: prefix.unwrap_or_else(|| {
+        if dev_mode {
+          // In dev mode we don't prefix by default as it already uses long unique names
+          String::from("")
+        } else {
+          String::from("y")
+        }
+      }),
     }
   }
 
@@ -69,14 +78,19 @@ impl NamingConvention {
   pub fn get_css_variable_name(&mut self, base_name: &str) -> String {
     let name: String = if self.dev_mode {
       if base_name.is_empty() {
-        String::from("yak_")
+        String::from("var_")
       } else {
         format!("{}_", base_name)
       }
     } else {
-      String::from("y")
+      "".to_string()
     };
-    let css_variable_name = format!("{}{}", name, self.get_file_name_hash());
+    let css_variable_name = format!(
+      "{}{}{}",
+      self.prefix.clone(),
+      name,
+      self.get_file_name_hash()
+    );
     self.generate_unique_name(&css_variable_name)
   }
 }
@@ -142,7 +156,7 @@ mod tests {
 
   #[test]
   fn css_naming_convention() {
-    let mut convention = NamingConvention::new("file.css".into(), true);
+    let mut convention = NamingConvention::new("file.css".into(), true, None);
     assert_eq!(convention.generate_unique_name("foo"), "foo");
     assert_eq!(convention.generate_unique_name("foo"), "foo-01");
     assert_eq!(convention.generate_unique_name("foo"), "foo-02");
@@ -150,7 +164,7 @@ mod tests {
 
   #[test]
   fn css_variable_name() {
-    let mut convention = NamingConvention::new("file.css".into(), false);
+    let mut convention = NamingConvention::new("file.css".into(), false, None);
     assert_eq!(convention.get_css_variable_name("foo"), "yoPBkbU");
     assert_eq!(convention.get_css_variable_name("foo"), "yoPBkbU1");
     assert_eq!(convention.get_css_variable_name(""), "yoPBkbU2");
@@ -158,9 +172,9 @@ mod tests {
 
   #[test]
   fn css_variable_name_dev_mode() {
-    let mut convention = NamingConvention::new("file.css".into(), true);
+    let mut convention = NamingConvention::new("file.css".into(), true, None);
     assert_eq!(convention.get_css_variable_name("foo"), "foo_oPBkbU");
     assert_eq!(convention.get_css_variable_name("foo"), "foo_oPBkbU-01");
-    assert_eq!(convention.get_css_variable_name(""), "yak_oPBkbU");
+    assert_eq!(convention.get_css_variable_name(""), "var_oPBkbU");
   }
 }

From e58690baaa5f889bcaa052d687ea4d55ac908702 Mon Sep 17 00:00:00 2001
From: Jan Nicklas <j.nicklas@me.com>
Date: Tue, 3 Dec 2024 21:35:13 +0100
Subject: [PATCH 2/3] add tests for prod environment (#223)

---
 .changeset/bright-pumas-lie.md                |  2 +
 packages/yak-swc/yak_swc/src/lib.rs           | 30 +++++++-
 .../attrs/{output.tsx => output.dev.tsx}      |  0
 .../tests/fixture/attrs/output.prod.tsx       | 19 +++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../basic-styled-component/output.prod.tsx    | 17 +++++
 .../comments/{output.tsx => output.dev.tsx}   |  0
 .../tests/fixture/comments/output.prod.tsx    |  9 +++
 .../{output.tsx => output.dev.tsx}            |  0
 .../complex-nested-structure/output.prod.tsx  | 55 +++++++++++++++
 .../constants/{output.tsx => output.dev.tsx}  |  0
 .../tests/fixture/constants/output.prod.tsx   | 31 ++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../cross-file-constants/output.prod.tsx      | 17 +++++
 .../output.dev.stderr                         | 11 +++
 .../{output.tsx => output.dev.tsx}            |  0
 .../output.prod.stderr                        | 11 +++
 .../output.prod.tsx                           | 54 ++++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../cross-file-mixin-export/output.prod.tsx   | 47 +++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../cross-file-mixin-import/output.prod.tsx   | 58 +++++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../cross-file-selectors/output.prod.tsx      | 17 +++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/css-grid-layout/output.prod.tsx   | 59 ++++++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/css-import-order/output.prod.tsx  | 14 ++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/css-mixin-inline/output.prod.tsx  | 14 ++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/css-mixin-nested/output.prod.tsx  | 68 ++++++++++++++++++
 .../css-mixin/{output.tsx => output.dev.tsx}  |  0
 .../tests/fixture/css-mixin/output.prod.tsx   | 70 +++++++++++++++++++
 .../css-prop-invalid/output.dev.stderr        |  7 ++
 .../{output.tsx => output.dev.tsx}            |  0
 .../css-prop-invalid/output.prod.stderr       |  7 ++
 .../fixture/css-prop-invalid/output.prod.tsx  |  3 +
 .../css-prop/{output.tsx => output.dev.tsx}   |  0
 .../tests/fixture/css-prop/output.prod.tsx    | 52 ++++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/css-variables/output.prod.tsx     | 23 ++++++
 .../dynamic-prop-error/output.dev.stderr      | 16 +++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../dynamic-prop-error/output.prod.stderr     | 16 +++++
 .../dynamic-prop-error/output.prod.tsx        | 14 ++++
 .../encoded/{output.tsx => output.dev.tsx}    |  0
 .../tests/fixture/encoded/output.prod.tsx     | 14 ++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/extending-styles/output.prod.tsx  | 29 ++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../output.prod.tsx                           | 34 +++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../output.prod.tsx                           | 64 +++++++++++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../keyframe-animations/output.prod.tsx       | 19 +++++
 .../keyframes-nested-error/output.dev.stderr  | 13 ++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../keyframes-nested-error/output.prod.stderr | 13 ++++
 .../keyframes-nested-error/output.prod.tsx    |  3 +
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/media-queries/output.prod.tsx     | 16 +++++
 .../output.dev.stderr                         |  7 ++
 .../{output.tsx => output.dev.tsx}            |  0
 .../output.prod.stderr                        |  7 ++
 .../output.prod.tsx                           |  3 +
 .../{output.tsx => output.dev.tsx}            |  0
 .../mixing-with-tailwind/output.prod.tsx      |  3 +
 .../nested-dynamic-mixin/output.dev.stderr    | 11 +++
 .../{output.tsx => output.dev.tsx}            |  0
 .../nested-dynamic-mixin/output.prod.stderr   | 11 +++
 .../nested-dynamic-mixin/output.prod.tsx      | 25 +++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/nested-selectors/output.prod.tsx  | 32 +++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/no-yak-usage/output.prod.tsx      |  3 +
 .../no-yak/{output.tsx => output.dev.tsx}     |  0
 .../tests/fixture/no-yak/output.prod.tsx      |  6 ++
 .../{output.tsx => output.dev.tsx}            |  0
 .../props-and-dynamic-styles/output.prod.tsx  | 29 ++++++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../fixture/styled-componets/output.prod.tsx  | 15 ++++
 .../{output.tsx => output.dev.tsx}            |  0
 .../theming-with-context/output.prod.tsx      | 16 +++++
 84 files changed, 1112 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/bright-pumas-lie.md
 rename packages/yak-swc/yak_swc/tests/fixture/attrs/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/comments/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/constants/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-import-order/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-mixin/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-prop/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/css-variables/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/encoded/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/extending-styles/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/media-queries/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr
 rename packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/nested-selectors/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/no-yak/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/styled-componets/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx
 rename packages/yak-swc/yak_swc/tests/fixture/theming-with-context/{output.tsx => output.dev.tsx} (100%)
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx

diff --git a/.changeset/bright-pumas-lie.md b/.changeset/bright-pumas-lie.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/bright-pumas-lie.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs
index 154c45ac..6117a79f 100644
--- a/packages/yak-swc/yak_swc/src/lib.rs
+++ b/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,7 +1009,7 @@ mod tests {
         ))
       },
       &input,
-      &input.with_file_name("output.tsx"),
+      &input.with_file_name("output.dev.tsx"),
       FixtureTestConfig {
         module: None,
         sourcemap: false,
@@ -1017,6 +1017,32 @@ mod tests {
       },
     )
   }
+
+  #[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(
diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/attrs/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx
new file mode 100644
index 00000000..fea4c2a0
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx
new file mode 100644
index 00000000..05e5b1c9
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx
new file mode 100644
index 00000000..fc6c2b73
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx
new file mode 100644
index 00000000..05a15404
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx
new file mode 100644
index 00000000..cd257ad9
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx
new file mode 100644
index 00000000..a533ee24
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr
new file mode 100644
index 00000000..c3ccc853
--- /dev/null
+++ b/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 | `-> `;
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr
new file mode 100644
index 00000000..c3ccc853
--- /dev/null
+++ b/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 | `-> `;
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx
new file mode 100644
index 00000000..41487ddf
--- /dev/null
+++ b/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));
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx
new file mode 100644
index 00000000..3571cc30
--- /dev/null
+++ b/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()
+};
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx
new file mode 100644
index 00000000..93c1918f
--- /dev/null
+++ b/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);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx
new file mode 100644
index 00000000..da1bc120
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx
@@ -0,0 +1,17 @@
+import { styled } from "next-yak/internal";
+// @ts-ignore
+import { Icon } from "./Icon";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const primary = "green";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  font-size: 1rem;
+  color: green;
+  --yak-css-import: url("./Icon:Icon",selector) {
+    color: red;
+  }
+  --yak-css-import: url("./Icon:Icon",selector) --yak-css-import: url("./Icon:Icon",selector) {
+    color: blue;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx
new file mode 100644
index 00000000..f53aa6a7
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx
@@ -0,0 +1,59 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const GridLayout = /*YAK Extracted CSS:
+.GridLayout {
+  display: grid;
+  grid-template-areas: "header header header"
+"nav content sidebar"
+"footer footer footer";
+  grid-template-columns: 200px 1fr 200px;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  gap: 20px;
+  padding: 20px;
+  background-color: #f0f0f0;
+  @media (max-width: 768px) {
+    grid-template-areas: "header"
+"nav"
+"content"
+"sidebar"
+"footer";
+    grid-template-columns: 1fr;
+  }
+  .header {
+    grid-area: header;
+    background-color: #007bff;
+    color: white;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  .nav {
+    grid-area: nav;
+    background-color: #28a745;
+    color: white;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  .content {
+    grid-area: content;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  .sidebar {
+    grid-area: sidebar;
+    background-color: #ffc107;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  .footer {
+    grid-area: footer;
+    background-color: #6c757d;
+    color: white;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+  }
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.GridLayout);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx
new file mode 100644
index 00000000..baecd4a8
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx
@@ -0,0 +1,14 @@
+import { styled } from "next-yak/internal";
+import { IconButton } from "./iconButton";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const FancyIconButton = /*YAK Extracted CSS:
+.FancyIconButton {
+  color: hotpink;
+  &:before {
+    content: "FancyIconButton";
+  }
+  --yak-css-import: url("./iconButton:IconButton",selector) {
+    color: #f0f;
+  }
+}
+*/ /*#__PURE__*/ styled(IconButton)(__styleYak.FancyIconButton);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx
new file mode 100644
index 00000000..27d31ecf
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx
@@ -0,0 +1,14 @@
+import { styled, css } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const ThemedButton = /*YAK Extracted CSS:
+.ThemedButton {
+  &:hover {
+    color: black;
+  }
+}
+.ThemedButton__$active {
+  &:hover {
+    color: red;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active));
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx
new file mode 100644
index 00000000..1408462a
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx
@@ -0,0 +1,68 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, {
+        "style": {
+            "--ym7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), {
+    "style": {
+        "--ym7uBBu1": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
+export const ThemedButton = /*YAK Extracted CSS:
+.ThemedButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.ThemedButton__$active {
+  @media (max-width: 600px) {
+    background-color: #f0f0f0;
+    max-width: var(--ym7uBBu2);
+  }
+}
+.ThemedButton {
+  width: var(--ym7uBBu3);
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, {
+        "style": {
+            "--ym7uBBu2": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), {
+    "style": {
+        "--ym7uBBu3": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
+export const CustomThemedButton = /*YAK Extracted CSS:
+.CustomThemedButton {
+  color: red;
+  &:not([disabled]) {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+}
+.CustomThemedButton__$active {
+  &:not([disabled]) {
+    @media (max-width: 600px) {
+      background-color: #f0f0f0;
+      max-width: var(--ym7uBBu4);
+    }
+  }
+}
+.CustomThemedButton {
+  &:not([disabled]) {
+    width: var(--ym7uBBu5);
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, {
+        "style": {
+            "--ym7uBBu4": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), {
+    "style": {
+        "--ym7uBBu5": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx
new file mode 100644
index 00000000..048b734b
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx
@@ -0,0 +1,70 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, {
+        "style": {
+            "--ym7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), function({ $letters }) {
+    return $letters > 5 && /*#__PURE__*/ css(__styleYak.buttonStyles__);
+}, {
+    "style": {
+        "--ym7uBBu1": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
+export const ThemedButton = /*YAK Extracted CSS:
+.ThemedButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.ThemedButton__$active {
+  background-color: #f0f0f0;
+  max-width: var(--ym7uBBu2);
+}
+.ThemedButton {
+  width: var(--ym7uBBu3);
+}
+.ThemedButton__ {
+  color: red;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, {
+        "style": {
+            "--ym7uBBu2": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), function({ $letters }) {
+    return $letters > 5 && /*#__PURE__*/ css(__styleYak.ThemedButton__);
+}, {
+    "style": {
+        "--ym7uBBu3": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
+export const CustomThemedButton = /*YAK Extracted CSS:
+.CustomThemedButton {
+  color: red;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.CustomThemedButton__$active {
+  background-color: #f0f0f0;
+  max-width: var(--ym7uBBu4);
+}
+.CustomThemedButton {
+  width: var(--ym7uBBu5);
+}
+.CustomThemedButton__ {
+  color: red;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, {
+        "style": {
+            "--ym7uBBu4": __yak_unitPostFix(({ $letters })=>$letters * 15, "px")
+        }
+    }), function({ $letters }) {
+    return $letters > 5 && /*#__PURE__*/ css(__styleYak.CustomThemedButton__);
+}, {
+    "style": {
+        "--ym7uBBu5": __yak_unitPostFix(({ $letters })=>$letters * 10, "px")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr
new file mode 100644
index 00000000..01623ecb
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr
@@ -0,0 +1,7 @@
+  x Invalid CSS attribute. The 'css' prop should contain a valid CSS-in-JS expression. Example: css={css`color: red;`}
+   ,-[input.js:3:1]
+ 2 | 
+ 3 | const Elem = () => <div css="invalid" />;
+   :                    ^^^^^^^^^^^^^^^^^^^^^
+ 4 | const Elem2 = (props: any) => <div css={props} />;
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr
new file mode 100644
index 00000000..01623ecb
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr
@@ -0,0 +1,7 @@
+  x Invalid CSS attribute. The 'css' prop should contain a valid CSS-in-JS expression. Example: css={css`color: red;`}
+   ,-[input.js:3:1]
+ 2 | 
+ 3 | const Elem = () => <div css="invalid" />;
+   :                    ^^^^^^^^^^^^^^^^^^^^^
+ 4 | const Elem2 = (props: any) => <div css={props} />;
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx
new file mode 100644
index 00000000..d14e7b52
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx
@@ -0,0 +1,3 @@
+import { css } from "next-yak/internal";
+const Elem = ()=><div/>;
+const Elem2 = (props: any)=><div {...props({})}/>;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-prop/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx
new file mode 100644
index 00000000..4eb7576e
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx
@@ -0,0 +1,52 @@
+import { css, __yak_mergeCssProp } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const Elem = ()=><div {.../*YAK Extracted CSS:
+.Elem {
+  color: red;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem)({})}/>;
+const Elem2 = ()=><div {...__yak_mergeCssProp({
+        className: "test-class"
+    }, /*YAK Extracted CSS:
+.Elem2 {
+  color: blue;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem2)({}))}/>;
+const Elem3 = ()=><div {...__yak_mergeCssProp({
+        style: {
+            padding: "5px"
+        }
+    }, /*YAK Extracted CSS:
+.Elem3 {
+  padding: 10px;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem3)({}))}/>;
+const Elem4 = (props: any)=><div {...__yak_mergeCssProp({
+        ...props
+    }, /*YAK Extracted CSS:
+.Elem4 {
+  color: green;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem4)({}))}/>;
+const Elem5 = (props: any)=><div {...__yak_mergeCssProp({
+        ...props.a,
+        ...props.b
+    }, /*YAK Extracted CSS:
+.Elem5 {
+  color: purple;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem5)({}))}/>;
+const Elem6 = ()=><div {...__yak_mergeCssProp({
+        className: "main",
+        style: {
+            fontWeight: "bold"
+        }
+    }, /*YAK Extracted CSS:
+.Elem6 {
+  font-size: 16px;
+}
+*/ /*#__PURE__*/ css(__styleYak.Elem6)({}))}/>;
+const Elem7 = ()=><div className="no-css"/>;
+const Elem8 = ()=><div {...__yak_mergeCssProp({
+        className: "empty-css"
+    }, /*#__PURE__*/ css(__styleYak.Elem8)({}))}/>;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx
new file mode 100644
index 00000000..c9b4b2c1
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx
@@ -0,0 +1,23 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const ThemedButton = /*YAK Extracted CSS:
+.ThemedButton {
+  background-color: var(--primary-color);
+  color: #fff;
+  font-size: var(--font-size-base);
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--secondary-color);
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton);
+export const ThemeProvider = /*YAK Extracted CSS:
+.ThemeProvider {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --font-size-base: 16px;
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.ThemeProvider);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr
new file mode 100644
index 00000000..0be4015b
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr
@@ -0,0 +1,16 @@
+  x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit.
+  | Example: ${() => getValue()} instead of ${getValue()}
+   ,-[input.js:5:1]
+ 4 |   display: flex;
+ 5 |   z-index: ${getZIndex()};
+   :              ^^^^^^^^^^^
+ 6 |   margin-bottom: ${spacing[40].toString()}px;
+   `----
+  x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit.
+  | Example: ${() => getValue()} instead of ${getValue()}
+   ,-[input.js:6:1]
+ 5 |   z-index: ${getZIndex()};
+ 6 |   margin-bottom: ${spacing[40].toString()}px;
+   :                    ^^^^^^^^^^^^^^^^^^^^^^
+ 7 | `;
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr
new file mode 100644
index 00000000..0be4015b
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr
@@ -0,0 +1,16 @@
+  x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit.
+  | Example: ${() => getValue()} instead of ${getValue()}
+   ,-[input.js:5:1]
+ 4 |   display: flex;
+ 5 |   z-index: ${getZIndex()};
+   :              ^^^^^^^^^^^
+ 6 |   margin-bottom: ${spacing[40].toString()}px;
+   `----
+  x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit.
+  | Example: ${() => getValue()} instead of ${getValue()}
+   ,-[input.js:6:1]
+ 5 |   z-index: ${getZIndex()};
+ 6 |   margin-bottom: ${spacing[40].toString()}px;
+   :                    ^^^^^^^^^^^^^^^^^^^^^^
+ 7 | `;
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx
new file mode 100644
index 00000000..cc6e76ba
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx
@@ -0,0 +1,14 @@
+import { styled, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const FlexContainer = /*YAK Extracted CSS:
+.FlexContainer {
+  display: flex;
+  z-index: var(--ym7uBBu);
+  margin-bottom: var(--ym7uBBu1);
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, {
+    "style": {
+        "--ym7uBBu": getZIndex(),
+        "--ym7uBBu1": __yak_unitPostFix(spacing[40].toString(), "px")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx
new file mode 100644
index 00000000..10a21ffe
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx
@@ -0,0 +1,14 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const before = "\\2022";
+export const Button = /*YAK Extracted CSS:
+.Button {
+  background-color: #007bff;
+  &::before {
+    content: "\2022";
+  }
+  &:after {
+    content: "\2022";
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx
new file mode 100644
index 00000000..c0ab69d3
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx
@@ -0,0 +1,29 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const BaseButton = /*YAK Extracted CSS:
+.BaseButton {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.BaseButton);
+export const PrimaryButton = /*YAK Extracted CSS:
+.PrimaryButton {
+  background-color: #007bff;
+  color: #fff;
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+*/ /*#__PURE__*/ styled(BaseButton)(__styleYak.PrimaryButton);
+export const SecondaryButton = /*YAK Extracted CSS:
+.SecondaryButton {
+  background-color: #6c757d;
+  color: #fff;
+  &:hover {
+    background-color: #545b62;
+  }
+}
+*/ /*#__PURE__*/ styled(BaseButton)(__styleYak.SecondaryButton);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx
new file mode 100644
index 00000000..b2d54cbc
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx
@@ -0,0 +1,34 @@
+import { styled, css, keyframes } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const FadeInText = /*YAK Extracted CSS:
+.FadeInText__$reverse {
+  animation: fadeOut 1s ease-in;
+}
+.FadeInText__not_$reverse {
+  animation: fadeIn 1s ease-in;
+}
+.FadeInText {
+  font-size: 18px;
+  color: #333;
+}
+*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse));
+const fadeIn = /*YAK Extracted CSS:
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.fadeIn);
+const fadeOut = /*YAK Extracted CSS:
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.fadeOut);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx
new file mode 100644
index 00000000..408decd1
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx
@@ -0,0 +1,64 @@
+import { styled, css, keyframes } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const FadeInText = /*YAK Extracted CSS:
+.FadeInText__$reverse {
+  animation: animations_fadeOut 1s ease-in;
+}
+.FadeInText__not_$reverse {
+  animation: animations_fadeIn 1s ease-in;
+}
+.FadeInText {
+  font-size: 18px;
+  color: #333;
+}
+*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse));
+const animations = {
+    fadeIn: /*YAK Extracted CSS:
+@keyframes animations_fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.animations_fadeIn),
+    fadeOut: /*YAK Extracted CSS:
+@keyframes animations_fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.animations_fadeOut)
+};
+const slides = {
+    200: /*YAK Extracted CSS:
+@keyframes slides_200 {
+  to {
+    transform: translate(200px, 200px);
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.slides_200),
+    "x400": /*YAK Extracted CSS:
+@keyframes slides_x400 {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(400px);
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.slides_x400)
+};
+export const FancyButton = /*YAK Extracted CSS:
+.FancyButton {
+  background-color: #f00;
+  animation: slides_x400 1s ease-in-out, animations_fadeIn 1s ease-in;
+  &:hover {
+    animation: slides_200 1s ease-in-out, animations_fadeOut 1s ease-in;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.FancyButton);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx
new file mode 100644
index 00000000..f0d3b3a8
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx
@@ -0,0 +1,19 @@
+import { styled, keyframes } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const fadeIn = /*YAK Extracted CSS:
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+*/ /*#__PURE__*/ keyframes(__styleYak.fadeIn);
+export const FadeInText = /*YAK Extracted CSS:
+.FadeInText {
+  animation: fadeIn 1s ease-in;
+  font-size: 18px;
+  color: #333;
+}
+*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr
new file mode 100644
index 00000000..ed5138f9
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr
@@ -0,0 +1,13 @@
+  x Only css template literals are allowed inside css expressions
+    ,-[input.js:4:1]
+  3 |     export const Button = styled.button`
+  4 | ,->   ${keyframes`
+  5 | |       from {
+  6 | |         opacity: 0;
+  7 | |         }
+  8 | |         to {
+  9 | |           opacity: 1;
+ 10 | |         }
+ 11 | `->     `};
+ 12 |     `;
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr
new file mode 100644
index 00000000..ed5138f9
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr
@@ -0,0 +1,13 @@
+  x Only css template literals are allowed inside css expressions
+    ,-[input.js:4:1]
+  3 |     export const Button = styled.button`
+  4 | ,->   ${keyframes`
+  5 | |       from {
+  6 | |         opacity: 0;
+  7 | |         }
+  8 | |         to {
+  9 | |           opacity: 1;
+ 10 | |         }
+ 11 | `->     `};
+ 12 |     `;
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx
new file mode 100644
index 00000000..f2300a83
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx
@@ -0,0 +1,3 @@
+import { styled, keyframes } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Button = /*#__PURE__*/ styled.button();
diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx
new file mode 100644
index 00000000..51ea218f
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx
@@ -0,0 +1,16 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const ResponsiveGrid = /*YAK Extracted CSS:
+.ResponsiveGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+  padding: 20px;
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.ResponsiveGrid);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr
new file mode 100644
index 00000000..3f99e0a8
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr
@@ -0,0 +1,7 @@
+  x atoms() must not be used inside selectors or media query
+   ,-[input.js:6:1]
+ 5 |   &:hover {
+ 6 |     ${atoms("bg-blue-700")}
+   :       ^^^^^^^^^^^^^^^^^^^^
+ 7 |   }
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr
new file mode 100644
index 00000000..3f99e0a8
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr
@@ -0,0 +1,7 @@
+  x atoms() must not be used inside selectors or media query
+   ,-[input.js:6:1]
+ 5 |   &:hover {
+ 6 |     ${atoms("bg-blue-700")}
+   :       ^^^^^^^^^^^^^^^^^^^^
+ 7 |   }
+   `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx
new file mode 100644
index 00000000..9eb6d875
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx
@@ -0,0 +1,3 @@
+import { styled, atoms } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700"));
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx
new file mode 100644
index 00000000..83441594
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx
@@ -0,0 +1,3 @@
+import { styled, atoms } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"));
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr
new file mode 100644
index 00000000..8cd35f1c
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr
@@ -0,0 +1,11 @@
+  x The shorthand access to the variable "$pageHeaderHeight" is not allowed in a nested expression.
+  | To be able to use the property turn it into a CSS variable by wrapping it in a function:
+  | 
+  | ${() => $pageHeaderHeight};
+  | 
+    ,-[input.js:17:1]
+ 16 |     ` : css`
+ 17 |       margin-top: ${$pageHeaderHeight}px;
+    :                     ^^^^^^^^^^^^^^^^^
+ 18 |     `};
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr
new file mode 100644
index 00000000..8cd35f1c
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr
@@ -0,0 +1,11 @@
+  x The shorthand access to the variable "$pageHeaderHeight" is not allowed in a nested expression.
+  | To be able to use the property turn it into a CSS variable by wrapping it in a function:
+  | 
+  | ${() => $pageHeaderHeight};
+  | 
+    ,-[input.js:17:1]
+ 16 |     ` : css`
+ 17 |       margin-top: ${$pageHeaderHeight}px;
+    :                     ^^^^^^^^^^^^^^^^^
+ 18 |     `};
+    `----
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx
new file mode 100644
index 00000000..554e6410
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx
@@ -0,0 +1,25 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+// example taken from https://github.com/jantimon/next-yak/issues/208 
+const spacing = "20px";
+const ContainerFluid = /*YAK Extracted CSS:
+.ContainerFluid {
+  position: relative;
+  margin: 0 auto;
+  padding-top: 20px;
+  max-width: 100%;
+}
+.ContainerFluid__$isApp {
+  margin-top: unset;
+}
+.ContainerFluid__not_$isApp {
+  margin-top: px;
+}
+.ContainerFluid {
+  margin-top: var(--ym7uBBu);
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.ContainerFluid, ({ $isApp, $pageHeaderHeight })=>$isApp ? /*#__PURE__*/ css(__styleYak.ContainerFluid__$isApp) : /*#__PURE__*/ css(__styleYak.ContainerFluid__not_$isApp), {
+    "style": {
+        "--ym7uBBu": __yak_unitPostFix(({ $pageHeaderHeight })=>$pageHeaderHeight, "px")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx
new file mode 100644
index 00000000..d6806085
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx
@@ -0,0 +1,32 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Card = /*YAK Extracted CSS:
+.Card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  h2 {
+    color: #333;
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+  p {
+    color: #666;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  .card-footer {
+    margin-top: 20px;
+    text-align: right;
+    button {
+      padding: 8px 16px;
+      background-color: #28a745;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.Card);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx
new file mode 100644
index 00000000..51bf3dae
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx
@@ -0,0 +1,3 @@
+// Should not add an import to the .css module as no css has been extracted
+import { styled } from "next-yak/internal";
+export const isYak = typeof styled === "function";
diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/no-yak/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/no-yak/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx
new file mode 100644
index 00000000..99e190c7
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx
@@ -0,0 +1,6 @@
+// @ts-ignore
+import styled from "styled-components";
+// Should not be transformed as it is NOT yak
+export const StyledComponent = styled.button`
+  color: red;
+`;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx
new file mode 100644
index 00000000..20a5fa16
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx
@@ -0,0 +1,29 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const FlexContainer = /*YAK Extracted CSS:
+.FlexContainer {
+  display: flex;
+  align-items: var(--ym7uBBu);
+  flex-direction: var(--ym7uBBu1);
+  justify-content: var(--ym7uBBu2);
+  padding: 20px;
+  margin-bottom: var(--ym7uBBu3);
+  top: var(--ym7uBBu4);
+  background-color: #f0f0f0;
+}
+.FlexContainer__ {
+  bottom: var(--ym7uBBu5);
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, ({ $bottom })=>/*#__PURE__*/ css(__styleYak.FlexContainer__, {
+        "style": {
+            "--ym7uBBu5": __yak_unitPostFix($bottom * 20, "%")
+        }
+    }), {
+    "style": {
+        "--ym7uBBu": ({ $align })=>$align || 'stretch',
+        "--ym7uBBu1": ({ $direction })=>$direction || 'row',
+        "--ym7uBBu2": ({ $justify })=>$justify || 'flex-start',
+        "--ym7uBBu3": __yak_unitPostFix(({ $marginBottom })=>$marginBottom || '0', "px"),
+        "--ym7uBBu4": __yak_unitPostFix(({ $top })=>$top * 20, "%")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx
new file mode 100644
index 00000000..f03c6889
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx
@@ -0,0 +1,15 @@
+// @ts-ignore
+import styled from "styled-components";
+import { styled as styledYak } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const textColor = "red";
+// Should be transformed as it is yak
+export const CustomThemedButton = /*YAK Extracted CSS:
+.CustomThemedButton {
+  color: blue;
+}
+*/ /*#__PURE__*/ styledYak.button(__styleYak.CustomThemedButton);
+// Should not be transformed as it is NOT yak
+export const StyledComponent = styled.button`
+  color: ${textColor};
+`;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx
similarity index 100%
rename from packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx
rename to packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx
diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx
new file mode 100644
index 00000000..fa9d745c
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { styled } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+const ThemedComponent = /*YAK Extracted CSS:
+.ThemedComponent {
+  background-color: var(--ym7uBBu);
+  color: var(--ym7uBBu1);
+  padding: 20px;
+  border-radius: 8px;
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.ThemedComponent, {
+    "style": {
+        "--ym7uBBu": (props)=>props.theme.background,
+        "--ym7uBBu1": (props)=>props.theme.text
+    }
+});

From 3d6e50568f25df3409dfba4972806c24a93bae6c Mon Sep 17 00:00:00 2001
From: Jan Nicklas <j.nicklas@me.com>
Date: Wed, 4 Dec 2024 17:16:25 +0100
Subject: [PATCH 3/3] allow unquoted urls (#227)

Co-authored-by: Luca Schneider <7972860+Mad-Kat@users.noreply.github.com>
---
 .changeset/itchy-brooms-kick.md               |  5 ++
 .../yak-swc/css_in_js_parser/src/parse_css.rs | 48 ++++++++++++++++++-
 ...arse_css_complete_css_with_media_rule.snap |  3 +-
 ...ss__tests__parse_css_incomplete_css_1.snap |  1 +
 ...omplete_css_1_ending_inside_a_comment.snap |  1 +
 ...1_ending_inside_a_double_quote_string.snap |  1 +
 ...complete_css_1_ending_inside_a_string.snap |  1 +
 ...ete_css_1_ending_inside_parens_string.snap | 31 ++++++++++++
 ...mplete_css_1_ending_outside_a_comment.snap |  1 +
 ..._css_incomplete_css_1_with_media_rule.snap |  1 +
 ...complete_css_ending_without_semicolon.snap |  1 +
 ...complete_css_ending_without_semicolon.snap |  2 +
 ...se_css_starting_with_an_invalid_curly.snap |  2 +-
 .../yak_swc/tests/fixture/parens/input.tsx    | 10 ++++
 .../tests/fixture/parens/output.dev.tsx       | 19 ++++++++
 .../tests/fixture/parens/output.prod.tsx      | 19 ++++++++
 16 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/itchy-brooms-kick.md
 create mode 100644 packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_parens_string.snap
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/parens/input.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx
 create mode 100644 packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx

diff --git a/.changeset/itchy-brooms-kick.md b/.changeset/itchy-brooms-kick.md
new file mode 100644
index 00000000..5de51a04
--- /dev/null
+++ b/.changeset/itchy-brooms-kick.md
@@ -0,0 +1,5 @@
+---
+"yak-swc": patch
+---
+
+fix a parsing bug for unquoted urls inside url()
diff --git a/packages/yak-swc/css_in_js_parser/src/parse_css.rs b/packages/yak-swc/css_in_js_parser/src/parse_css.rs
index 380feb02..374c7658 100644
--- a/packages/yak-swc/css_in_js_parser/src/parse_css.rs
+++ b/packages/yak-swc/css_in_js_parser/src/parse_css.rs
@@ -11,6 +11,7 @@ pub struct ParserState {
   pub current_scopes: Vec<CssScope>,
   pub current_declaration: Declaration,
   pub pending_css_segment: String,
+  pub paren_depth: usize,
 }
 
 impl ParserState {
@@ -23,6 +24,7 @@ impl ParserState {
       current_scopes: Vec::new(),
       current_declaration: Declaration::new(),
       pending_css_segment: String::new(),
+      paren_depth: 0,
     }
   }
 }
@@ -97,6 +99,7 @@ pub fn parse_css(
     state.current_comment_state = CommentStateType::None;
     state.is_inside_property_value = false;
     state.is_inside_at_rule = false;
+    state.paren_depth = 0;
     state.current_declaration = Declaration::new();
     state.pending_css_segment.clone() + css_string
   } else {
@@ -171,9 +174,20 @@ pub fn parse_css(
       }
     }
 
+    // Detect parens outside of strings for property values
+    // e.g.
+    // .foo { background: url('https://example.com'); }
+    if state.is_inside_string.is_none() && state.is_inside_property_value {
+      if current_character == '(' {
+        state.paren_depth += 1;
+      } else if current_character == ')' && state.paren_depth > 0 {
+        state.paren_depth -= 1;
+      }
+    }
+
     // Inside a string, just add the character to the current code no matter what
     // e.g. content: "{ ; } @ !"
-    if state.is_inside_string.is_some() {
+    if state.is_inside_string.is_some() || state.paren_depth > 0 {
       current_code.push(current_character);
       state.current_declaration.value.push(current_character);
       char_position += 1;
@@ -389,6 +403,19 @@ mod tests {
     assert_debug_snapshot!((state, declarations));
   }
 
+  #[test]
+  fn test_parse_css_incomplete_css_1_ending_inside_parens_string() {
+    let (state, declarations) = parse_css(
+      r#"
+        .foo {
+                .fancy {
+                        background: url(https://example.com
+    "#,
+      None,
+    );
+    assert_debug_snapshot!((state, declarations));
+  }
+
   #[test]
   fn test_parse_css_incomplete_css_1_ending_outside_a_comment() {
     let (state, declarations) = parse_css(
@@ -437,7 +464,7 @@ mod tests {
           }
         }
       }
-      background: url("https://example.com");
+      background: url(https://example.com);
       body {
         padding: 0;
       }
@@ -494,4 +521,21 @@ mod tests {
     );
     assert_debug_snapshot!((state, declarations));
   }
+
+  #[test]
+  fn test_parse_css_with_dynamic_values() {
+    let (state1, _) = parse_css(
+      r#"
+          .foo {
+              transform: translate(-50%, -50%) rotate("#,
+      None,
+    );
+    let (state2, _) = parse_css(r#"20deg) translate(0, -88px) rotate("#, Some(state1));
+    let (_, declarations3) = parse_css(r#"90deg);"#, Some(state2));
+    assert_eq!(declarations3.len(), 1);
+    assert_eq!(
+      declarations3[0].value.trim(),
+      "translate(-50%, -50%) rotate(20deg) translate(0, -88px) rotate(90deg)"
+    );
+  }
 }
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_complete_css_with_media_rule.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_complete_css_with_media_rule.snap
index fa67ce3b..8d1b33a3 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_complete_css_with_media_rule.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_complete_css_with_media_rule.snap
@@ -16,6 +16,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "",
+        paren_depth: 0,
     },
     [
         Declaration {
@@ -58,7 +59,7 @@ expression: "(state, declarations)"
         },
         Declaration {
             property: "background",
-            value: "url(\"https://example.com\")",
+            value: "url(https://example.com)",
             scope: [
                 CssScope {
                     name: ".foo",
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1.snap
index 7df156f9..5f2ae649 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1.snap
@@ -25,6 +25,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "",
+        paren_depth: 0,
     },
     [
         Declaration {
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_comment.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_comment.snap
index 9419297e..8ab5b879 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_comment.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_comment.snap
@@ -25,6 +25,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "",
+        paren_depth: 0,
     },
     [],
 )
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_double_quote_string.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_double_quote_string.snap
index 20c74c5d..42fe92e2 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_double_quote_string.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_double_quote_string.snap
@@ -27,6 +27,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "background: url(\"https://example.com\n    ",
+        paren_depth: 1,
     },
     [],
 )
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_string.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_string.snap
index daaad3cc..c1c3abe0 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_string.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_a_string.snap
@@ -27,6 +27,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "background: url('https://example.com\n    ",
+        paren_depth: 1,
     },
     [],
 )
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_parens_string.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_parens_string.snap
new file mode 100644
index 00000000..c9841d3b
--- /dev/null
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_inside_parens_string.snap
@@ -0,0 +1,31 @@
+---
+source: css_in_js_parser/src/parse_css.rs
+expression: "(state, declarations)"
+---
+(
+    ParserState {
+        is_inside_string: None,
+        current_comment_state: None,
+        is_inside_property_value: true,
+        is_inside_at_rule: false,
+        current_scopes: [
+            CssScope {
+                name: ".foo",
+                scope_type: Selector,
+            },
+            CssScope {
+                name: ".fancy",
+                scope_type: Selector,
+            },
+        ],
+        current_declaration: Declaration {
+            property: "background",
+            value: "url(https://example.com\n    ",
+            scope: [],
+            closed: false,
+        },
+        pending_css_segment: "background: url(https://example.com\n    ",
+        paren_depth: 1,
+    },
+    [],
+)
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_outside_a_comment.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_outside_a_comment.snap
index bd9ce838..0ce2f8f9 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_outside_a_comment.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_ending_outside_a_comment.snap
@@ -25,6 +25,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "color: blue\n",
+        paren_depth: 0,
     },
     [],
 )
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_with_media_rule.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_with_media_rule.snap
index a66dab51..21f20546 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_with_media_rule.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_1_with_media_rule.snap
@@ -33,6 +33,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "",
+        paren_depth: 0,
     },
     [
         Declaration {
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_ending_without_semicolon.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_ending_without_semicolon.snap
index 419db925..a6f0270f 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_ending_without_semicolon.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_incomplete_css_ending_without_semicolon.snap
@@ -21,6 +21,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "color: orange\n",
+        paren_depth: 0,
     },
     [],
 )
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_resume_incomplete_css_ending_without_semicolon.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_resume_incomplete_css_ending_without_semicolon.snap
index 47db6d52..4bac12f2 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_resume_incomplete_css_ending_without_semicolon.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_resume_incomplete_css_ending_without_semicolon.snap
@@ -21,6 +21,7 @@ expression: "(state1, state2, all_declarations)"
             closed: false,
         },
         pending_css_segment: "color: orange\n",
+        paren_depth: 0,
     },
     ParserState {
         is_inside_string: None,
@@ -40,6 +41,7 @@ expression: "(state1, state2, all_declarations)"
             closed: false,
         },
         pending_css_segment: "",
+        paren_depth: 0,
     },
     [
         Declaration {
diff --git a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_starting_with_an_invalid_curly.snap b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_starting_with_an_invalid_curly.snap
index 89d0d714..a6f0270f 100644
--- a/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_starting_with_an_invalid_curly.snap
+++ b/packages/yak-swc/css_in_js_parser/src/snapshots/css_in_js_parser__parse_css__tests__parse_css_starting_with_an_invalid_curly.snap
@@ -1,6 +1,5 @@
 ---
 source: css_in_js_parser/src/parse_css.rs
-assertion_line: 496
 expression: "(state, declarations)"
 ---
 (
@@ -22,6 +21,7 @@ expression: "(state, declarations)"
             closed: false,
         },
         pending_css_segment: "color: orange\n",
+        paren_depth: 0,
     },
     [],
 )
diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/input.tsx
new file mode 100644
index 00000000..09268119
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/parens/input.tsx
@@ -0,0 +1,10 @@
+import { styled, css } from "next-yak";
+
+export const Card = styled.div`
+  background: url("/card-bg.jpg") no-repeat;
+  ${({$active}) => $active && css`
+    backgorund: url(/card-bg-active.jpg) no-repeat;
+  `}
+   transform: translate(-50%, -50%) rotate(${({ index }) => index * 30}deg)
+      translate(0, -88px) rotate(${({ index }) => -index * 30}deg);
+`; 
\ No newline at end of file
diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx
new file mode 100644
index 00000000..d96c2756
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx
@@ -0,0 +1,19 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Card = /*YAK Extracted CSS:
+.Card {
+  background: url("/card-bg.jpg") no-repeat;
+}
+.Card__$active {
+  backgorund: url(/card-bg-active.jpg) no-repeat;
+}
+.Card {
+  transform: translate(-50%, -50%) rotate(var(--Card__transform_m7uBBu))
+translate(0, -88px) rotate(var(--Card__transform_m7uBBu-01));
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.Card, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Card__$active), {
+    "style": {
+        "--Card__transform_m7uBBu": __yak_unitPostFix(({ index })=>index * 30, "deg"),
+        "--Card__transform_m7uBBu-01": __yak_unitPostFix(({ index })=>-index * 30, "deg")
+    }
+});
diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx
new file mode 100644
index 00000000..66ae0b79
--- /dev/null
+++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx
@@ -0,0 +1,19 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+export const Card = /*YAK Extracted CSS:
+.Card {
+  background: url("/card-bg.jpg") no-repeat;
+}
+.Card__$active {
+  backgorund: url(/card-bg-active.jpg) no-repeat;
+}
+.Card {
+  transform: translate(-50%, -50%) rotate(var(--ym7uBBu))
+translate(0, -88px) rotate(var(--ym7uBBu1));
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.Card, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Card__$active), {
+    "style": {
+        "--ym7uBBu": __yak_unitPostFix(({ index })=>index * 30, "deg"),
+        "--ym7uBBu1": __yak_unitPostFix(({ index })=>-index * 30, "deg")
+    }
+});