From 373fb4e53c340f4d2003263c1b94fd29daef6391 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Thu, 3 Jul 2025 16:37:07 +0900
Subject: [PATCH] Fix className issue

---
 .changeset/tall-hats-sell.md                  |  5 +
 libs/extractor/src/lib.rs                     | 34 +++++++
 libs/extractor/src/prop_modify_utils.rs       |  2 +-
 .../extractor__tests__extract_selector-2.snap | 94 +++++++++++++++++++
 4 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-hats-sell.md
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap

diff --git a/.changeset/tall-hats-sell.md b/.changeset/tall-hats-sell.md
new file mode 100644
index 00000000..7a4dfda2
--- /dev/null
+++ b/.changeset/tall-hats-sell.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix className issue (multiple selectors)
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index f9aa7ad3..7218f442 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -1351,6 +1351,40 @@ import clsx from 'clsx'
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r"import {Center} from '@devup-ui/core'
+    <Center
+      _active={
+        variant !== 'disabled' && {
+          boxShadow: 'none',
+          transform: 'scale(0.95)',
+        }
+      }
+      _hover={
+        variant !== 'disabled' && {
+          boxShadow: [
+            '0px 1px 3px 0px rgba(0, 0, 0, 0.25)',
+            null,
+            '0px 0px 15px 0px rgba(0, 0, 0, 0.25)',
+          ],
+        }
+      }
+      {...props}
+    >
+      {children}
+    </Center>
+        ",
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]
diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs
index c81b77ca..7a056e80 100644
--- a/libs/extractor/src/prop_modify_utils.rs
+++ b/libs/extractor/src/prop_modify_utils.rs
@@ -325,7 +325,7 @@ fn merge_string_expressions<'a>(
                             }
                         } else {
                             let prefix = if idx == 0 { "" } else { " " };
-                            let suffix = if string_literals.len() == other_expressions.len() {
+                            let suffix = if string_literals.len() <= other_expressions.len() {
                                 " "
                             } else {
                                 ""
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
new file mode 100644
index 00000000..36db27d8
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
@@ -0,0 +1,94 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Center} from '@devup-ui/core'\n    <Center\n      _active={\n        variant !== 'disabled' && {\n          boxShadow: 'none',\n          transform: 'scale(0.95)',\n        }\n      }\n      _hover={\n        variant !== 'disabled' && {\n          boxShadow: [\n            '0px 1px 3px 0px rgba(0, 0, 0, 0.25)',\n            null,\n            '0px 0px 15px 0px rgba(0, 0, 0, 0.25)',\n          ],\n        }\n      }\n      {...props}\n    >\n      {children}\n    </Center>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "alignItems",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "boxShadow",
+                value: "0 0 15px 0 rgba(0,0,0,0.25)",
+                level: 2,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "boxShadow",
+                value: "0 1px 3px 0 rgba(0,0,0,0.25)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "boxShadow",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "justifyContent",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(0.95)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`d0 d1 d2 ${variant !== \"disabled\" ? \"d3 d4\" : \"\"} ${variant !== \"disabled\" ? \"d5 d6\" : \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n",
+}