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'
+
+ {children}
+
+ ",
+ 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 \n {children}\n \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\n {children}\n
;\n",
+}