diff --git a/.changepacks/changepack_log_0cJIQ-UBtwiXt8YhHyNj2.json b/.changepacks/changepack_log_0cJIQ-UBtwiXt8YhHyNj2.json
new file mode 100644
index 00000000..8268d9f7
--- /dev/null
+++ b/.changepacks/changepack_log_0cJIQ-UBtwiXt8YhHyNj2.json
@@ -0,0 +1,5 @@
+{
+  "changes": { "bindings/devup-ui-wasm/package.json": "Patch" },
+  "note": "Fix selector issue",
+  "date": "2025-11-19T07:56:23.681473700Z"
+}
diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index e31781a5..e070a887 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -67,7 +67,12 @@ impl Ord for StyleSelector {
                 if c == Ordering::Equal { aa.cmp(bb) } else { c }
             }
             (StyleSelector::Selector(a), StyleSelector::Selector(b)) => {
-                get_selector_order(a).cmp(&get_selector_order(b))
+                let order_cmp = get_selector_order(a).cmp(&get_selector_order(b));
+                if order_cmp == Ordering::Equal {
+                    a.cmp(b)
+                } else {
+                    order_cmp
+                }
             }
             (
                 StyleSelector::Media {
diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs
index 650bda0f..c78973d8 100644
--- a/libs/extractor/src/extractor/extract_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_style_from_expression.rs
@@ -197,51 +197,47 @@ pub fn extract_style_from_expression<'a>(
                         }
                     }
 
-                    let sel = part_of_selector
-                        .iter()
-                        .map(|name| {
-                            if let Some(selector) = selector {
-                                if name.starts_with("_") {
-                                    if name.starts_with("_theme") {
-                                        StyleSelector::from([
-                                            to_kebab_case(name.strip_prefix("_").unwrap_or(name))
-                                                .as_str(),
-                                            &selector.to_string(),
-                                        ])
-                                        .to_string()
-                                    } else {
-                                        StyleSelector::from([
-                                            &selector.to_string(),
-                                            to_kebab_case(name.strip_prefix("_").unwrap_or(name))
-                                                .as_str(),
-                                        ])
-                                        .to_string()
-                                    }
+                    for sel in part_of_selector.iter().map(|name| {
+                        if let Some(selector) = selector {
+                            if name.starts_with("_") {
+                                if name.starts_with("_theme") {
+                                    StyleSelector::from([
+                                        to_kebab_case(name.strip_prefix("_").unwrap_or(name))
+                                            .as_str(),
+                                        &selector.to_string(),
+                                    ])
+                                    .to_string()
                                 } else {
-                                    name.replace("&", &selector.to_string())
+                                    StyleSelector::from([
+                                        &selector.to_string(),
+                                        to_kebab_case(name.strip_prefix("_").unwrap_or(name))
+                                            .as_str(),
+                                    ])
+                                    .to_string()
                                 }
-                            } else if name.starts_with("_") {
-                                StyleSelector::from(
-                                    to_kebab_case(name.strip_prefix("_").unwrap_or(name)).as_str(),
-                                )
-                                .to_string()
                             } else {
-                                StyleSelector::from(name.strip_prefix("_").unwrap_or(name))
-                                    .to_string()
+                                name.replace("&", &selector.to_string())
                             }
-                        })
-                        .collect::<Vec<_>>()
-                        .join(",");
-                    props.extend(
-                        extract_style_from_expression(
-                            ast_builder,
-                            None,
-                            &mut o.value,
-                            level,
-                            &Some(StyleSelector::Selector(sel)),
-                        )
-                        .styles,
-                    );
+                        } else if name.starts_with("_") {
+                            StyleSelector::from(
+                                to_kebab_case(name.strip_prefix("_").unwrap_or(name)).as_str(),
+                            )
+                            .to_string()
+                        } else {
+                            StyleSelector::from(name.strip_prefix("_").unwrap_or(name)).to_string()
+                        }
+                    }) {
+                        props.extend(
+                            extract_style_from_expression(
+                                ast_builder,
+                                None,
+                                &mut o.value,
+                                level,
+                                &Some(StyleSelector::Selector(sel)),
+                            )
+                            .styles,
+                        );
+                    }
                 }
             }
             return ExtractResult {
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index db2b1b95..4d8a11ee 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -2310,6 +2310,83 @@ import clsx from 'clsx'
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "& .a, & .b": {
+            bg: "$primary"
+          }
+        }} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".test-picker__day--keyboard-selected": {
+            _hover: {
+              bg: "$primary"
+            },
+            selectors: {
+              "&:active": {
+                bg: "$primary"
+              }
+            }
+          }
+        }} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".a, .b": {
+            _hover: {
+              bg: "$primary"
+            },
+            selectors: {
+              "&:active": {
+                bg: "$secondary"
+              }
+            }
+          }
+        }} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
index 216c5425..7c4889a1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_active\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_active\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,12 +11,25 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        ":root[data-theme=dark] &:hover,&:hover:active",
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
index 1e75c0f4..b1780baf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_placeholder\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_placeholder\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,12 +11,25 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        ":root[data-theme=dark] &:hover,&:hover::placeholder",
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
index 5e767817..5d2604ef 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,12 +11,25 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover::placeholder,&:hover:active",
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
index 0bdb507c..49754ace 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder\": {\n              color: \"red\"\n            },\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder\": {\n              color: \"red\"\n            },\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,7 +11,20 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover::placeholder,&:hover:active",
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
                     ),
                 ),
                 style_order: None,
