Implement style order

Author: owjs3901

.changeset/tidy-parents-buy.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/wasm": patch
+"@devup-ui/react": patch
+---
+
+Implement style order

Cargo.lock

@@ -21,7 +21,7 @@ css = { path = "../../libs/css" }
 # all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
-once_cell = "1.20.2"
+once_cell = "1.20.3"
 js-sys = "0.3.76"
 serde_json = "1.0.138"
 serde-wasm-bindgen = "0.6.5"

bindings/devup-ui-wasm/Cargo.toml

@@ -53,7 +53,7 @@ impl Output {
                         st.level(),
                         st.value(),
                         st.selector(),
-                        st.basic(),
+                        st.style_order(),
                     ) {
                         collected = true;
                     }
@@ -65,7 +65,7 @@ impl Output {
                         dy.level(),
                         &format!("var({})", variable.unwrap()),
                         dy.selector(),
-                        false,
+                        dy.style_order(),
                     ) {
                         collected = true;
                     }
@@ -81,6 +81,9 @@ impl Output {
         if !collected {
             return None;
         }
+
+        log_str(&format!("css: {:?}", sheet.properties));
+        log_str(&sheet.create_css());
         Some(sheet.create_css())
     }
 }

bindings/devup-ui-wasm/src/lib.rs

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-once_cell = "1.20.2"
+once_cell = "1.20.3"
 serial_test = "3.2.0"
 serde = { version = "1.0.217", features = ["derive"] }
 regex = "1.11.1"

libs/css/Cargo.toml

@@ -325,13 +325,15 @@ pub fn sheet_to_classname(
     level: u8,
     value: Option<&str>,
     selector: Option<&str>,
+    style_order: Option<u8>,
 ) -> String {
     let key = format!(
-        "{}-{}-{}-{}",
+        "{}-{}-{}-{}-{}",
         property.trim(),
         level,
         F_SPACE_RE.replace_all(value.unwrap_or(""), ",").trim(),
-        selector.unwrap_or("").trim()
+        selector.unwrap_or("").trim(),
+        style_order.unwrap_or(255)
     );
     let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
     map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| {
@@ -387,40 +389,53 @@ mod tests {
     #[serial]
     fn test_sheet_to_classname() {
         reset_class_map();
-        assert_eq!(sheet_to_classname("background", 0, None, None), "d0");
+        assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0");
         assert_eq!(
-            sheet_to_classname("background", 0, Some("hover"), None),
+            sheet_to_classname("background", 0, Some("hover"), None, None),
             "d1"
         );
-        assert_eq!(sheet_to_classname("background", 1, None, None), "d2");
+        assert_eq!(sheet_to_classname("background", 1, None, None, None), "d2");
         assert_eq!(
-            sheet_to_classname("background", 1, Some("hover"), None),
+            sheet_to_classname("background", 1, Some("hover"), None, None),
             "d3"
         );
 
         reset_class_map();
-        assert_eq!(sheet_to_classname("background", 0, None, None), "d0");
-        assert_eq!(sheet_to_classname("background", 0, None, None), "d0");
-        assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1");
-        assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1");
+        assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0");
+        assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0");
         assert_eq!(
-            sheet_to_classname("  background  ", 0, Some("  red  "), None),
+            sheet_to_classname("background", 0, Some("red"), None, None),
+            "d1"
+        );
+        assert_eq!(
+            sheet_to_classname("background", 0, Some("red"), None, None),
+            "d1"
+        );
+        assert_eq!(
+            sheet_to_classname("  background  ", 0, Some("  red  "), None, None),
             "d1"
         );
 
         assert_eq!(
-            sheet_to_classname("background", 0, Some("rgba(255, 0, 0,    0.5)"), None),
+            sheet_to_classname("background", 0, Some("rgba(255, 0, 0,    0.5)"), None, None),
             "d2"
         );
         assert_eq!(
-            sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None),
+            sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None, None),
             "d2"
         );
 
         {
             let map = GLOBAL_CLASS_MAP.lock().unwrap();
-            assert_eq!(map.get("background-0-rgba(255,0,0,0.5)-"), Some(&2));
+            assert_eq!(map.get("background-0-rgba(255,0,0,0.5)--255"), Some(&2));
         }
+
+        reset_class_map();
+        assert_eq!(sheet_to_classname("background", 0, None, None, None), "d0");
+        assert_eq!(
+            sheet_to_classname("background", 0, None, None, Some(1)),
+            "d1"
+        );
     }
 
     #[test]