Fix className logic

.changeset/chilly-mice-leave.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Refactor className logic

libs/extractor/src/lib.rs

@@ -2285,6 +2285,40 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.jsx",
+                r#"import { VStack } from '@devup-ui/core'
+
+export default function Card({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <VStack
+      _active={{
+        boxShadow: 'none',
+        transform: 'scale(0.95)',
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </VStack>
+  )
+}
+
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]

libs/extractor/src/prop_modify_utils.rs

@@ -133,6 +133,8 @@
             }
         }
     }
+    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 @@
         ]
         .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(),
     )
@@ -245,76 +256,67 @@
     let mut string_literals: std::vec::Vec<String> = vec![];
     let mut other_expressions = vec![];
     let mut prev_str = String::new();
-    for (idx, ex) in expressions.iter().enumerate() {
+    for ex in expressions.iter() {
         match ex {
             Expression::StringLiteral(literal) => {
-                prev_str.push_str(
-                    format!(
-                        "{}{}",
-                        if prev_str.trim().is_empty() && other_expressions.is_empty() {
-                            ""
-                        } else {
-                            " "
-                        },
-                        literal.value.trim()
-                    )
-                    .as_str(),
+                let target_prev = prev_str.trim();
+                let target = literal.value.trim();
+                prev_str = format!(
+                    "{}{}{}",
+                    target_prev,
+                    if target_prev.is_empty() { "" } else { " " },
+                    target
                 );
             }
             Expression::TemplateLiteral(template) => {
                 for (idx, q) in template.quasis.iter().enumerate() {
-                    if !prev_str.is_empty() {
+                    let target_prev = prev_str.trim();
+                    let target = q.value.raw.trim();
+                    if idx < template.quasis.len() - 1 {
                         string_literals.push(format!(
-                            "{}{}{}{}",
-                            prev_str.trim(),
-                            if !prev_str.trim().is_empty() { " " } else { "" },
-                            q.value.raw.trim(),
-                            if idx == template.quasis.len() - 1 {
-                                ""
-                            } else {
+                            "{}{}{}{}{}",
+                            if !other_expressions.is_empty() || idx > 0 {
                                 " "
-                            }
-                        ));
-                        prev_str = String::new();
-                    } else if q.tail {
-                        prev_str = q.value.raw.trim().to_string();
-                    } else {
-                        string_literals.push(format!(
-                            "{}{}{}",
-                            if idx == 0
-                                && other_expressions.is_empty()
-                                && string_literals.is_empty()
-                            {
-                                ""
                             } else {
-                                " "
-                            },
-                            q.value.raw.trim(),
-                            if q.value.raw.trim().is_empty() || !q.value.raw.ends_with(' ') {
                                 ""
-                            } else {
+                            },
+                            target_prev,
+                            if !target_prev.is_empty() { " " } else { "" },
+                            target,
+                            if !target.is_empty() && !target.ends_with("typo-") {
                                 " "
+                            } else {
+                                ""
                             }
                         ));
-                        prev_str = String::new();
+                    } else {
+                        prev_str = q.value.raw.trim().to_string();
                     }
                 }
                 other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
             }
             ex => {
+                let target_prev = prev_str.trim();
                 string_literals.push(format!(
-                    "{}{}",
-                    prev_str.trim(),
-                    if idx > 0 { " " } else { "" }
+                    "{}{}{}",
+                    if !other_expressions.is_empty() {
+                        " "
+                    } else {
+                        ""
+                    },
+                    target_prev,
+                    if !target_prev.is_empty() { " " } else { "" }
                 ));
                 other_expressions.push(ex.clone_in(ast_builder.allocator));
                 prev_str = String::new();
             }
         }
     }
-    if !prev_str.is_empty() {
-        string_literals.push(prev_str.trim_end().to_string());
-    }
+    string_literals.push(format!(
+        "{}{}",
+        if !prev_str.trim().is_empty() { " " } else { "" },
+        prev_str.trim(),
+    ));
     if other_expressions.is_empty() {
         return Some(ast_builder.expression_string_literal(
             SPAN,

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",
 }