@@ -31,5 +44,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
index fc099a49..555f570e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"&:active, _hover\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"&:active, _hover\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,12 +11,25 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover:active,&:hover:hover",
+                        "&:hover:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:hover",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
new file mode 100644
index 00000000..0cf0195f
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"& .a, & .b\": {\n            bg: \"$primary\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
new file mode 100644
index 00000000..08cbd693
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".test-picker__day--keyboard-selected\": {\n            _hover: {\n              bg: \"$primary\"\n            },\n            selectors: {\n              \"&:active\": {\n                bg: \"$primary\"\n              }\n            }\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .test-picker__day--keyboard-selected:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .test-picker__day--keyboard-selected:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
new file mode 100644
index 00000000..a0ac858a
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
@@ -0,0 +1,61 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".a, .b\": {\n            _hover: {\n              bg: \"$primary\"\n            },\n            selectors: {\n              \"&:active\": {\n                bg: \"$secondary\"\n              }\n            }\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$secondary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$secondary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
index dbec8301..2a1fea5d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"_hover, _active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"_hover, _active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,7 +11,33 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover,&:active",
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
                     ),
                 ),
                 style_order: None,
@@ -24,12 +50,12 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover,&:active",
+                        "&:active",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
index 13f4c23f..a15840aa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"&:hover,                 &:active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"&:hover,                 &:active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,7 +11,33 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover,&:active",
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
                     ),
                 ),
                 style_order: None,
@@ -24,12 +50,12 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:hover,&:active",
+                        "&:active",
                     ),
                 ),
                 style_order: None,
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
index 5a623d1d..4ad742bb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box\n          selectors={{\n            \"&:nth-last-child(2), &:nth-last-child(3)\": {\n              mx: 1\n            },\n            _nthLastChild: {\n              mx: 2\n            }\n          }}\n         />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box\n          selectors={{\n            \"&:nth-last-child(2), &:nth-last-child(3)\": {\n              mx: 1\n            },\n            _nthLastChild: {\n              mx: 2\n            }\n          }}\n         />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -11,7 +11,20 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:nth-last-child(2),&:nth-last-child(3)",
+                        "&:nth-last-child(2)",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(3)",
                     ),
                 ),
                 style_order: None,
@@ -37,7 +50,20 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "&:nth-last-child(2),&:nth-last-child(3)",
+                        "&:nth-last-child(2)",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(3)",
                     ),
                 ),
                 style_order: None,
