Support supports rule

.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"}

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}}"

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())
             }

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,
         },