fix css prop

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

@@ -147,6 +147,7 @@ pub struct TransformCssMixin {
   export_name: Option<ScopedVariableReference>,
   is_exported: bool,
   is_within_jsx_attribute: bool,
+  class_name: Option<String>,
 }
 
 impl TransformCssMixin {
@@ -155,6 +156,7 @@ impl TransformCssMixin {
       export_name: None,
       is_exported,
       is_within_jsx_attribute,
+      class_name: None,
     }
   }
 }
@@ -168,12 +170,11 @@ impl YakTransform for TransformCssMixin {
   ) -> ParserState {
     self.export_name = Some(declaration_name.clone());
     let mut parser_state = ParserState::new();
-    // TODO: Remove the unused scope once nested mixins work again
+    let css_identifier =
+      naming_convention.get_css_class_name(&declaration_name.to_readable_string());
+    self.class_name = Some(css_identifier.clone());
     parser_state.current_scopes = vec![CssScope {
-      name: format!(
-        ".{}",
-        naming_convention.generate_unique_name_for_variable(declaration_name)
-      ),
+      name: format!("// cssmodules-pure-ignore\n:global(.{})", css_identifier),
       scope_type: ScopeType::AtRule,
     }];
     parser_state
@@ -230,12 +231,7 @@ impl YakTransform for TransformCssMixin {
         arguments.push(
           Expr::Lit(Lit::Str(Str {
             span: DUMMY_SP,
-            value: self
-              .export_name
-              .clone()
-              .unwrap()
-              .to_readable_string()
-              .into(),
+            value: self.class_name.as_ref().unwrap().as_str().into(),
             raw: None,
           }))
           .into(),

packages/yak-swc/yak_swc/tests/fixture/css-prop/output.tsx

@@ -1,52 +1,58 @@
 import { css, __yak_mergeCssProp } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 const Elem = ()=><div {.../*YAK Extracted CSS:
-.Elem {
+// cssmodules-pure-ignore
+:global(.Elem_m7uBBu) {
   color: red;
 }
-*/ /*#__PURE__*/ css("Elem")({})}/>;
+*/ /*#__PURE__*/ css("Elem_m7uBBu")({})}/>;
 const Elem2 = ()=><div {...__yak_mergeCssProp({
         className: "test-class"
     }, /*YAK Extracted CSS:
-.Elem2 {
+// cssmodules-pure-ignore
+:global(.Elem2_m7uBBu) {
   color: blue;
 }
-*/ /*#__PURE__*/ css("Elem2")({}))}/>;
+*/ /*#__PURE__*/ css("Elem2_m7uBBu")({}))}/>;
 const Elem3 = ()=><div {...__yak_mergeCssProp({
         style: {
             padding: "5px"
         }
     }, /*YAK Extracted CSS:
-.Elem3 {
+// cssmodules-pure-ignore
+:global(.Elem3_m7uBBu) {
   padding: 10px;
 }
-*/ /*#__PURE__*/ css("Elem3")({}))}/>;
+*/ /*#__PURE__*/ css("Elem3_m7uBBu")({}))}/>;
 const Elem4 = (props: any)=><div {...__yak_mergeCssProp({
         ...props
     }, /*YAK Extracted CSS:
-.Elem4 {
+// cssmodules-pure-ignore
+:global(.Elem4_m7uBBu) {
   color: green;
 }
-*/ /*#__PURE__*/ css("Elem4")({}))}/>;
+*/ /*#__PURE__*/ css("Elem4_m7uBBu")({}))}/>;
 const Elem5 = (props: any)=><div {...__yak_mergeCssProp({
         ...props.a,
         ...props.b
     }, /*YAK Extracted CSS:
-.Elem5 {
+// cssmodules-pure-ignore
+:global(.Elem5_m7uBBu) {
   color: purple;
 }
-*/ /*#__PURE__*/ css("Elem5")({}))}/>;
+*/ /*#__PURE__*/ css("Elem5_m7uBBu")({}))}/>;
 const Elem6 = ()=><div {...__yak_mergeCssProp({
         className: "main",
         style: {
             fontWeight: "bold"
         }
     }, /*YAK Extracted CSS:
-.Elem6 {
+// cssmodules-pure-ignore
+:global(.Elem6_m7uBBu) {
   font-size: 16px;
 }
-*/ /*#__PURE__*/ css("Elem6")({}))}/>;
+*/ /*#__PURE__*/ css("Elem6_m7uBBu")({}))}/>;
 const Elem7 = ()=><div className="no-css"/>;
 const Elem8 = ()=><div {...__yak_mergeCssProp({
         className: "empty-css"
-    }, /*#__PURE__*/ css("Elem8")({}))}/>;
+    }, /*#__PURE__*/ css("Elem8_m7uBBu")({}))}/>;