Merge pull request #222 from dev-five-git/fix-classname

Fix classname gen logic

Author: owjs3901

.changeset/quick-views-guess.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix classname issue

libs/extractor/src/lib.rs

@@ -604,6 +604,39 @@ mod tests {
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box, Button as DevupButton, Center, css } from '@devup-ui/core'
+import clsx from 'clsx'
+
+<DevupButton
+      boxSizing="border-box"
+      className={clsx(
+        variants[variant],
+        isError && variant === 'default' && errorClassNames,
+        className,
+      )}
+      typography={
+        isPrimary
+          ? {
+              sm: 'buttonS',
+              md: 'buttonM',
+            }[size]
+          : undefined
+      }
+      {...props}
+    />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]

libs/extractor/src/prop_modify_utils.rs

@@ -318,19 +318,19 @@ fn merge_string_expressions<'a>(
                     raw: ast_builder.atom(&{
                         let trimmed = s.trim();
                         if trimmed.is_empty() {
-                            "".to_string()
-                        } else if idx == string_literals.len() - 1 {
+                            if idx == 0 {
+                                "".to_string()
+                            } else {
+                                " ".to_string()
+                            }
+                        } else {
                             let prefix = if idx == 0 { "" } else { " " };
                             let suffix = if string_literals.len() == other_expressions.len() {
                                 " "
                             } else {
                                 ""
                             };
                             format!("{prefix}{trimmed}{suffix}")
-                        } else if idx == string_literals.len() - 1 {
-                            trimmed.to_string()
-                        } else {
-                            format!("{trimmed} ")
                         }
                     }),
                     cooked: None,

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

@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box, Button as DevupButton, Center, css } from '@devup-ui/core'\nimport clsx from 'clsx'\n\n<DevupButton\n      boxSizing=\"border-box\"\n      className={clsx(\n        variants[variant],\n        isError && variant === 'default' && errorClassNames,\n        className,\n      )}\n      typography={\n        isPrimary\n          ? {\n              sm: 'buttonS',\n              md: 'buttonM',\n            }[size]\n          : undefined\n      }\n      {...props}\n    />\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "boxSizing",
+                value: "border-box",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Typography(
+            "buttonM",
+        ),
+        Typography(
+            "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",
+}