diff --git a/.changepacks/changepack_log_Vdiwh8ITkqV6cbmVeUEta.json b/.changepacks/changepack_log_Vdiwh8ITkqV6cbmVeUEta.json
new file mode 100644
index 00000000..75c37d1c
--- /dev/null
+++ b/.changepacks/changepack_log_Vdiwh8ITkqV6cbmVeUEta.json
@@ -0,0 +1 @@
+{"changes":{"bindings/devup-ui-wasm/package.json":"Patch","packages/react/package.json":"Patch"},"note":"Support @media, @support","date":"2026-01-12T14:31:53.767704300Z"}
\ No newline at end of file
diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__code_extract.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__code_extract.snap
index f3b79c30..f147d7ee 100644
--- a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__code_extract.snap
+++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__code_extract.snap
@@ -1,5 +1,5 @@
 ---
 source: bindings/devup-ui-wasm/src/lib.rs
-expression: get_css(None).unwrap()
+expression: "get_css(None, false).unwrap().split(\"*/\").nth(1).unwrap()"
 ---
 "@layer t;@layer t{:root{color-scheme:light;--primary:light-dark(#FFF,#000)}:root[data-theme=dark]{color-scheme:dark}}"
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
index ec7d891b..740a3e52 100644
--- a/libs/css/src/lib.rs
+++ b/libs/css/src/lib.rs
@@ -40,7 +40,7 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str
     if let Some(selector) = selector {
         match selector {
             StyleSelector::Selector(value) => value.replace("&", &format!(".{class_name}")),
-            StyleSelector::Media { selector: s, .. } => {
+            StyleSelector::At { selector: s, .. } => {
                 if let Some(s) = s {
                     s.replace("&", &format!(".{class_name}"))
                 } else {
@@ -85,7 +85,12 @@ pub fn add_selector_params(selector: StyleSelector, params: &str) -> StyleSelect
         StyleSelector::Global(value, file) => {
             StyleSelector::Global(format!("{}({})", value, params), file)
         }
-        StyleSelector::Media { query, selector } => StyleSelector::Media {
+        StyleSelector::At {
+            kind,
+            query,
+            selector,
+        } => StyleSelector::At {
+            kind,
             query: query.to_string(),
             selector: selector.map(|s| format!("{}({})", s, params)),
         },
@@ -317,6 +322,7 @@ mod tests {
     use crate::{
         class_map::{get_class_map, reset_class_map, set_class_map},
         debug::set_debug,
+        style_selector::AtRuleKind,
     };
 
     use super::*;
@@ -721,7 +727,8 @@ mod tests {
         assert_eq!(
             merge_selector(
                 "cls",
-                Some(&StyleSelector::Media {
+                Some(&StyleSelector::At {
+                    kind: AtRuleKind::Media,
                     query: "print".to_string(),
                     selector: None
                 })
@@ -732,7 +739,8 @@ mod tests {
         assert_eq!(
             merge_selector(
                 "cls",
-                Some(&StyleSelector::Media {
+                Some(&StyleSelector::At {
+                    kind: AtRuleKind::Media,
                     query: "print".to_string(),
                     selector: Some("&:hover".to_string())
                 })
@@ -796,13 +804,15 @@ mod tests {
         );
         assert_eq!(
             add_selector_params(
-                StyleSelector::Media {
+                StyleSelector::At {
+                    kind: AtRuleKind::Media,
                     query: "print".to_string(),
                     selector: Some("&:is".to_string())
                 },
                 "test"
             ),
-            StyleSelector::Media {
+            StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "print".to_string(),
                 selector: Some("&:is(test)".to_string())
             }
diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index e070a887..0dddd22e 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -10,9 +10,30 @@ use crate::{
     utils::to_camel_case,
 };
 
+#[derive(
+    Debug, PartialEq, PartialOrd, Ord, Clone, Copy, Hash, Eq, Serialize, Deserialize, Default,
+)]
+pub enum AtRuleKind {
+    #[default]
+    Media,
+    Supports,
+    Container,
+}
+
+impl Display for AtRuleKind {
+    fn fmt(&self, f: &mut Formatter) -> std::fmt::Result {
+        match self {
+            AtRuleKind::Media => write!(f, "media"),
+            AtRuleKind::Supports => write!(f, "supports"),
+            AtRuleKind::Container => write!(f, "container"),
+        }
+    }
+}
+
 #[derive(Debug, PartialEq, Clone, Hash, Eq, Serialize, Deserialize)]
 pub enum StyleSelector {
-    Media {
+    At {
+        kind: AtRuleKind,
         query: String,
         selector: Option<String>,
     },
@@ -30,7 +51,12 @@ fn optimize_selector_string(selector: &str) -> String {
 }
 pub fn optimize_selector(selector: StyleSelector) -> StyleSelector {
     match selector {
-        StyleSelector::Media { query, selector } => StyleSelector::Media {
+        StyleSelector::At {
+            kind,
+            query,
+            selector,
+        } => StyleSelector::At {
+            kind,
             query: query.to_string(),
             selector: selector
                 .as_ref()
@@ -54,15 +80,21 @@ impl Ord for StyleSelector {
     fn cmp(&self, other: &Self) -> Ordering {
         match (self, other) {
             (
-                StyleSelector::Media {
+                StyleSelector::At {
+                    kind: ka,
                     query: a,
                     selector: aa,
                 },
-                StyleSelector::Media {
+                StyleSelector::At {
+                    kind: kb,
                     query: b,
                     selector: bb,
                 },
             ) => {
+                let k = (*ka as u8).cmp(&(*kb as u8));
+                if k != Ordering::Equal {
+                    return k;
+                }
                 let c = a.cmp(b);
                 if c == Ordering::Equal { aa.cmp(bb) } else { c }
             }
@@ -74,20 +106,8 @@ impl Ord for StyleSelector {
                     order_cmp
                 }
             }
-            (
-                StyleSelector::Media {
-                    selector: _,
-                    query: _,
-                },
-                StyleSelector::Selector(_),
-            ) => Ordering::Greater,
-            (
-                StyleSelector::Selector(_),
-                StyleSelector::Media {
-                    selector: _,
-                    query: _,
-                },
-            ) => Ordering::Less,
+            (StyleSelector::At { .. }, StyleSelector::Selector(_)) => Ordering::Greater,
+            (StyleSelector::Selector(_), StyleSelector::At { .. }) => Ordering::Less,
             (StyleSelector::Global(a, _), StyleSelector::Global(b, _)) => {
                 if a == b {
                     return Ordering::Equal;
@@ -143,9 +163,10 @@ impl From<&str> for StyleSelector {
         } else if let Some(s) = value.strip_prefix("theme-") {
             // first character should lower case
             StyleSelector::Selector(format!(":root[data-theme={}] &", to_camel_case(s)))
-        } else if value == "print" {
-            StyleSelector::Media {
-                query: "print".to_string(),
+        } else if matches!(value.as_str(), "print" | "screen" | "speech" | "all") {
+            StyleSelector::At {
+                kind: AtRuleKind::Media,
+                query: value.to_string(),
                 selector: None,
             }
         } else {
@@ -201,11 +222,16 @@ impl Display for StyleSelector {
             "{}",
             match self {
                 StyleSelector::Selector(value) => value.to_string(),
-                StyleSelector::Media { query, selector } => {
+                StyleSelector::At {
+                    kind,
+                    query,
+                    selector,
+                } => {
+                    let space = if query.starts_with('(') { "" } else { " " };
                     if let Some(selector) = selector {
-                        format!("@{query} {selector}")
+                        format!("@{kind}{space}{query} {selector}")
                     } else {
-                        format!("@{query}")
+                        format!("@{kind}{space}{query}")
                     }
                 }
                 StyleSelector::Global(value, _) => value.to_string(),
@@ -255,11 +281,33 @@ mod tests {
 
     #[rstest]
     #[case(StyleSelector::Selector("&:hover".to_string()), "&:hover")]
-    #[case(StyleSelector::Media {
+    #[case(StyleSelector::At {
+            kind: AtRuleKind::Media,
             query: "screen and (max-width: 600px)".to_string(),
             selector: None,
         },
-        "@screen and (max-width: 600px)"
+        "@media screen and (max-width: 600px)"
+    )]
+    #[case(StyleSelector::At {
+            kind: AtRuleKind::Supports,
+            query: "(display: grid)".to_string(),
+            selector: None,
+        },
+        "@supports(display: grid)"
+    )]
+    #[case(StyleSelector::At {
+            kind: AtRuleKind::Container,
+            query: "(min-width: 768px)".to_string(),
+            selector: None,
+        },
+        "@container(min-width: 768px)"
+    )]
+    #[case(StyleSelector::At {
+            kind: AtRuleKind::Container,
+            query: "sidebar (min-width: 400px)".to_string(),
+            selector: None,
+        },
+        "@container sidebar (min-width: 400px)"
     )]
     #[case(StyleSelector::Global(":root[data-theme=dark]".to_string(), "file.rs".to_string()), ":root[data-theme=dark]")]
     fn test_style_selector_display(#[case] selector: StyleSelector, #[case] expected: &str) {
@@ -269,7 +317,8 @@ mod tests {
 
     #[rstest]
     #[case(
-        StyleSelector::Media {
+        StyleSelector::At {
+            kind: AtRuleKind::Media,
             query: "screen".to_string(),
             selector: None,
         },
@@ -282,16 +331,31 @@ mod tests {
         std::cmp::Ordering::Less
     )]
     #[case(
-        StyleSelector::Media {
+        StyleSelector::At {
+            kind: AtRuleKind::Media,
             query: "a".to_string(),
             selector: None,
         },
-        StyleSelector::Media {
+        StyleSelector::At {
+            kind: AtRuleKind::Media,
             query: "b".to_string(),
             selector: None,
         },
         std::cmp::Ordering::Less
     )]
+    #[case(
+        StyleSelector::At {
+            kind: AtRuleKind::Media,
+            query: "(min-width: 768px)".to_string(),
+            selector: None,
+        },
+        StyleSelector::At {
+            kind: AtRuleKind::Supports,
+            query: "(display: grid)".to_string(),
+            selector: None,
+        },
+        std::cmp::Ordering::Less
+    )]
     #[case(
         StyleSelector::Global(":root[data-theme=dark]".to_string(), "file1.rs".to_string()),
         StyleSelector::Global(":root[data-theme=light]".to_string(), "file2.rs".to_string()),
@@ -304,7 +368,8 @@ mod tests {
     )]
     #[case(
         StyleSelector::Selector("&:hover".to_string()),
-        StyleSelector::Media {
+        StyleSelector::At {
+            kind: AtRuleKind::Media,
             query: "screen".to_string(),
             selector: None,
         },
diff --git a/libs/extractor/src/css_utils.rs b/libs/extractor/src/css_utils.rs
index b1f87f15..a73008b0 100644
--- a/libs/extractor/src/css_utils.rs
+++ b/libs/extractor/src/css_utils.rs
@@ -4,7 +4,7 @@ use crate::utils::{get_string_by_literal_expression, wrap_direct_call};
 use css::{
     optimize_multi_css_value::{check_multi_css_optimize, optimize_mutli_css_value},
     rm_css_comment::rm_css_comment,
-    style_selector::StyleSelector,
+    style_selector::{AtRuleKind, StyleSelector},
 };
 use oxc_allocator::Allocator;
 use oxc_span::SPAN;
@@ -246,23 +246,26 @@ pub fn css_to_style(
     let mut styles = vec![];
     let mut input = css;
 
-    if input.contains("@media") {
-        let media_inputs = input
-            .split("@media")
-            .flat_map(|s| {
-                let s = s.trim();
-                if s.is_empty() {
-                    None
-                } else {
-                    Some(format!("@media{s}"))
+    // Split by at-rules (@media, @supports, @container) to handle multiple at-rules in a single input
+    for at_rule in ["@media", "@supports", "@container"] {
+        if input.contains(at_rule) {
+            let at_inputs = input
+                .split(at_rule)
+                .flat_map(|s| {
+                    let s = s.trim();
+                    if s.is_empty() {
+                        None
+                    } else {
+                        Some(format!("{at_rule}{s}"))
+                    }
+                })
+                .collect::<Vec<_>>();
+            if at_inputs.len() > 1 {
+                for at_input in at_inputs {
+                    styles.extend(css_to_style(&at_input, level, selector));
                 }
-            })
-            .collect::<Vec<_>>();
-        if media_inputs.len() > 1 {
-            for media_input in media_inputs {
-                styles.extend(css_to_style(&media_input, level, selector));
+                return styles;
             }
-            return styles;
         }
     }
 
@@ -322,9 +325,10 @@ pub fn css_to_style(
                 end = rest.find('}').unwrap_or(rest.len());
             }
             let block = &rest[..end];
-            let sel = &if let Some(StyleSelector::Media { query, .. }) = selector {
+            let sel = &if let Some(StyleSelector::At { kind, query, .. }) = selector {
                 let local_sel = selector_part.trim().to_string();
-                Some(StyleSelector::Media {
+                Some(StyleSelector::At {
+                    kind: *kind,
                     query: query.clone(),
                     selector: if local_sel == "&" {
                         None
@@ -335,11 +339,26 @@ pub fn css_to_style(
             } else {
                 let sel = selector_part.trim().to_string();
                 if sel.starts_with("@media") {
-                    Some(StyleSelector::Media {
+                    Some(StyleSelector::At {
+                        kind: AtRuleKind::Media,
                         query: sel.replace(" ", "").replace("and(", "and (")["@media".len()..]
                             .to_string(),
                         selector: None,
                     })
+                } else if sel.starts_with("@supports") {
+                    Some(StyleSelector::At {
+                        kind: AtRuleKind::Supports,
+                        query: sel.replace(" ", "").replace("and(", "and (")["@supports".len()..]
+                            .to_string(),
+                        selector: None,
+                    })
+                } else if sel.starts_with("@container") {
+                    Some(StyleSelector::At {
+                        kind: AtRuleKind::Container,
+                        query: sel.replace(" ", "").replace("and(", "and (")["@container".len()..]
+                            .to_string(),
+                        selector: None,
+                    })
                 } else if sel.is_empty() {
                     selector.clone()
                 } else {
@@ -543,11 +562,13 @@ mod tests {
             color: #fff;
         }`",
         vec![
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
@@ -564,19 +585,23 @@ mod tests {
             color: #fff;
         }`",
         vec![
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
@@ -594,19 +619,23 @@ mod tests {
             }
         }`",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover,&:active,&:nth-child(2)".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover,&:active,&:nth-child(2)".to_string()),
             })),
@@ -624,19 +653,23 @@ mod tests {
             }
         }`",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
@@ -664,35 +697,43 @@ mod tests {
             }
         }`",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
@@ -710,19 +751,23 @@ mod tests {
             color: #000;
         }`",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
@@ -737,6 +782,76 @@ mod tests {
         }`",
         vec![]
     )]
+    // @supports test cases
+    #[case(
+        "`@supports (display: grid) {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }`",
+        vec![
+            ("display", "grid", Some(StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "(display:grid)".to_string(),
+                selector: None,
+            })),
+            ("grid-template-columns", "1fr 1fr", Some(StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "(display:grid)".to_string(),
+                selector: None,
+            })),
+        ]
+    )]
+    #[case(
+        "`@supports (display: flex) {
+            &:hover {
+                display: flex;
+            }
+        }`",
+        vec![
+            ("display", "flex", Some(StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "(display:flex)".to_string(),
+                selector: Some("&:hover".to_string()),
+            })),
+        ]
+    )]
+    #[case(
+        "`@supports not (display: grid) {
+            display: block;
+        }`",
+        vec![
+            ("display", "block", Some(StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "not(display:grid)".to_string(),
+                selector: None,
+            })),
+        ]
+    )]
+    // @container test cases
+    #[case(
+        "`@container (min-width: 768px) {
+            padding: 10px;
+        }`",
+        vec![
+            ("padding", "10px", Some(StyleSelector::At {
+                kind: AtRuleKind::Container,
+                query: "(min-width:768px)".to_string(),
+                selector: None,
+            })),
+        ]
+    )]
+    #[case(
+        "`@container sidebar (min-width: 400px) {
+            display: flex;
+        }`",
+        vec![
+            ("display", "flex", Some(StyleSelector::At {
+                kind: AtRuleKind::Container,
+                query: "sidebar(min-width:400px)".to_string(),
+                selector: None,
+            })),
+        ]
+    )]
     #[case(
         "`ul { font-family: 'Roboto Hello',       sans-serif; }`",
         vec![
@@ -939,11 +1054,13 @@ mod tests {
             color: #fff;
         }",
         vec![
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
@@ -960,19 +1077,23 @@ mod tests {
             color: #fff;
         }",
         vec![
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)and (max-width:1024px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
@@ -990,19 +1111,23 @@ mod tests {
             }
         }",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover,&:active,&:nth-child(2)".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover,&:active,&:nth-child(2)".to_string()),
             })),
@@ -1020,19 +1145,23 @@ mod tests {
             }
         }",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
@@ -1060,35 +1189,43 @@ mod tests {
             }
         }",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: Some("&:hover".to_string()),
             })),
@@ -1106,19 +1243,23 @@ mod tests {
             color: #000;
         }",
         vec![
-            ("border", "1px solid #FFF", Some(StyleSelector::Media {
+            ("border", "1px solid #FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("color", "#FFF", Some(StyleSelector::Media {
+            ("color", "#FFF", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width:768px)".to_string(),
                 selector: None,
             })),
-            ("border", "1px solid #000", Some(StyleSelector::Media {
+            ("border", "1px solid #000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
-            ("color", "#000", Some(StyleSelector::Media {
+            ("color", "#000", Some(StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(max-width:768px)and (min-width:480px)".to_string(),
                 selector: None,
             })),
diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs
index 3c878909..888b2b93 100644
--- a/libs/extractor/src/extractor/extract_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_style_from_expression.rs
@@ -239,6 +239,48 @@ pub fn extract_style_from_expression<'a>(
             };
         }
 
+        // Handle at-rules: @media, @supports, @container (or _media, _supports, _container)
+        let at_rule_name = name
+            .strip_prefix("@")
+            .or_else(|| name.strip_prefix("_"))
+            .filter(|n| matches!(*n, "media" | "supports" | "container"));
+
+        if let Some(at_rule) = at_rule_name
+            && let Expression::ObjectExpression(obj) = expression
+        {
+            let mut props = vec![];
+            for p in obj.properties.iter_mut() {
+                if let ObjectPropertyKind::ObjectProperty(o) = p
+                    && let Some(query) = get_string_by_property_key(&o.key)
+                {
+                    let at_selector = StyleSelector::At {
+                        kind: match at_rule {
+                            "media" => css::style_selector::AtRuleKind::Media,
+                            "supports" => css::style_selector::AtRuleKind::Supports,
+                            "container" => css::style_selector::AtRuleKind::Container,
+                            _ => unreachable!(),
+                        },
+                        query: query.to_string(),
+                        selector: selector.as_ref().map(|s| s.to_string()),
+                    };
+                    props.extend(
+                        extract_style_from_expression(
+                            ast_builder,
+                            None,
+                            &mut o.value,
+                            level,
+                            &Some(at_selector),
+                        )
+                        .styles,
+                    );
+                }
+            }
+            return ExtractResult {
+                styles: props,
+                ..ExtractResult::default()
+            };
+        }
+
         if let Some(new_selector) = name.strip_prefix("_") {
             return extract_style_from_expression(
                 ast_builder,
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 78f2b7c1..d24faa7f 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -9020,6 +9020,345 @@ const margin = 5;
         ));
     }
 
+    #[test]
+    #[serial]
+    fn test_media_query_selectors() {
+        // Test _print media query selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _print={{ bg: "white", color: "black" }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _screen media query selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _screen={{ bg: "blue" }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _speech media query selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _speech={{ display: "none" }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _all media query selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _all={{ fontFamily: "sans-serif" }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test multiple media query selectors combined
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box 
+    bg="red"
+    _print={{ bg: "white" }}
+    _screen={{ bg: "blue" }}
+/>
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_at_rules_underscore_prefix() {
+        // Test _container at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _container={{ "(min-width: 400px)": { bg: "red" } }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _media at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _media={{ "(min-width: 768px)": { bg: "blue" } }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _supports at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _supports={{ "(display: grid)": { display: "grid" } }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test _container with named container
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box _container={{ "sidebar (min-width: 400px)": { p: 4 } }} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_at_rules_at_prefix() {
+        // Test @container at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box {...{"@container": { "(min-width: 400px)": { bg: "red" } }}} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test @media at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box {...{"@media": { "(min-width: 768px)": { bg: "blue" } }}} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test @supports at-rule
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box {...{"@supports": { "(display: flex)": { display: "flex" } }}} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_global_css_at_rules() {
+        // Test globalCss with @media nested inside selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    body: {
+        "@media": {
+            "(min-width: 768px)": { bg: "white" }
+        }
+    }
+})
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test globalCss with @supports nested inside selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    ".grid-container": {
+        "@supports": {
+            "(display: grid)": { display: "grid" }
+        }
+    }
+})
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test globalCss with @container nested inside selector
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    ".card": {
+        "@container": {
+            "(min-width: 400px)": { p: 4 }
+        }
+    }
+})
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test globalCss with multiple at-rules nested inside selectors
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    body: {
+        bg: "gray",
+        "@media": {
+            "(min-width: 768px)": { bg: "white" },
+            "(prefers-color-scheme: dark)": { bg: "black" }
+        }
+    },
+    ".container": {
+        "@supports": {
+            "(display: grid)": { display: "grid" }
+        }
+    }
+})
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     #[rstest]
     #[case("test.tsx", "const x = 1;", "@devup-ui/react", false)] // no package string
     #[case(
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap b/libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap
index 96205e24..13aa2085 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`bold`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`bold`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap b/libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap
index d91897e2..db27b0e6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={a ? \"bold\" : \"bold2\"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={a ? \"bold\" : \"bold2\"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography.snap b/libs/extractor/src/snapshots/extractor__tests__apply_typography.snap
index 70a43587..54037105 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_typography.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_typography.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography=\"bold\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography=\"bold\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
index fd54ef0d..312595a0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={bo ? a : b} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={bo ? a : b} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap
index 2edef42f..b2502eba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`${bo ? a : b}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`${bo ? a : b}`} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
index 7b55cf25..ae0e5ff9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      boxSizing=\"border-box\"\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      boxSizing=\"border-box\"\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
index 6126d98a..1f65a842 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={variable} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={variable} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
new file mode 100644
index 00000000..5db8c825
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@media\": { \"(min-width: 768px)\": { bg: \"blue\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
new file mode 100644
index 00000000..bf57c692
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@supports\": { \"(display: flex)\": { display: \"flex\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: flex)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
new file mode 100644
index 00000000..e370b3c7
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@container\": { \"(min-width: 400px)\": { bg: \"red\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
new file mode 100644
index 00000000..d441a6a8
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _media={{ \"(min-width: 768px)\": { bg: \"blue\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
new file mode 100644
index 00000000..c635b562
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _supports={{ \"(display: grid)\": { display: \"grid\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
new file mode 100644
index 00000000..f5008b91
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _container={{ \"sidebar (min-width: 400px)\": { p: 4 } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "sidebar (min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
new file mode 100644
index 00000000..9d3bb36d
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _container={{ \"(min-width: 400px)\": { bg: \"red\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
index 0d152461..1cdbadae 100644
--- a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
index a54fd02f..333ae89e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
index 1470428d..96d1931e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
index d48ea4a5..305c6df2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\n        ))\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap
index ee0b2598..3127b319 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-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 as={\"section\"} />\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 as={\"section\"} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap
index caf63bc9..85cb93dd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-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 as={`section`} />\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 as={`section`} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-4.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-4.snap
index 7db7e72b..2b70973c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-4.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 as={\"section\"}></Box>\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 as={\"section\"}></Box>\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-5.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-5.snap
index 06f47bc1..bcbec696 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-5.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 as={`section`}></Box>\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 as={`section`}></Box>\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag.snap
index 12e14960..8183fdcf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag.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 as=\"section\" />\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 as=\"section\" />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
index 1ef10b74..3c781aaa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
index 52f858a7..f0177b1d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
index aad3566e..8aa0d84f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
index 72af881b..6ddb9588 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
index dbd0dfe5..cbed4818 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
index 40f9c55c..4da8801d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
index d4f6fb76..cb925eaf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {VStack as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {VStack as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
index b022824a..f8fcf0cb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.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 padding={[someStyleVar,undefined,someStyleVar1]} margin={[null,someStyleVar2]} bg=\"red\" />;\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 padding={[someStyleVar,undefined,someStyleVar1]} margin={[null,someStyleVar2]} bg=\"red\" />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
index 67983e87..c34b3156 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_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={a===b && {\n          mx: 1\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={a===b && {\n          mx: 1\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap
index 97dfbb53..cb7ee6c7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_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={a===b && {}} />\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={a===b && {}} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
index 66b49984..72d5041a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.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={a===b && {\n          mx: 1,\n          my: 1\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={a===b && {\n          mx: 1,\n          my: 1\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
index 2ee1ed2c..24d82285 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.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={a===b ? undefined : {\n          mx: 1\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={a===b ? undefined : {\n          mx: 1\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.snap
index 19a56861..2442586b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? undefined : undefined} />;\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())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? undefined : null} />;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap
index 657a168c..5f47b300 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? c : d} />;\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 margin={a === b ? c : d} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
index 33d8b20c..b9e29851 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? \"4px\" : d} />;\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 margin={a === b ? \"4px\" : d} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.snap
index 0ce9c9c0..36c6d929 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.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 margin={a === b ? null : undefined} />;\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 margin={a === b ? null : undefined} />;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
index 3cb90869..67542fa5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.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 margin={a === b ? 1 : undefined} />;\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 margin={a === b ? 1 : undefined} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
index 850d9c9b..28ff1f25 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? undefined : 2} />;\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 margin={a === b ? undefined : 2} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap
index 7472d819..f84f3600 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? `${a}px` : undefined} />;\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 margin={a === b ? `${a}px` : undefined} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap
index 5f12df0f..078d3806 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? null : `${b}px`} />;\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 margin={a === b ? null : `${b}px`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-9.snap
index c76f41c3..92d6188c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-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 margin={a === b ? `${b}px` : undefined} />;\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 margin={a === b ? `${b}px` : undefined} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
index 5112886a..371ba317 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.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 margin={a === b ? \"4px\" : \"3px\"} />;\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 margin={a === b ? \"4px\" : \"3px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
index 299cb89b..958f4ff0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} className=\"ab\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} className=\"ab\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
index e6901b53..235e4edf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap
index ea70e574..f31f8aee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-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 margin={a===b || a} />;\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 margin={a===b || a} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap
index 77ce7d19..4ccdd7d9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-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 margin={a ?? b} />;\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 margin={a ?? b} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap
index ae5c32f3..678bea7c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.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 margin={(a===1||a===2)&&b===3 && a} />;\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 margin={(a===1||a===2)&&b===3 && a} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.snap
index 32ce512d..ad9a3934 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.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 margin={a===b && a} />;\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 margin={a===b && a} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap
index 972e2458..c55511e2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.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 padding={[someStyleVar,null,someStyleVar1]} margin={[null,someStyleVar2]} />;\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 padding={[someStyleVar,null,someStyleVar1]} margin={[null,someStyleVar2]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap
index 63fab2bb..570d012a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-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 padding={Math.abs(5)} />;\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 padding={Math.abs(5)} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-3.snap
index 97ead85b..a8405c32 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-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 bg={data.buttonBgColor} />;\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 bg={data.buttonBgColor} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.snap
index 4ccb1a42..da6849fa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.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 bg={data.a.b.buttonBgColor} />;\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 bg={data.a.b.buttonBgColor} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap
index c559df3a..4c18b97d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.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 padding={someStyleVar} margin={someStyleVar2} />;\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 padding={someStyleVar} margin={someStyleVar2} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
index 9b097c59..87cf1b73 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-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 padding={data[d as A] as B} />;\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 padding={data[d as A] as B} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
index 905576ba..e2d5be42 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-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 padding={\"10px\" as B} />;\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 padding={\"10px\" as B} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
index fe3bbe09..fa0a2b01 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.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 padding={a as A} />;\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 padding={a as A} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
index ec0e363d..ebd5498c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}, ...{span: {bg: \"blue\"}}})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}, ...{span: {bg: \"blue\"}}})\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
index 0adc1713..23d8f2fa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {\n    bg: \"blue\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {\n    bg: \"blue\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
index 2869dbde..8e389a2d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"yellow\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"yellow\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
index 31127126..6ce50048 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [`div`]: {\n    bg: \"green\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [`div`]: {\n    bg: \"green\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
index 01af40c5..e0db4ccf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _hover: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _hover: {\n    bg: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
index 8941b1bb..725f4412 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _placeholder: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _placeholder: {\n    bg: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
index c7d7096c..6709991b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _nthLastChild: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _nthLastChild: {\n    bg: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap
index a63387cb..2ce37fcf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{})\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
index 13c61ca9..1736960f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}})\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
index e304710f..59b494f9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
index 6cf165a7..6f01691c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {},\n  span: {}\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {},\n  span: {}\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
index 38a66789..09bf2ee1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
index 1abae1d9..3c19a908 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``,\n  span: ``\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``,\n  span: ``\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
index 31d382a6..3978495d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({})\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({})\n\"#, ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
index 4d70c073..cd559242 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap
index 6f3f7b7b..54e758de 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {}\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {}\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
index a3c52735..958a0d6d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: `url('/fonts/Roboto-Regular.ttf')`,\n      fontWeight: `400`,\n    }\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: `url('/fonts/Roboto-Regular.ttf')`,\n      fontWeight: `400`,\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
index 3f4bd6c1..fe9a5c84 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n    }\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
index 7a390c1d..52400442 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [`\n  font-family: \"Roboto\";\n  src: \"url('/fonts/Roboto-Regular.ttf')\";\n  font-weight: 400;\n  `]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [`\n  font-family: \"Roboto\";\n  src: \"url('/fonts/Roboto-Regular.ttf')\";\n  font-weight: 400;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
index a4cbae22..099e88cc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Hello\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Hello\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
index fb7cb1aa..9a802683 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: undefined,\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: undefined,\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
index 61c1fe44..acda00ec 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Regular2\",\n      src: \"//fonts/Roboto-Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular\",\n      src: \"//fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular3\",\n      src: \"fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular4\",\n      src: \"local('fonts/Roboto Regular.ttf')\",\n      fontWeight: 400,\n    },\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Regular2\",\n      src: \"//fonts/Roboto-Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular\",\n      src: \"//fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular3\",\n      src: \"fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular4\",\n      src: \"local('fonts/Roboto Regular.ttf')\",\n      fontWeight: 400,\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
index 406137f8..7d1e97d2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto2\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto2\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
index 87460642..4e66ff5b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\", \"@devup-ui/core/css/global2.css\"]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\", \"@devup-ui/core/css/global2.css\"]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
index 6f5c2b28..518e9a7f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [`@devup-ui/core/css/global3.css`, `@devup-ui/core/css/global4.css`]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [`@devup-ui/core/css/global3.css`, `@devup-ui/core/css/global4.css`]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap
index f7cad842..150dabb2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\"]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\"]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
index d514d079..c7baa8be 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
index d514d079..c7baa8be 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
index 4f08100b..f5474711 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  [\"span\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"body[data-theme='dark']\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  [\"span\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"body[data-theme='dark']\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
index 9adc581c..56b25aee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
index bfc6bdeb..9348e73b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": ``\n    })\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": ``\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
index 6ab3a887..e1d90d77 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `     `\n    })\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `     `\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
index 6324acba..525d3382 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `  \n         `\n    })\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `  \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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
index a05c5c3d..dcd24f04 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`\n    div {\n      background-color: red;\n      color: blue;\n    }\n    `\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`\n    div {\n      background-color: red;\n      color: blue;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
index 246f18bd..d3f16ebb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss``\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss``\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
index 0e3568c0..fc33a5f0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`           `\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`           `\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
index d8eaafeb..9230e4dc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`         \n      `\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`         \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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
index 80137fea..6f24c0eb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `\n        background-color: red\n      `\n    })\n    \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `\n        background-color: red\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
index a4c39747..aacce120 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: {}\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: {}\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
index 1dbc9048..f677156b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [1, 2, \"./test.css\"]\n})\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [1, 2, \"./test.css\"]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap
index 58d31e98..b48b1c11 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\", \"<Box gap={1} />\", ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None },).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\", \"<Box gap={1} />\", ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap
index b41576ac..6d2a3c93 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\", \"const a = 1;\", ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None },).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\", \"const a = 1;\", ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
index c23d0c4d..f0e001d8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes(...{\n  [`0%`]: { opacity: 0, ...{color: \"red\"} },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes(...{\n  [`0%`]: { opacity: 0, ...{color: \"red\"} },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
index 57038ce5..4a47d23a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": { opacity: 0 },\n  \"50%\": { opacity: 0.5 },\n  \"100%\": { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": { opacity: 0 },\n  \"50%\": { opacity: 0.5 },\n  \"100%\": { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
index e2949a5f..b6aa7943 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0\": { opacity: 0 },\n  \"50\": { opacity: 0.5 },\n  \"100\": { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0\": { opacity: 0 },\n  \"50\": { opacity: 0.5 },\n  \"100\": { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
index 9ed489b4..29260a59 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [\"0\"]: { opacity: 0 },\n  [\"50\"]: { opacity: 0.5 },\n  [\"100\"]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [\"0\"]: { opacity: 0 },\n  [\"50\"]: { opacity: 0.5 },\n  [\"100\"]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
index 81ad3dca..02ef511e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [0]: { opacity: 0 },\n  [50]: { opacity: 0.5 },\n  [100]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [0]: { opacity: 0 },\n  [50]: { opacity: 0.5 },\n  [100]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
index b0d82548..5a4853f3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  0: { opacity: 0 },\n  50: { opacity: 0.5 },\n  100: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  0: { opacity: 0 },\n  50: { opacity: 0.5 },\n  100: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
index 674d2e13..cafaf847 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
index 8d1f7278..276a0983 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
index c48fccfe..214bf046 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\n\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`1%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 1 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\n\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`1%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 1 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
index ca43841f..2084f266 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: { opacity: 0 },\n  to: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: { opacity: 0 },\n  to: { opacity: 1 }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
index 3ef94316..0a7f6684 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": `\n  background-color: red;\n  color: blue;\n  `,\n  \"100%\": `\n  background-color: blue;\n  color: red;\n  `\n})\n\nkeyframes`\n  0% {\n    background-color: red;\n    color: blue;\n  }\n  100% {\n    background-color: blue;\n    color: red;\n  }\n`\nkeyframes({\n  \"0%\": {\n    backgroundColor: \"red\",\n    color: \"blue\"\n  },\n  \"100%\": {\n    backgroundColor: \"blue\",\n    color: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": `\n  background-color: red;\n  color: blue;\n  `,\n  \"100%\": `\n  background-color: blue;\n  color: red;\n  `\n})\n\nkeyframes`\n  0% {\n    background-color: red;\n    color: blue;\n  }\n  100% {\n    background-color: blue;\n    color: red;\n  }\n`\nkeyframes({\n  \"0%\": {\n    backgroundColor: \"red\",\n    color: \"blue\"\n  },\n  \"100%\": {\n    backgroundColor: \"blue\",\n    color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
index bb78b570..5d739fa7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: `\n  background-color: red;\n  `,\n  to: `\n  background-color: blue;\n  `\n})\n\nkeyframes`\n  from {\n    background-color: red;\n  }\n  to {\n    background-color: blue;\n  }\n`\nkeyframes({\n  from: {\n    backgroundColor: \"red\"\n  },\n  to: {\n    backgroundColor: \"blue\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_file: None, single_css: true,import_main_css: false\n}).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: `\n  background-color: red;\n  `,\n  to: `\n  background-color: blue;\n  `\n})\n\nkeyframes`\n  from {\n    background-color: red;\n  }\n  to {\n    background-color: blue;\n  }\n`\nkeyframes({\n  from: {\n    backgroundColor: \"red\"\n  },\n  to: {\n    backgroundColor: \"blue\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
index 965e5584..9a2a2006 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-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 margin={a===b || \"1px\"} />;\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 margin={a===b || \"1px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
index 342006e0..1e2ed115 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-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 margin={a ?? \"1px\"} />;\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 margin={a ?? \"1px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
index 318b533f..f374e006 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.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 margin={(a===1||a===2)&&b===3 && \"1px\"} />;\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 margin={(a===1||a===2)&&b===3 && \"1px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
index a5da49b5..fce00360 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.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 margin={a===b && \"1px\"} />;\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 margin={a===b && \"1px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
index 78c38210..fa91e018 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.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              _active: {\n                color: \"red\",\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 _hover={{\n          selectors: {\n            \"&::placeholder\": {\n              _active: {\n                color: \"red\",\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
index cdf86c8e..bff3c03a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.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            \"&::placeholder\": {\n              _active: {\n                color: \"red\",\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            \"&::placeholder\": {\n              _active: {\n                color: \"red\",\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
index d815036a..bb0e71ea 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_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 \n          selectors={{\n            \"&::placeholder\": {\n              selectors: {\n                \"&:active\": {\n                  selectors: {\n                    \"&:hover\": {\n                      color: \"red\",\n                    }\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            \"&::placeholder\": {\n              selectors: {\n                \"&:active\": {\n                  selectors: {\n                    \"&:hover\": {\n                      color: \"red\",\n                    }\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
index cfbf5345..d1b31650 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_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 \n          _placeholder={{\n            _active: {\n              _hover: {\n                color: \"blue\",\n              },\n              color: \"red\",\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          _placeholder={{\n            _active: {\n              _hover: {\n                color: \"blue\",\n              },\n              color: \"red\",\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
index c48f8006..a60e8df3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_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          _hover: {\n             selectors: {\n              \"_themeDark\": {\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\": {\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
index 0c1988ef..4beda642 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.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          _placeholder: {\n            color: \"red\"\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          _placeholder: {\n            color: \"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
index e3c00065..c047f7a1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-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 margin={[\"6px\", a === b ? \"4px\" : \"3px\"]} />;\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 margin={[\"6px\", a === b ? \"4px\" : \"3px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
index 7b924089..efee8272 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-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 margin={a === b ? c : [d, e, f, \"2px\"]} />;\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 margin={a === b ? c : [d, e, f, \"2px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
index 11340089..5aadc27d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.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 margin={a === b ? c : [d, e, f, x === y ? \"4px\" : \"2px\"]} />;\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 margin={a === b ? c : [d, e, f, x === y ? \"4px\" : \"2px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
index 0d5ca470..9ff2972a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.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 margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : c} />;\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 margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : c} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
index 11975f47..035786b3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-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 margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : [\"1px\", \"2px\", \"3px\"]} />;\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 margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : [\"1px\", \"2px\", \"3px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
index abe24b62..106fdf04 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-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 margin={[null, a === b && \"4px\"]} />;\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 margin={[null, a === b && \"4px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
index 7cc9b3f4..e57263ab 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-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 margin={[null, a === b && \"4px\", c === d ? \"5px\" : null]} />;\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 margin={[null, a === b && \"4px\", c === d ? \"5px\" : null]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
index 7e9efb94..03406fb9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.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 margin={[null, a === b ? \"4px\" : \"3px\"]} />;\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 margin={[null, a === b ? \"4px\" : \"3px\"]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
index 7dc4d20e..f6967f43 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-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 margin={[null, a === b || \"4px\"]} className={\"exists\"} />;\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 margin={[null, a === b || \"4px\"]} className={\"exists\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
index 05c15401..0adb6bdf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.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 margin={[null, a === b ? (q > w ? \"4px\" : \"8px\") : \"3px\"]} className={\"exists\"} />;\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 margin={[null, a === b ? (q > w ? \"4px\" : \"8px\") : \"3px\"]} className={\"exists\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
index a85563a3..17ce9ef5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Flex } from \"@devup-ui/core\";\n<Flex display={['none', null, \"flex\"]}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Flex } from \"@devup-ui/core\";\n<Flex display={['none', null, \"flex\"]}/>;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
index 71e80e39..f0c610af 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.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 padding={[null,1]} margin={[2,null,4]} />;\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 padding={[null,1]} margin={[2,null,4]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap
index 28338023..4ccf63ff 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-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 margin={a === b ? `${a}` : `${a}`} />;\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 margin={a === b ? `${a}` : `${a}`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap
index 4cbbced5..fff29fda 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.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 margin={a === b ? a : a} />;\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 margin={a === b ? a : a} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
index 71c1c3c4..4f808466 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-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 margin={a === b ? 4 : 4} />;\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 margin={a === b ? 4 : 4} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
index 70e1f141..156d663f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-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 margin={a === b ? `4px` : `4px`} />;\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 margin={a === b ? `4px` : `4px`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
index a8a60e61..0385bb4c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.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 margin={a === b ? `${\"1px\"}` : `${\"1px\"}`} />;\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 margin={a === b ? `${\"1px\"}` : `${\"1px\"}`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
index 425459ca..5c2ece76 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.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 margin={a === b ? `${\"1\"}px` : `${1}px`} />;\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 margin={a === b ? `${\"1\"}px` : `${1}px`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
index 009dd8e1..9c8dba14 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-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 margin={a === b ? `${`1`}px` : `${\"1\"}px`} />;\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 margin={a === b ? `${`1`}px` : `${\"1\"}px`} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
index ab6dbc5e..4875c22c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.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 margin={a === b ? \"4px\" : \"4px\"} />;\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 margin={a === b ? \"4px\" : \"4px\"} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
index 3bdfb256..767d75e1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 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())"
+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{\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
index 27b5e8b6..3ea380c1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_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 selectors={{\n          _themeDark: {\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          _themeDark: {\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
index fe9ed946..f54f5ca5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.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          '_themeDark': {\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          '_themeDark': {\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
index 9fcadf52..caf4e049 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.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: {\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: {\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
index e27d60d7..fb8a1974 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_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 _nthLastChild={{\n          mx: 1\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 _nthLastChild={{\n          mx: 1\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
index f35477b7..134b2160 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector.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          mx: 1\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          mx: 1\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
index b47c547f..7b92cd58 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-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 selectors={{\n          \"&:hover\":`\n          background-color: red;\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\":`\n          background-color: red;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
index 1ec51be3..31d7ca06 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.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        background-color: red;\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        background-color: red;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
index a4f16bdb..bda50fcc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-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          mx: 10\n        },{\n          mx: 20\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          mx: 10\n        },{\n          mx: 20\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
index f111c367..2714b305 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-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        margin-left: 10px;\n        margin-right: 10px;\n        `,{\n        marginLeft: '20px',\n        marginRight: '20px',\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        margin-left: 10px;\n        margin-right: 10px;\n        `,{\n        marginLeft: '20px',\n        marginRight: '20px',\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
index b3161d25..73e85e47 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.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          mx: [1, 2]\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          mx: [1, 2]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
index 357b1e41..45f51835 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:[`\n  background-color: red;\n  color: blue;\n`,{\n  backgroundColor: \"green\",\n  color: \"yellow\"\n}, `\n  background-color: red;\n  color: blue;\n`]\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:[`\n  background-color: red;\n  color: blue;\n`,{\n  backgroundColor: \"green\",\n  color: \"yellow\"\n}, `\n  background-color: red;\n  color: blue;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
index cc677315..af76e530 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css``}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css``}/>;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
index be2680e2..4610e24d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`   `}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`   `}/>;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
index a54a01e7..eb2c3aab 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`  \n `}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`  \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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
index 0c13a61e..f7d1d6b4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{bg: \"red\"})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{bg: \"red\"})}/>;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
index 8a1909c3..16b6f7c5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{})}/>;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
index 9fef7cee..d43a2844 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{...{bg: \"red\"}})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{...{bg: \"red\"}})}/>;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
index b4625385..f05759ba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c`\n  background-color: red;\n`}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c`\n  background-color: red;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
index 032fda65..108d85ba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  bg:\"red\",\n  color:\"blue\"\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  bg:\"red\",\n  color:\"blue\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
index b2b09871..9f216d68 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c({\n  bg:\"red\"\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c({\n  bg:\"red\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
index 168f7bb7..04ca1f39 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover: {\n    bg:\"red\",\n    color:\"blue\"\n  }\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover: {\n    bg:\"red\",\n    color:\"blue\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
index b6cd1216..6ccc9b6a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n        <div className={css(a?{bg:\"red\"}:{bg:\"blue\"})}/>;\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n        <div className={css(a?{bg:\"red\"}:{bg:\"blue\"})}/>;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
index dc6d339d..1fc9fcc7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css()}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css()}/>;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
index c46dbbe5..cac245c1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({})}/>;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
index c276933a..2fc0e451 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:`\n  background-color: red;\n  color: blue;\n`\n})}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:`\n  background-color: red;\n  color: blue;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
index 34603bb1..a2d44a5a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  background-color: red;\n`}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  background-color: red;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
index e89e32b6..86da1b52 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    &:hover {\n      background-color: red;\n    }\n    &:active {\n      background-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 { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    &:hover {\n      background-color: red;\n    }\n    &:active {\n      background-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: {
@@ -10,7 +10,8 @@ ToBTreeSet {
                 value: "blue",
                 level: 0,
                 selector: Some(
-                    Media {
+                    At {
+                        kind: Media,
                         query: "(min-width:768px)",
                         selector: Some(
                             "&:active",
@@ -26,7 +27,8 @@ ToBTreeSet {
                 value: "red",
                 level: 0,
                 selector: Some(
-                    Media {
+                    At {
+                        kind: Media,
                         query: "(min-width:768px)",
                         selector: Some(
                             "&:hover",
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
index 8e3bc30f..ead2764b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    background-color: red;\n  }\n`}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    background-color: red;\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: {
@@ -10,7 +10,8 @@ ToBTreeSet {
                 value: "red",
                 level: 0,
                 selector: Some(
-                    Media {
+                    At {
+                        kind: Media,
                         query: "(min-width:768px)",
                         selector: None,
                     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
index 2aca949e..9a47ff54 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    & {\n      background-color: red;\n    }\n  }\n`}/>;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    & {\n      background-color: red;\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: {
@@ -10,7 +10,8 @@ ToBTreeSet {
                 value: "red",
                 level: 0,
                 selector: Some(
-                    Media {
+                    At {
+                        kind: Media,
                         query: "(min-width:768px)",
                         selector: None,
                     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
index 9579620e..4eb9a1ba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-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 color={`$nice`} />\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 color={`$nice`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
index a74492be..22d5428e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-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 color={(\"$nice\")} />\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 color={(\"$nice\")} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
index 16ac9c22..651d3a8f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.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 color=\"$nice\" />\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 color=\"$nice\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
index 9eb24f5e..4b427ebc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box as C} from '@devup-ui/core'\n                <C padding={1} margin={2} />\n                \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box as C} from '@devup-ui/core'\n                <C padding={1} margin={2} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
index 3075bbb6..41cc3780 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Input} from '@devup-ui/core'\n        <Input padding={1} margin={2} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Input} from '@devup-ui/core'\n        <Input padding={1} margin={2} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
index 302fc904..5fa03b86 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Button} from '@devup-ui/core'\n        <Button padding={1} margin={2} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Button} from '@devup-ui/core'\n        <Button padding={1} margin={2} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
index 38d10e53..5f4ecc07 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={1} margin={2} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={1} margin={2} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
index c42edeb5..e72f84d5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={('-1')}/>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={('-1')}/>\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
index 5ffc86cd..2309807c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.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 padding={1} margin={2} wrong={} wrong2=<></> />\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 padding={1} margin={2} wrong={} wrong2=<></> />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
index 8fbdb4dd..f8852f79 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"  exists class name  \" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"  exists class name  \" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
index 32b606b9..a02a4b7e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"exists class name\"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"exists class name\"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
index 029adfac..7f7f222d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
index 7900efd1..15629abc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
index e2be4516..1d5af36d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Image} from '@devup-ui/core'\n        <Image\n          className={styles.logo}\n          src=\"/next.svg\"\n          alt=\"Next.js logo\"\n          width={180}\n          height={38}\n        />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Image} from '@devup-ui/core'\n        <Image\n          className={styles.logo}\n          src=\"/next.svg\"\n          alt=\"Next.js logo\"\n          width={180}\n          height={38}\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
index 646907c6..4fabccb8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={variable} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={variable} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
index 3f5d52e4..b32298c2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} \n      _hover={{\n        borderColor: true ? 'blue' : ``,\n      }}\n className={variable} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} \n      _hover={{\n        borderColor: true ? 'blue' : ``,\n      }}\n className={variable} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
index 4bdf6008..83b81baa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
@@ -1,6 +1,6 @@
 ---
 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())"
+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{\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
index 2bca77f9..b01411ad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"exists class name\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"exists class name\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
index 40e4387c..cdf1cb1e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
index ade89ee7..d5a07731 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import * as B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import * as B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
index 7acf6370..9e4261cd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {css} from '@devup-ui/core'\n        const newCss=css;\n        <div className={newCss({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {css} from '@devup-ui/core'\n        const newCss=css;\n        <div className={newCss({\n            color: 'red'\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap
index 53b8aa88..3af5939b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-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 margin={a} style={styles} />;\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 margin={a} style={styles} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap
index 267dc4d6..0f0e95e7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.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 margin={a} style={{ key:value }} />;\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 margin={a} style={{ key:value }} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap
index 4d70c073..cd559242 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap
index 4001bb83..64723b2e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(1)\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(1)\n\"#, ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
index 6de996d3..d42c6379 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-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 padding={[1,,null]} />;\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 padding={[1,,null]} />;\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap
index a4069868..23ea4de4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.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 padding={[NaN,undefined,null]} margin={Infinity} />;\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 padding={[NaN,undefined,null]} margin={Infinity} />;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
new file mode 100644
index 00000000..7a8285fc
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \".grid-container\": {\n        \"@supports\": {\n            \"(display: grid)\": { display: \"grid\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: Some(
+                            ".grid-container",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
new file mode 100644
index 00000000..e3df1c7c
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \".card\": {\n        \"@container\": {\n            \"(min-width: 400px)\": { p: 4 }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: Some(
+                            ".card",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
new file mode 100644
index 00000000..f1927a5d
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
@@ -0,0 +1,82 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    body: {\n        bg: \"gray\",\n        \"@media\": {\n            \"(min-width: 768px)\": { bg: \"white\" },\n            \"(prefers-color-scheme: dark)\": { bg: \"black\" }\n        }\n    },\n    \".container\": {\n        \"@supports\": {\n            \"(display: grid)\": { display: \"grid\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: Some(
+                            ".container",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
new file mode 100644
index 00000000..9a5dfc1c
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    body: {\n        \"@media\": {\n            \"(min-width: 768px)\": { bg: \"white\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
index 3ccf1ec8..b8004ff1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap
index 38a5ecba..4a1526c4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Input} from '@devup-ui/core'\n        <Input placeholder=\"a\" maxLength=\"b\" minLength=\"c\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Input} from '@devup-ui/core'\n        <Input placeholder=\"a\" maxLength=\"b\" minLength=\"c\" />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
index cc4434c4..ad243f22 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.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 padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" />\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 padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap b/libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap
index cf2fac47..bcc8458f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W, useTheme} from '@devup-ui/core';\nuseTheme();\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W, useTheme} from '@devup-ui/core';\nuseTheme();\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap b/libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap
index 924f8ed0..d05df991 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W} from '@devup-ui/core'\n        \"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W} from '@devup-ui/core'\n        \"#, ExtractOption\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
index ec0c35fc..37a48838 100644
--- a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} WebkitLineClamp={4} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} WebkitLineClamp={4} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
new file mode 100644
index 00000000..0dab33c1
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _screen={{ bg: \"blue\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
new file mode 100644
index 00000000..08f87560
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _speech={{ display: \"none\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "speech",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
new file mode 100644
index 00000000..18651d81
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
@@ -0,0 +1,24 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _all={{ fontFamily: \"sans-serif\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "sans-serif",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "all",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
new file mode 100644
index 00000000..7c01a6fa
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
@@ -0,0 +1,48 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box \n    bg=\"red\"\n    _print={{ bg: \"white\" }}\n    _screen={{ bg: \"blue\" }}\n/>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b a-c\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
new file mode 100644
index 00000000..0fd01868
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _print={{ bg: \"white\", color: \"black\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
index c745929a..a7bef2a6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
index 8fea60d0..093a8c89 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
index 036cc4fa..6c1a825d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={(-1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={(-1)} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
index 9ede2fbc..a296cc3d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={[(-1),-2, -(3)]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={[(-1),-2, -(3)]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
index 55af0687..53d68028 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
index 2fb6b66a..aa9d21ad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{\n      selectors: {\n        \"&:hover\": {\n          color: \"red\",\n        }\n      },\n      _active: {\n        color: \"blue\",\n        _placeholder: {\n          color: \"green\",\n        },\n      },\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{\n      selectors: {\n        \"&:hover\": {\n          color: \"red\",\n        }\n      },\n      _active: {\n        color: \"blue\",\n        _placeholder: {\n          color: \"green\",\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
index 64cf9d53..6ed2919b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200  /  400  \"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200  /  400  \"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
index 78329e37..a1ed073d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200.2  /  400.2  \"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200.2  /  400.2  \"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
index bda7644a..6a47ac3f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"200/400\"} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"200/400\"} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
index c04421d6..2a08e7e8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-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 transform=\"scale(0deg)\" />\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 transform=\"scale(0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
index 7c9d4e75..0cb77801 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-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 transform=\"scaleX(0deg)\" />\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 transform=\"scaleX(0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
index f0779c43..678d0c1e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.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 transform=\"scaleY(0deg)\" />\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 transform=\"scaleY(0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
index d035aa1d..48d47f66 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.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 transform=\"scaleZ(0deg)\" />\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 transform=\"scaleZ(0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
index c9b07fa9..f736d81c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-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 transform=\"scale(0deg, 0deg)\" />\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 transform=\"scale(0deg, 0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
index 1ccded56..23b9b71f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-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 transform=\"scaleX(0deg) scaleY(0deg) scaleZ(0deg)\" />\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 transform=\"scaleX(0deg) scaleY(0deg) scaleZ(0deg)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
index edaba5bb..0799e61b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func.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 transform=\"scale(0.95)\" />\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 transform=\"scale(0.95)\" />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
index 9c07a449..d7e4215e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
index 8b05451d..1a1717e6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
index 9b074132..b7922355 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
index bee5bd80..a3f58886 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
index 77f72999..6edd02ed 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
index 1b7937d7..8f5418a1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
index 3fc598b3..d741eab5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][100]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
index f2ef3b64..8ed547b0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][a]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
index 664f0ba9..f9093e14 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
index b9073359..8c9693a0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
index c64b6a9f..1f40f7ff 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ \"a\": [1, 2, 3], \"b\": [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ \"a\": [1, 2, 3], \"b\": [4, 5, 6] }[idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
index fef8bdd5..51511fee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
index 22888258..8a44d426 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"b\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"b\"]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
index d62cef4d..fc798277 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
index 1dac4e59..fc8aae00 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"a\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"a\"]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
index 5ec3fe30..438417ca 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[, [d, e, f]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[, [d, e, f]][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
index fe86ae6e..5a58415f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, b, c], [d, e, f]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, b, c], [d, e, f]][idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
index dd9f61f8..dca815df 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [a, b, c], \"1\": [d, e, f] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [a, b, c], \"1\": [d, e, f] }[idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
index 1b57d93c..0f81681d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box bg={SOME_VAR[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box bg={SOME_VAR[idx]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
index 71478fc5..4f4f9aee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[a]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
index 7f2733af..48df5282 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={true[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={true[1]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
index 1738dca9..d741ed2f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {\n  Box,\n  Button as DevupButton,\n  Center,\n  css,\n} from '@devup-ui/core'\n\n<DevupButton\n    border={\n    {\n        primary: 'none',\n        default: '1px solid var(--border, #E4E4E4)',\n    }[variant]\n    }\n    className={className}\n    px={\n    {\n        false: { sm: '12px', md: '16px', lg: '20px' }[size],\n        true: { sm: '24px', md: '28px', lg: '32px' }[size],\n    }[(!!icon).toString()]\n    }\n/>\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {\n  Box,\n  Button as DevupButton,\n  Center,\n  css,\n} from '@devup-ui/core'\n\n<DevupButton\n    border={\n    {\n        primary: 'none',\n        default: '1px solid var(--border, #E4E4E4)',\n    }[variant]\n    }\n    className={className}\n    px={\n    {\n        false: { sm: '12px', md: '16px', lg: '20px' }[size],\n        true: { sm: '24px', md: '28px', lg: '32px' }[size],\n    }[(!!icon).toString()]\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
index 1d8ea398..204997e7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
index b91e3169..a49f63be 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][+10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][+10]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
index 1b29c755..be0d5809 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap
index 2790c381..d229b058 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.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 padding={[1,,null][1]} />;\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 padding={[1,,null][1]} />;\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
index e120a265..0bc1a93e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[][0]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
index a6857e42..a07a8afd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"wrong\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"wrong\"]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
index 1d485ef5..6b2cb36e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[`wrong`]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[`wrong`]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
index 36633000..780d58ec 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[1]} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
index 230e15af..a162298c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box opacity={{}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box opacity={{}[1]} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
index c1ce79f3..706be8ad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-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 bg=\"blue;;\" />\n\"#, ExtractOption\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 bg=\"blue;;\" />\n\"#, ExtractOption\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
index b4e075a4..abe9adc2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-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 bg={`${\"green;\"}`} />\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 bg={`${\"green;\"}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
index 3c00f786..9f40e962 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.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 bg={`${color};`} />\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 bg={`${color};`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
index fa8bd1c3..b7e78a72 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.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 bg=\"red;\" />\n\"#, ExtractOption\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 bg=\"red;\" />\n\"#, ExtractOption\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
index 5064d117..bf06ba7e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
index a96310d5..c3f7f770 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return  r(\"div\", { children: [\n     e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\",\n        styleOrder: 10\n      }\n    ),\n     e(t, { typography: \"header\", children: \"typo\", styleOrder:20 }),\n     e(i, { as: \"section\", mt: 2, children: \"section\",styleOrder:30 })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return  r(\"div\", { children: [\n     e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\",\n        styleOrder: 10\n      }\n    ),\n     e(t, { typography: \"header\", children: \"typo\", styleOrder:20 }),\n     e(i, { as: \"section\", mt: 2, children: \"section\",styleOrder:30 })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
index 5d8213aa..dd17c083 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\", styleOrder:100})} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\", styleOrder:100})} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
index e28899f9..714e0c0d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={20} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={20} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
index 38153b94..b4557b1f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\",styleOrder:30})} styleOrder={20} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\",styleOrder:30})} styleOrder={20} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
index 5a192aaf..bc2c75c0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:100})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:100})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
index 0e0f119b..14e7eb0f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n<Box\n        aria-disabled={false}\n        bg=\"red\"\n        className={css({\n          bg: 'blue',\n          styleOrder: 17,\n        })}\n        styleOrder={3}\n      />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n<Box\n        aria-disabled={false}\n        bg=\"red\"\n        className={css({\n          bg: 'blue',\n          styleOrder: 17,\n        })}\n        styleOrder={3}\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
index e5278639..d2c969e5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order.snap b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
index ce276bbc..f0da0252 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}} selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}} selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
index 012dad1b..582862c2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={\"20\"} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:(\"100\")})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={\"20\"} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:(\"100\")})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
index 16cccd12..b4f758b8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={`20`} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:`100`})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={`20`} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:`100`})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
index 026d3d2e..972ac8b2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder=\"20\" p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:\"100\"})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder=\"20\" p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:\"100\"})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap
index ad03901c..dd01636b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={styleVars} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={styleVars} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap
index dc4c9b76..0b1e3082 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap
index f3a975e9..0cb483f9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\",\n            \"e\": \"blue\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\",\n            \"e\": \"blue\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap
index ac6afdd5..205f4267 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap
index 440aed1e..61d3e1fd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable: true ? \"red\" : \"blue\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap
index 2f0de7e5..30c22322 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap
index 5d5191a0..341f74f2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg={color} style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg={color} style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap
index c1044f2c..f3ce947c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            [\"hello\"]: \"red\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            [\"hello\"]: \"red\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables.snap
index b21d8bfe..47a0d043 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={{\n        c: \"red\"\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={{\n        c: \"red\"\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap
index da593509..00fa017a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { styleVars: { c: \"yellow\" } })\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { styleVars: { c: \"yellow\" } })\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
index 11b26bc9..6dac99ee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const {jsx:e1, jsxs:e2}=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e2(\"div\",{children:[e1(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e1(r.Text,{typography:\"header\",children:\"typo\"}),e1(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const {jsx:e1, jsxs:e2}=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e2(\"div\",{children:[e1(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e1(r.Text,{typography:\"header\",children:\"typo\"}),e1(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
index ab7182e6..448d8be5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
index 1b6652ff..7302213d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:`header`,children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:`header`,children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
index a2b59f6c..21404d56 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
index cadd3581..b81a3b76 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
index 09233ab4..340c8b82 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: \"red\" })\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: \"red\" })\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap
index f022ede0..83520b21 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" } })\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" } })\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
index 5d2f5e7e..d09fc0b1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" }, ...props })\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" }, ...props })\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
index 41c3b62f..82546716 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
index c57b9961..710f27b6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
index 36257bb5..1ecbf799 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${-1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${-1}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
index 74467260..1e55e632 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1} ${2}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1} ${2}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap
index 7001e39a..73d071eb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `} />\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: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
index a8ff5285..8468c9a7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `}\n    _hover={{bg:\"red\"}}\n    _themeDark={{ _hover:{bg:\"black\"} }}\n    \n     />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `}\n    _hover={{bg:\"red\"}}\n    _themeDark={{ _hover:{bg:\"black\"} }}\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
index a1014b73..50688487 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box bg={`${\"red\"}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box bg={`${\"red\"}`} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
index 17cd7555..906cc090 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : {}} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : {}} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
index 4e9c815d..aad0ec51 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\",color:\"blue\" } : { fontWeight:\"bold\", color:\"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\",color:\"blue\" } : { fontWeight:\"bold\", color:\"red\" }} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
index 8ad23ae0..d355d58a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : undefined} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : undefined} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
index e785c0aa..27a32929 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ display:\"none\" }} _themeLight={{ display: \"flex\" }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ display:\"none\" }} _themeLight={{ display: \"flex\" }} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
index 2eedbef7..ac0dad6d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{ _hover:{bg:\"black\"} }} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
index 6a94bad6..2701d66c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{\n        selectors: {\n          '& :is(svg,img)': {\n            boxSize: '100%',\n            filter: 'brightness(0) invert(1)',\n          },\n        },\n      }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{\n        selectors: {\n          '& :is(svg,img)': {\n            boxSize: '100%',\n            filter: 'brightness(0) invert(1)',\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
index e92cd98d..9b97b37a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ _hover:{bg:\"black\"} }} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
index a94f5195..50e7de7d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex MozTabSize={4} WebkitLineClamp={4} msBorderRadius={4} />\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())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex MozTabSize={4} WebkitLineClamp={4} msBorderRadius={4} />\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: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap b/libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap
index 38b418f8..d0a75ea3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={} />\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: {},
diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs
index 0a753c72..51f98253 100644
--- a/libs/extractor/src/visit.rs
+++ b/libs/extractor/src/visit.rs
@@ -25,7 +25,8 @@ use oxc_ast::ast::JSXAttributeItem::Attribute;
 use oxc_ast::ast::JSXAttributeName::Identifier;
 use oxc_ast::ast::{
     Argument, BindingPattern, CallExpression, Expression, ImportDeclaration, ImportOrExportKind,
-    JSXAttributeValue, JSXChild, JSXElement, Program, Statement, VariableDeclarator, WithClause,
+    JSXAttributeItem, JSXAttributeValue, JSXChild, JSXElement, Program, Statement,
+    VariableDeclarator, WithClause,
 };
 use oxc_ast_visit::VisitMut;
 use oxc_ast_visit::walk_mut::{
@@ -591,6 +592,20 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                             }
                         }
                     }
+                } else if let JSXAttributeItem::SpreadAttribute(spread) = &mut attr {
+                    // Extract styles from spread attributes (e.g., {...{"@media": {...}}})
+                    let ExtractResult { styles, .. } = extract_style_from_expression(
+                        &self.ast,
+                        None,
+                        &mut spread.argument,
+                        0,
+                        &None,
+                    );
+                    if !styles.is_empty() {
+                        props_styles.extend(styles.into_iter().rev());
+                    } else {
+                        attrs.insert(i, attr);
+                    }
                 } else {
                     attrs.insert(i, attr);
                 }
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index d9c7bb7a..41942e0b 100644
--- a/libs/sheet/src/lib.rs
+++ b/libs/sheet/src/lib.rs
@@ -1,7 +1,10 @@
 pub mod theme;
 
 use crate::theme::Theme;
-use css::{merge_selector, style_selector::StyleSelector};
+use css::{
+    merge_selector,
+    style_selector::{AtRuleKind, StyleSelector},
+};
 use extractor::extract_style::ExtractStyleProperty;
 use extractor::extract_style::extract_style_value::ExtractStyleValue;
 use extractor::extract_style::style_property::StyleProperty;
@@ -434,23 +437,18 @@ impl StyleSheet {
                 .iter()
                 .partition(|prop| matches!(prop.selector, Some(StyleSelector::Global(_, _))));
             global_props.sort();
-            let (mut medias, mut sorted_props): (Vec<_>, Vec<_>) =
-                rest.into_iter().partition(|prop| {
-                    matches!(
-                        prop.selector,
-                        Some(StyleSelector::Media {
-                            query: _,
-                            selector: _
-                        })
-                    )
-                });
+            let (mut at_rules, mut sorted_props): (Vec<_>, Vec<_>) = rest
+                .into_iter()
+                .partition(|prop| matches!(prop.selector, Some(StyleSelector::At { .. })));
             sorted_props.sort();
-            medias.sort();
-            let medias = {
-                let mut map = BTreeMap::new();
-                for prop in medias {
-                    if let Some(StyleSelector::Media { query, .. }) = &prop.selector {
-                        map.entry(query).or_insert_with(Vec::new).push(prop);
+            at_rules.sort();
+            let at_rules = {
+                let mut map: BTreeMap<(AtRuleKind, &String), Vec<_>> = BTreeMap::new();
+                for prop in at_rules {
+                    if let Some(StyleSelector::At { kind, query, .. }) = &prop.selector {
+                        map.entry((*kind, query))
+                            .or_insert_with(Vec::new)
+                            .push(prop);
                     }
                 }
                 map
@@ -513,21 +511,40 @@ impl StyleSheet {
                     .as_str(),
                 );
             }
-            for (media, props) in medias {
+            for ((kind, query), props) in at_rules {
                 let inner_css = props
                     .into_iter()
                     .map(ExtractStyle::extract)
                     .collect::<String>();
                 current_css.push_str(
                     if let Some(break_point) = break_point {
-                        format!("@media(min-width:{break_point}px)and {media}{{{inner_css}}}")
+                        match kind {
+                            AtRuleKind::Media => {
+                                // Combine @media queries with 'and'
+                                format!(
+                                    "@media(min-width:{break_point}px)and {query}{{{inner_css}}}"
+                                )
+                            }
+                            AtRuleKind::Supports => {
+                                // Nest @supports inside @media for breakpoint
+                                format!(
+                                    "@media(min-width:{break_point}px){{@supports{query}{{{inner_css}}}}}"
+                                )
+                            }
+                            AtRuleKind::Container => {
+                                // Nest @container inside @media for breakpoint
+                                format!(
+                                    "@media(min-width:{break_point}px){{@container{query}{{{inner_css}}}}}"
+                                )
+                            }
+                        }
                     } else {
                         format!(
-                            "@media{}{{{}}}",
-                            if media.starts_with("(") {
-                                media.clone()
+                            "@{kind}{}{{{}}}",
+                            if query.starts_with("(") {
+                                query.clone()
                             } else {
-                                format!(" {media}")
+                                format!(" {query}")
                             },
                             inner_css.as_str()
                         )
@@ -1303,6 +1320,54 @@ mod tests {
         assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
     }
 
+    #[test]
+    fn test_screen_selector() {
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "background",
+            0,
+            "blue",
+            Some(&"screen".into()),
+            None,
+            None,
+        );
+
+        assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_speech_selector() {
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "display",
+            0,
+            "none",
+            Some(&"speech".into()),
+            None,
+            None,
+        );
+
+        assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_all_media_selector() {
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "font-family",
+            0,
+            "sans-serif",
+            Some(&"all".into()),
+            None,
+            None,
+        );
+
+        assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
+    }
+
     #[test]
     fn test_selector_with_query() {
         let mut sheet = StyleSheet::default();
@@ -1311,7 +1376,8 @@ mod tests {
             "margin-top",
             0,
             "40px",
-            Some(&StyleSelector::Media {
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width: 1024px)".to_string(),
                 selector: Some("&:hover".to_string()),
             }),
@@ -1323,7 +1389,8 @@ mod tests {
             "margin-bottom",
             0,
             "40px",
-            Some(&StyleSelector::Media {
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Media,
                 query: "(min-width: 1024px)".to_string(),
                 selector: Some("&:hover".to_string()),
             }),
@@ -1334,6 +1401,46 @@ mod tests {
         assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
     }
 
+    #[test]
+    fn test_selector_with_supports() {
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "display",
+            0,
+            "grid",
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "(display: grid)".to_string(),
+                selector: None,
+            }),
+            None,
+            None,
+        );
+
+        assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_selector_with_container() {
+        let mut sheet = StyleSheet::default();
+        sheet.add_property(
+            "test",
+            "padding",
+            0,
+            "10px",
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Container,
+                query: "(min-width: 768px)".to_string(),
+                selector: None,
+            }),
+            None,
+            None,
+        );
+
+        assert_debug_snapshot!(sheet.create_css(None, false).split("*/").nth(1).unwrap());
+    }
+
     #[test]
     fn test_deserialize() {
         {
@@ -1818,4 +1925,103 @@ mod tests {
         sheet.update_styles(&output.styles, "index.tsx", true);
         assert_debug_snapshot!(sheet.create_css(None, true).split("*/").nth(1).unwrap());
     }
+
+    #[test]
+    fn test_update_styles_with_typography() {
+        use extractor::extract_style::extract_style_value::ExtractStyleValue;
+
+        let mut sheet = StyleSheet::default();
+        let mut styles = HashSet::new();
+        styles.insert(ExtractStyleValue::Typography("$heading".to_string()));
+        let (collected, updated) = sheet.update_styles(&styles, "index.tsx", true);
+        // Typography doesn't collect or update
+        assert!(!collected);
+        assert!(!updated);
+    }
+
+    #[test]
+    fn test_global_props_with_breakpoints() {
+        let mut sheet = StyleSheet::default();
+        // Add global style at level 1 (with breakpoint)
+        sheet.add_property(
+            "a",
+            "color",
+            1, // level 1 means it should be wrapped in @media
+            "red",
+            Some(&StyleSelector::Global(
+                "body".to_string(),
+                "test.tsx".to_string(),
+            )),
+            Some(0),
+            None,
+        );
+        let css = sheet.create_css(None, false);
+        assert!(css.contains("@media"));
+        assert!(css.contains("body"));
+        assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_at_rules_with_breakpoints() {
+        let mut sheet = StyleSheet::default();
+        // Add @supports with breakpoint (level 1)
+        sheet.add_property(
+            "a",
+            "display",
+            1,
+            "grid",
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Supports,
+                query: "(display: grid)".to_string(),
+                selector: None,
+            }),
+            Some(0),
+            None,
+        );
+        let css = sheet.create_css(None, false);
+        assert!(css.contains("@media"));
+        assert!(css.contains("@supports"));
+        assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_container_with_breakpoints() {
+        let mut sheet = StyleSheet::default();
+        // Add @container with breakpoint (level 1)
+        sheet.add_property(
+            "a",
+            "width",
+            1,
+            "100%",
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Container,
+                query: "(min-width: 400px)".to_string(),
+                selector: None,
+            }),
+            Some(0),
+            None,
+        );
+        let css = sheet.create_css(None, false);
+        assert!(css.contains("@media"));
+        assert!(css.contains("@container"));
+        assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
+    }
+
+    #[test]
+    fn test_theme_layer_in_css() {
+        let mut sheet = StyleSheet::default();
+        let mut theme = Theme::default();
+        let mut color_theme = ColorTheme::default();
+        color_theme.add_color("primary", "#000");
+        theme.add_color_theme("default", color_theme);
+        sheet.set_theme(theme);
+
+        // Add some regular styles to trigger layer output
+        sheet.add_property("a", "color", 0, "blue", None, Some(0), None);
+
+        let css = sheet.create_css(None, false);
+        assert!(css.contains("@layer"));
+        assert!(css.contains("@layer t{"));
+        assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
+    }
 }
diff --git a/libs/sheet/src/snapshots/sheet__tests__all_media_selector.snap b/libs/sheet/src/snapshots/sheet__tests__all_media_selector.snap
new file mode 100644
index 00000000..51af45ab
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__all_media_selector.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
+---
+"@media all{.test{font-family:sans-serif}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__at_rules_with_breakpoints.snap b/libs/sheet/src/snapshots/sheet__tests__at_rules_with_breakpoints.snap
new file mode 100644
index 00000000..5dfb111d
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__at_rules_with_breakpoints.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b;@layer b{@media(min-width:480px){@supports(display: grid){.a{display:grid}}}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__container_with_breakpoints.snap b/libs/sheet/src/snapshots/sheet__tests__container_with_breakpoints.snap
new file mode 100644
index 00000000..8c97b0b4
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__container_with_breakpoints.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b;@layer b{@media(min-width:480px){@container(min-width: 400px){.a{width:100%}}}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-10.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-10.snap
index b75cf017..626aa196 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-10.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-10.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()"
 ---
 "*[disabled='true'] .test:hover{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-11.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-11.snap
index aaea27aa..f516695c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-11.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-11.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()"
 ---
 ".test[disabled='true']{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap
index bd234935..48bb8532 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-12.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-12.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()"
 ---
 ".test[disabled='true'],.test[disabled='true']{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-2.snap
index ca2936a5..3ab3037a 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-2.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()"
 ---
 "div {display:flex;}"
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 d086d191..13ef16be 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-3.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()"
 ---
 "@media(min-width:768px){.test{margin:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-4.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-4.snap
index eb449cc6..b63e10f1 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-4.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-4.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()"
 ---
 ".test:hover{background:red}.test:active{background:blue}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap
index e2a05023..22c1e0ed 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-5.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}*[role=group]:focus-visible .test{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-6.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-6.snap
index 58329cdb..7db15471 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-6.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-6.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()"
 ---
 ".test:hover{background:blue}*[role=group]:focus-visible .test{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-8.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-8.snap
index b00c455a..35a8a0b7 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-8.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-8.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:hover{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap
index e56081a4..9b09db02 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css-9.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-9.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()"
 ---
 ".test:wrong:hover{background:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css.snap b/libs/sheet/src/snapshots/sheet__tests__create_css.snap
index f4224840..833d1a41 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css.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()"
 ---
 "@media(min-width:480px){.test{margin:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test-2.snap
index 0f8986e1..3193a504 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_sort_test-2.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()"
 ---
 ".test{border:1px solid}.test{border-color:red}"
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 538c3e7e..d9ef1549 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@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-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-2.snap
index 4fb9da31..be2c2dab 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-2.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{.test{border-color:red}}.test{border:1px solid}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-3.snap
index 356552e0..73046f61 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test-3.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{.test{display:flex}}.test{display:block}"
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 c8ec8721..00466010 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{@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 7a9b1f02..1b0172da 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@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 89a77013..895c5502 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@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 21e31ba2..0fecb9df 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{@media(min-width:480px){div{background-color:blue}}}div{background-color:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-5.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-5.snap
index b199fa79..68c46671 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-5.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-5.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "div{background-color:red}.test2:hover{background-color:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap
index 0481ea8d..16eea411 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-6.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{@media(min-width:480px){div{background-color:blue;color:blue}}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap
index 895cd39d..635438a6 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-7.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-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()"
 ---
 ""
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap
index c4914b18..6e48503b 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-8.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{div{background-color:blue;color:blue}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap
index 623addd4..ba2b438f 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-9.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{div{color:blue}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector.snap
index fea50d3f..213bdcff 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_global_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()"
 ---
 "div{background-color:red}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-2.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-2.snap
index 2432f960..cfda3a52 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-2.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()"
 ---
 "@import \"@devup-ui/core/css/global.css\";@import \"@devup-ui/core/css/new-global.css\";"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-3.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-3.snap
index 218604a2..aa20385f 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports-3.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()"
 ---
 "@import \"@devup-ui/core/css/global.css\";"
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports.snap b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports.snap
index 04beaf78..77813cdf 100644
--- a/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css_with_imports.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()"
 ---
 "@import \"@devup-ui/core/css/global.css\";@import \"@devup-ui/core/css/global2.css\";@import \"@devup-ui/core/css/global3.css\";@import \"@devup-ui/core/css/global4.css\";"
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 430170e0..61f43e5f 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{.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 626055ae..f58ce275 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer b;@layer b{@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 0374d87c..cba28b9d 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@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 538c3e7e..d9ef1549 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@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 2e9ef921..e30e1e90 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css()
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@media(min-width:480px){.test{background-color:some}.test:hover{background-color:red}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__font_face.snap b/libs/sheet/src/snapshots/sheet__tests__font_face.snap
index f51b6a0d..fcaea88b 100644
--- a/libs/sheet/src/snapshots/sheet__tests__font_face.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__font_face.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: css
+expression: "css.split(\"*/\").nth(1).unwrap()"
 ---
 "@font-face{font-family:Roboto;font-weight:400;src:url('/fonts/Roboto-Regular.ttf')}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__global_props_with_breakpoints.snap b/libs/sheet/src/snapshots/sheet__tests__global_props_with_breakpoints.snap
new file mode 100644
index 00000000..35be4338
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__global_props_with_breakpoints.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b;@layer b{@media(min-width:480px){body{color:red}}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__keyframes-2.snap b/libs/sheet/src/snapshots/sheet__tests__keyframes-2.snap
index 6fb6a675..7d0d0b7c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__keyframes-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__keyframes-2.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: now
+expression: "now.split(\"*/\").nth(1).unwrap()"
 ---
 "@keyframes fadeIn{from{opacity:0}to{opacity:1}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__keyframes.snap b/libs/sheet/src/snapshots/sheet__tests__keyframes.snap
index 365df572..e8a7077a 100644
--- a/libs/sheet/src/snapshots/sheet__tests__keyframes.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__keyframes.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: past
+expression: "past.split(\"*/\").nth(1).unwrap()"
 ---
 "@keyframes fadeIn{from{opacity:0}to{opacity:1}}"
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 9f8de7db..ca6c6125 100644
--- a/libs/sheet/src/snapshots/sheet__tests__print_selector-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__print_selector-2.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()"
 ---
 ".test{margin-bottom:40px}.test{margin-top:40px}@media print{.test{margin-left:40px}.test{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 72167edc..053d618c 100644
--- a/libs/sheet/src/snapshots/sheet__tests__print_selector.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__print_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()"
 ---
 "@media print{.test{margin-bottom:40px}.test{margin-left:40px}.test{margin-right:40px}.test{margin-top:40px}}@media(min-width:480px)and print{.test{margin-bottom:40px}.test{margin-left:40px}.test{margin-right:40px}.test{margin-top:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__reset_global_css-2.snap b/libs/sheet/src/snapshots/sheet__tests__reset_global_css-2.snap
index ca2936a5..3ab3037a 100644
--- a/libs/sheet/src/snapshots/sheet__tests__reset_global_css-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__reset_global_css-2.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()"
 ---
 "div {display:flex;}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__reset_global_css-3.snap b/libs/sheet/src/snapshots/sheet__tests__reset_global_css-3.snap
index ca2936a5..3ab3037a 100644
--- a/libs/sheet/src/snapshots/sheet__tests__reset_global_css-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__reset_global_css-3.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()"
 ---
 "div {display:flex;}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__reset_global_css.snap b/libs/sheet/src/snapshots/sheet__tests__reset_global_css.snap
index 709df552..4552d820 100644
--- a/libs/sheet/src/snapshots/sheet__tests__reset_global_css.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__reset_global_css.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()"
 ---
 "div {display:flex;}div {display:flex;}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__screen_selector.snap b/libs/sheet/src/snapshots/sheet__tests__screen_selector.snap
new file mode 100644
index 00000000..efa49342
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__screen_selector.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
+---
+"@media screen{.test{background:blue}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_container.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_container.snap
new file mode 100644
index 00000000..ba7ca3d7
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_container.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
+---
+"@container(min-width: 768px){.test{padding:10px}}"
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 49986725..aa0f80d2 100644
--- a/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_prefix.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()"
 ---
 "@media(min-width:480px){*[role=group]:hover .test{margin-left:40px}*[role=group]:hover .test{margin-right:40px}}@media(min-width:768px){*[role=group]:hover .test{margin-left:50px}*[role=group]:hover .test{margin-right:50px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap
index f7a5c8af..b693d37d 100644
--- a/libs/sheet/src/snapshots/sheet__tests__selector_with_query.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_query.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()"
 ---
 "@media(min-width: 1024px){.test:hover{margin-bottom:40px}.test:hover{margin-top:40px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__selector_with_supports.snap b/libs/sheet/src/snapshots/sheet__tests__selector_with_supports.snap
new file mode 100644
index 00000000..fafcfe00
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__selector_with_supports.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
+---
+"@supports(display: grid){.test{display:grid}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__speech_selector.snap b/libs/sheet/src/snapshots/sheet__tests__speech_selector.snap
new file mode 100644
index 00000000..a180ad3b
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__speech_selector.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
+---
+"@media speech{.test{display:none}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap
index be7084f2..2ca7afcc 100644
--- a/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__style_order_create_css-2.snap
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer o3,o17;@layer o3{.test{background:red}}@layer o17{.test{background:blue}}"
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 2835fb86..2c112129 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
@@ -1,5 +1,5 @@
 ---
 source: libs/sheet/src/lib.rs
-expression: sheet.create_css(None)
+expression: "sheet.create_css(None, false).split(\"*/\").nth(1).unwrap()"
 ---
 "@layer o1,o2;@layer o1{.test{margin-left:40px}.test{margin-right:40px}@media(min-width:480px){.test{margin-left:40px}.test{margin-left:44px}.test{margin-right:40px}.test{margin-right:44px}}}@layer o2{@media(min-width:480px){.test{margin-left:50px}.test{margin-right:50px}}}.test{margin-left:70px}.test{margin-right:70px}@media(min-width:480px){.test{margin-left:60px}.test{margin-right:60px}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__theme_layer_in_css.snap b/libs/sheet/src/snapshots/sheet__tests__theme_layer_in_css.snap
new file mode 100644
index 00000000..07573384
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_layer_in_css.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b,t;@layer t{:root{--primary:#000}}@layer b{.a{color:blue}}"
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 d6aa6b9c..1946f076 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-2.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()"
 ---
 ".test{margin-left:41px}.test{margin-left:42px}.test{margin-right:41px}.test{margin-right:42px}:root[data-theme=light] .test{margin-left:50px}:root[data-theme=light] .test{margin-left:51px}:root[data-theme=light] .test{margin-right:50px}:root[data-theme=light] .test{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 9975756c..771bbc05 100644
--- a/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__theme_selector-3.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=light] .test:hover{margin-left:50px}:root[data-theme=light] .test:hover{margin-right:50px}:root[data-theme=light] .test:active{margin-left:50px}:root[data-theme=light] .test:active{margin-right:50px}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap
index b8e0fcaf..a227ce36 100644
--- a/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__wrong_breakpoint.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()"
 ---
 "@media(min-width:1600px){.test{margin-left:40px}.test{margin-right:40px}}"
diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts
index 54d2868c..d18c292a 100644
--- a/packages/react/src/types/props/selector/index.ts
+++ b/packages/react/src/types/props/selector/index.ts
@@ -64,10 +64,27 @@ export type Selectors = Partial<
   >
 >
 
+export type AtRuleRecord = Partial<
+  Record<string & {}, SelectorProps<DevupProps>>
+>
+
 export interface DevupSelectorProps
   extends SimpleSelectorProps, AdvancedSelectorProps {
   // media query
   _print?: SelectorProps<DevupProps>
+  _screen?: SelectorProps<DevupProps>
+  _speech?: SelectorProps<DevupProps>
+  _all?: SelectorProps<DevupProps>
+
+  // at-rules (underscore prefix)
+  _container?: AtRuleRecord
+  _media?: AtRuleRecord
+  _supports?: AtRuleRecord
+
+  // at-rules (@ prefix)
+  '@container'?: AtRuleRecord
+  '@media'?: AtRuleRecord
+  '@supports'?: AtRuleRecord
 
   selectors?: Selectors