Fix className logic

Author: owjs3901

libs/extractor/src/prop_modify_utils.rs

@@ -133,6 +133,8 @@ pub fn modify_props<'a>(
             }
         }
     }
+    println!("class_name_prop: {:?}", class_name_prop);
+    println!("style_prop: {:?}", style_prop);
     if let Some(ex) = get_class_name_expression(
         ast_builder,
         &class_name_prop,
@@ -179,17 +181,26 @@ pub fn get_class_name_expression<'a>(
         ]
         .into_iter()
         .flatten()
-        .chain(spread_props.iter().map(|ex| {
-            convert_class_name(
-                ast_builder,
-                &Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
-                    SPAN,
-                    ex.clone_in(ast_builder.allocator),
-                    ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
-                    true,
-                )),
-            )
-        }))
+        .chain(if class_name_prop.is_some() {
+            vec![]
+        } else {
+            spread_props
+                .iter()
+                .map(|ex| {
+                    convert_class_name(
+                        ast_builder,
+                        &Expression::StaticMemberExpression(
+                            ast_builder.alloc_static_member_expression(
+                                SPAN,
+                                ex.clone_in(ast_builder.allocator),
+                                ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
+                                true,
+                            ),
+                        ),
+                    )
+                })
+                .collect::<Vec<_>>()
+        })
         .collect::<Vec<_>>()
         .as_slice(),
     )

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap

@@ -20,5 +20,5 @@ ToBTreeSet {
             "buttonS",
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"} ${props?.className || \"\"}`} style={props?.style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"}`} style={props?.style} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap

@@ -53,5 +53,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className,...props }) {\n\treturn <div {...props} className={`${className || \"\"} d0 d1 d2 d3 ${props?.className || \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className,...props }) {\n\treturn <div {...props} className={`${className || \"\"} d0 d1 d2 d3`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
 }

libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap

@@ -14,5 +14,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: `a d0 ${props?.className || \"\"}`,\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" },\n\t\t...props?.style\n\t}\n});\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: \"a d0\",\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" },\n\t\t...props?.style\n\t}\n});\n",
 }