diff --git a/.changeset/modern-sites-worry.md b/.changeset/modern-sites-worry.md
new file mode 100644
index 00000000..66d6aafc
--- /dev/null
+++ b/.changeset/modern-sites-worry.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix media query issue
diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index 596aa097..132e144c 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -336,6 +336,7 @@ mod tests {
     #[case("&:selected", 4)]
     #[case("&:disabled", 5)]
     #[case("&:not-exist", 99)]
+    #[case("&:not-exist, &:hover", 0)]
     #[case(":root[data-theme=dark] &:hover", 0)]
     #[case(":root[data-theme=dark] &:focus-visible", 1)]
     #[case(":root[data-theme=dark] &:focus", 2)]
diff --git a/libs/extractor/src/css_utils.rs b/libs/extractor/src/css_utils.rs
index 24ae4643..65862fdb 100644
--- a/libs/extractor/src/css_utils.rs
+++ b/libs/extractor/src/css_utils.rs
@@ -60,7 +60,8 @@ pub fn css_to_style<'a>(
                 let sel = input[..start].trim().to_string();
                 if sel.starts_with("@media") {
                     Some(StyleSelector::Media {
-                        query: sel.replace(" ", "")["@media".len()..].to_string(),
+                        query: sel.replace(" ", "").replace("and(", "and (")["@media".len()..]
+                            .to_string(),
                         selector: None,
                     })
                 } else {
@@ -268,11 +269,11 @@ mod tests {
         }",
         vec![
             ("border", "1px solid #000", Some(StyleSelector::Media {
-                query: "(min-width:768px)and(max-width:1024px)".to_string(),
+                query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
             ("color", "#FFF", Some(StyleSelector::Media {
-                query: "(min-width:768px)and(max-width:1024px)".to_string(),
+                query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
             ("border", "1px solid #000", Some(StyleSelector::Media {
@@ -338,19 +339,19 @@ mod tests {
         }",
         vec![
             ("border", "1px solid #FFF", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
             ("color", "#FFF", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
             ("border", "1px solid #000", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
             ("color", "#000", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
             ("border", "1px solid #FFF", Some(StyleSelector::Media {
@@ -392,11 +393,11 @@ mod tests {
                 selector: None,
             })),
             ("border", "1px solid #000", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
             ("color", "#000", Some(StyleSelector::Media {
-                query: "(max-width:768px)and(min-width:480px)".to_string(),
+                query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
         ]
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index e39825ce..4c5de0e5 100644
--- a/libs/sheet/src/lib.rs
+++ b/libs/sheet/src/lib.rs
@@ -71,9 +71,9 @@ impl ExtractStyle for StyleSheetProperty {
                 merge_selector(&self.class_name, self.selector.as_ref()),
                 multi
                     .into_iter()
-                    .map(|prop| format!("{}:{};", prop, convert_theme_variable_value(&self.value)))
+                    .map(|prop| format!("{}:{}", prop, convert_theme_variable_value(&self.value)))
                     .collect::<Vec<String>>()
-                    .join("")
+                    .join(";")
             ),
         }
     }
@@ -368,7 +368,7 @@ impl StyleSheet {
                         .join("");
                     css.push_str(
                         if let Some(break_point) = break_point {
-                            format!("\n@media (min-width:{break_point}px){{{inner_css}}}")
+                            format!("@media(min-width:{break_point}px){{{inner_css}}}")
                         } else {
                             inner_css
                         }
@@ -384,7 +384,7 @@ impl StyleSheet {
                         .join("");
                     css.push_str(
                         if let Some(break_point) = break_point {
-                            format!("\n@media (min-width:{break_point}px){{{inner_css}}}")
+                            format!("@media(min-width:{break_point}px){{{inner_css}}}")
                         } else {
                             inner_css
                         }
@@ -399,11 +399,17 @@ impl StyleSheet {
                         .join("");
                     css.push_str(
                         if let Some(break_point) = break_point {
+                            format!("@media(min-width:{break_point}px)and {media}{{{inner_css}}}")
+                        } else {
                             format!(
-                                "\n@media (min-width:{break_point}px) and {media}{{{inner_css}}}"
+                                "@media{}{{{}}}",
+                                if media.starts_with("(") {
+                                    media.clone()
+                                } else {
+                                    format!(" {media}")
+                                },
+                                inner_css.as_str()
                             )
-                        } else {
-                            format!("\n@media {}{{{}}}", media, inner_css.as_str())
                         }
                         .as_str(),
                     );
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap
index f2393096..5088707c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:768px){.test{margin-left:40px;margin-right:40px;}.test{margin-top:40px;margin-bottom:40px;}}"
+"@media(min-width:768px){.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css.snap b/libs/sheet/src/snapshots/sheet__tests__create_css.snap
index e80972ed..f2c4e3eb 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{margin-left:40px;margin-right:40px;}}"
+"@media(min-width:480px){.test{margin-left:40px;margin-right:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test.snap
index 34857e52..538c3e7e 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background:some}.test{background-color:red}}"
+"@media(min-width:480px){.test{background:some}.test{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap
index 9adb5083..441a6f06 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background-color:red}}\n@media (min-width:480px){.test{background:some}}"
+"@media(min-width:480px){.test{background-color:red}}@media(min-width:480px){.test{background:some}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-2.snap
index 19812568..7a9b1f02 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){div{background-color:red}}"
+"@media(min-width:480px){div{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-3.snap
index 4c4c5142..89a77013 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){div{background-color:red}}\n@media (min-width:768px){div{background-color:blue}}"
+"@media(min-width:480px){div{background-color:red}}@media(min-width:768px){div{background-color:blue}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-4.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-4.snap
index 486fb96f..d8694486 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-4.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-4.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){div{background-color:blue}}div{background-color:red}"
+"@media(min-width:480px){div{background-color:blue}}div{background-color:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test-2.snap
index 33689d2e..b38055ce 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-".test{display:flex}.test{display:none}\n@media (min-width:768px){.test{display:flex}}"
+".test{display:flex}.test{display:none}@media(min-width:768px){.test{display:flex}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap
index ece34908..223863ab 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_and_basic_sort_test.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background-color:some}}\n@media (min-width:480px){.test:hover{background-color:red}}"
+"@media(min-width:480px){.test{background-color:some}}@media(min-width:480px){.test:hover{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-2.snap
index 7e5d7ad4..0374d87c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background-color:red}.test:hover{background-color:some}}"
+"@media(min-width:480px){.test{background-color:red}.test:hover{background-color:some}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-3.snap
index 34857e52..538c3e7e 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background:some}.test{background-color:red}}"
+"@media(min-width:480px){.test{background:some}.test{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test.snap
index 20595798..2e9ef921 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_selector_sort_test.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){.test{background-color:some}.test:hover{background-color:red}}"
+"@media(min-width:480px){.test{background-color:some}.test:hover{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap b/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap
index 070dfa9d..9d7c0dc0 100644
--- a/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-".test{margin-top:40px;margin-bottom:40px;}\n@media print{.test{margin-left:40px;margin-right:40px;}}"
+".test{margin-top:40px;margin-bottom:40px}@media print{.test{margin-left:40px;margin-right:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__print_selector.snap b/libs/sheet/src/snapshots/sheet__tests__print_selector.snap
index cfca521e..bf6c7c5c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__print_selector.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__print_selector.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media print{.test{margin-left:40px;margin-right:40px;}.test{margin-top:40px;margin-bottom:40px;}}\n@media (min-width:480px) and print{.test{margin-left:40px;margin-right:40px;}.test{margin-top:40px;margin-bottom:40px;}}"
+"@media print{.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}@media(min-width:480px)and print{.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap
index 0b08388e..b9bc8cdf 100644
--- a/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:480px){*[role=group]:hover .test{margin-left:40px;margin-right:40px;}}\n@media (min-width:768px){*[role=group]:hover .test{margin-left:50px;margin-right:50px;}}"
+"@media(min-width:480px){*[role=group]:hover .test{margin-left:40px;margin-right:40px}}@media(min-width:768px){*[role=group]:hover .test{margin-left:50px;margin-right:50px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap
index 02bc7889..3d822c40 100644
--- a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-".test{margin-left:40px;margin-right:40px;}\n@media (min-width:480px){.test{margin-left:40px;margin-right:40px;}.test{margin-left:44px;margin-right:44px;}}\n@media (min-width:480px){.test{margin-left:50px;margin-right:50px;}}.test{margin-left:70px;margin-right:70px;}\n@media (min-width:480px){.test{margin-left:60px;margin-right:60px;}}"
+".test{margin-left:40px;margin-right:40px}@media(min-width:480px){.test{margin-left:40px;margin-right:40px}.test{margin-left:44px;margin-right:44px}}@media(min-width:480px){.test{margin-left:50px;margin-right:50px}}.test{margin-left:70px;margin-right:70px}@media(min-width:480px){.test{margin-left:60px;margin-right:60px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap
index 17a4f92f..1f664193 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-".test{margin-left:41px;margin-right:41px;}.test{margin-left:42px;margin-right:42px;}:root[data-theme=light] .test{margin-left:50px;margin-right:50px;}:root[data-theme=light] .test{margin-left:51px;margin-right:51px;}"
+".test{margin-left:41px;margin-right:41px}.test{margin-left:42px;margin-right:42px}:root[data-theme=light] .test{margin-left:50px;margin-right:50px}:root[data-theme=light] .test{margin-left:51px;margin-right:51px}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap
index e5becd7f..eef28bba 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-":root[data-theme=light] .test:hover{margin-left:50px;margin-right:50px;}:root[data-theme=light] .test:active{margin-left:50px;margin-right:50px;}"
+":root[data-theme=light] .test:hover{margin-left:50px;margin-right:50px}:root[data-theme=light] .test:active{margin-left:50px;margin-right:50px}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
index 32d9e656..14f90f1e 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-":root[data-theme=dark] .test{margin-left:40px;margin-right:40px;}:root[data-theme=light] .test{margin-left:50px;margin-right:50px;}:root[data-theme=dark] .test{margin-top:40px;margin-bottom:40px;}"
+":root[data-theme=dark] .test{margin-left:40px;margin-right:40px}:root[data-theme=light] .test{margin-left:50px;margin-right:50px}:root[data-theme=dark] .test{margin-top:40px;margin-bottom:40px}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap
index 19d89706..b821c7d3 100644
--- a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-"\n@media (min-width:1280px){.test{margin-left:40px;margin-right:40px;}}"
+"@media(min-width:1280px){.test{margin-left:40px;margin-right:40px}}"