@@ -57,5 +83,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f\" />;\n",
 }
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap
index b970478c..ce463f1f 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-7.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
-"*[role=group]:focus-visible .test{background:blue}*:hover .test{background:red}"
+"*:hover .test{background:red}*[role=group]:focus-visible .test{background:blue}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
index c3100e67..db1c6187 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
-":root[data-theme=dark] .test{margin-bottom:40px}:root[data-theme=dark] .test{margin-left:40px}:root[data-theme=light] .test{margin-left:50px}:root[data-theme=dark] .test{margin-right:40px}:root[data-theme=light] .test{margin-right:50px}:root[data-theme=dark] .test{margin-top:40px}"
+":root[data-theme=dark] .test{margin-bottom:40px}:root[data-theme=dark] .test{margin-left:40px}:root[data-theme=dark] .test{margin-right:40px}:root[data-theme=dark] .test{margin-top:40px}:root[data-theme=light] .test{margin-left:50px}:root[data-theme=light] .test{margin-right:50px}"
diff --git a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
index c9fc4d49..b7ae3323 100644
--- a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Controlled Input > should render with value 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -17,7 +17,7 @@ exports[`Controlled Input > should render with value 1`] = `
 exports[`Input > should have typography when typography is provided 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -31,7 +31,7 @@ exports[`Input > should have typography when typography is provided 1`] = `
 exports[`Input > should not have padding right when allowClear is false 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -45,7 +45,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = `
 exports[`Input > should not show clear button when value is empty 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -59,7 +59,7 @@ exports[`Input > should not show clear button when value is empty 1`] = `
 exports[`Input > should pass className prop to error message component 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -79,7 +79,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
 exports[`Input > should pass className prop to icon component 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <div
       aria-label="icon"
@@ -145,7 +145,7 @@ exports[`Input > should pass props to ClearButton component 1`] = `
 exports[`Input > should render disabled icon style when disabled is true 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <div
       aria-label="icon"
@@ -179,7 +179,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = `
 exports[`Input > should render error style when error is true 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -193,7 +193,7 @@ exports[`Input > should render error style when error is true 1`] = `
 exports[`Input > should render with allowClear prop 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -207,7 +207,7 @@ exports[`Input > should render with allowClear prop 1`] = `
 exports[`Input > should render with default props 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -221,7 +221,7 @@ exports[`Input > should render with default props 1`] = `
 exports[`Input > should render with disabled prop 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
@@ -236,7 +236,7 @@ exports[`Input > should render with disabled prop 1`] = `
 exports[`Input > should show clear button when value is not empty 1`] = `
 <div>
   <div
-    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+    class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
   >
     <input
       aria-label="input"
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
index 023314b7..7f7fbf75 100644
--- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Select > should render 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-16872530230555934585-1 box-sizing-0-border-box-2187736501337973943-1  "
   >
     <button
       aria-expanded="false"
@@ -28,7 +28,7 @@ exports[`Select > should render 1`] = `
 exports[`Select > should render with overflow screen 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-16872530230555934585-1 box-sizing-0-border-box-2187736501337973943-1  "
   >
     <button
       aria-expanded="true"
@@ -83,7 +83,7 @@ exports[`Select > should render with overflow screen 1`] = `
         Option 4
       </div>
       <div
-        class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+        class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-16872530230555934585-1 box-sizing-0-border-box-2187736501337973943-1  "
       >
         <div
           aria-expanded="false"
@@ -120,7 +120,7 @@ exports[`Select > should render with overflow screen 1`] = `
 exports[`Select > should render with typography prop 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 typo-body1 "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-16872530230555934585-1 box-sizing-0-border-box-2187736501337973943-1 typo-body1 "
   >
     <button
       aria-expanded="false"
@@ -146,7 +146,7 @@ exports[`Select > should render with x and y properties 1`] = `
 <div>
   <div
     aria-label="Select"
-    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-16872530230555934585-1 box-sizing-0-border-box-2187736501337973943-1  "
   >
     <button
       aria-expanded="false"
diff --git a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
index 40b81d24..3930081b 100644
--- a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -37,11 +37,11 @@ exports[`Stepper > should render 1`] = `
       </div>
     </button>
     <div
-      class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
+      class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-16872530230555934585-255 box-sizing-0-border-box-2187736501337973943-255"
     >
       <input
         aria-label="Stepper value"
-        class="width-0-60px--2 text-align-0-center--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
+        class="width-0-60px--2 text-align-0-center--2 border-radius-0-6px--2 display-0-none-14808099437505465214-2 display-0-none-3565067101072487361-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
         data-value="0"
         type="number"
         value="0"