Add selector order

Author: owjs3901

.changeset/cuddly-waves-grin.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add selector order

apps/landing/src/app/page.tsx

@@ -31,13 +31,29 @@ export default function HomePage() {
             href={URL_PREFIX + '/docs/overview'}
           >
             <Flex
+              _active={{
+                bg: '$negativeBase',
+              }}
+              _hover={{
+                bg: '$title',
+              }}
               alignItems="center"
               bg="$text"
               borderRadius="100px"
               gap="20px"
               p="16px 40px"
             >
-              <Box bg="$secondary" borderRadius="100%" boxSize="10px" />
+              <Box
+                _active={{
+                  bg: '$third',
+                }}
+                _hover={{
+                  bg: '$primary',
+                }}
+                bg="$secondary"
+                borderRadius="100%"
+                boxSize="10px"
+              />
               <Flex alignItems="center" gap="10px">
                 <Text color="$base" typography="buttonL">
                   Get started

libs/css/src/lib.rs

@@ -5,13 +5,56 @@ use std::fmt;
 use std::fmt::{Display, Formatter};
 use std::sync::Mutex;
 
-#[derive(Debug, PartialEq, Clone, Hash, Eq, Ord, PartialOrd)]
+static SELECTOR_ORDER_MAP: Lazy<HashMap<String, u8>> = Lazy::new(|| {
+    let mut map = HashMap::new();
+    map.insert("disabled".to_string(), 5);
+    map.insert("selected".to_string(), 4);
+    map.insert("active".to_string(), 3);
+    map.insert("focus".to_string(), 2);
+    map.insert("hover".to_string(), 1);
+    map
+});
+
+#[derive(Debug, PartialEq, Clone, Hash, Eq)]
 pub enum StyleSelector {
     Postfix(String),
     Prefix(String),
     Dual(String, String),
 }
 
+impl PartialOrd for StyleSelector {
+    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
+        Some(self.cmp(other))
+    }
+}
+
+impl Ord for StyleSelector {
+    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
+        match (self, other) {
+            (Postfix(a), Postfix(b)) => SELECTOR_ORDER_MAP
+                .get(a)
+                .unwrap_or(&0)
+                .cmp(SELECTOR_ORDER_MAP.get(b).unwrap_or(&0)),
+            (Prefix(a), Prefix(b)) => a.cmp(b),
+            (Dual(p1, a), Dual(p2, b)) => {
+                if p1 == p2 {
+                    SELECTOR_ORDER_MAP
+                        .get(a)
+                        .unwrap_or(&0)
+                        .cmp(SELECTOR_ORDER_MAP.get(b).unwrap_or(&0))
+                } else {
+                    p1.cmp(p2)
+                }
+            }
+            (Postfix(_), _) => std::cmp::Ordering::Less,
+            (Prefix(_), Postfix(_)) => std::cmp::Ordering::Greater,
+            (Prefix(_), _) => std::cmp::Ordering::Less,
+            (Dual(_, _), Postfix(_)) => std::cmp::Ordering::Greater,
+            (Dual(_, _), Prefix(_)) => std::cmp::Ordering::Greater,
+        }
+    }
+}
+
 impl From<&str> for StyleSelector {
     fn from(value: &str) -> Self {
         if let Some(s) = value.strip_prefix("group") {

libs/sheet/src/lib.rs

@@ -285,6 +285,11 @@ mod tests {
         sheet.add_property("test", "mx", 2, "40px", None, false);
         sheet.add_property("test", "my", 2, "40px", None, false);
         assert_debug_snapshot!(sheet.create_css());
+
+        let mut sheet = StyleSheet::default();
+        sheet.add_property("test", "bg", 0, "red", Some(&"hover".into()), false);
+        sheet.add_property("test", "bg", 0, "blue", Some(&"active".into()), false);
+        assert_debug_snapshot!(sheet.create_css());
     }
 
     #[test]

libs/sheet/src/snapshots/sheet__tests__create_css-4.snap

@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: sheet.create_css()
+---
+".test:hover{background:red}.test:active{background:blue}"