Merge pull request #97 from dev-five-git/fix-order-issue

Fix ordering logic in style comparison and update class name serializ…

Author: owjs3901

.changeset/dry-readers-doubt.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix order issue

libs/sheet/src/lib.rs

@@ -4,14 +4,15 @@ use crate::theme::Theme;
 use css::{convert_property, merge_selector, PropertyType, StyleSelector};
 use serde::de::Error;
 use serde::{Deserialize, Deserializer, Serialize};
-use std::cmp::Ordering::{Greater, Less};
+use std::cmp::Ordering::{Equal, Greater, Less};
 use std::collections::{BTreeMap, HashSet};
 
 trait ExtractStyle {
     fn extract(&self) -> String;
 }
 
 #[derive(Debug, Hash, Eq, PartialEq, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
 pub struct StyleSheetProperty {
     pub class_name: String,
     pub property: String,
@@ -132,24 +133,20 @@ impl StyleSheet {
                     match (a.selector.is_some(), b.selector.is_some()) {
                         (true, false) => Greater,
                         (false, true) => Less,
-                        (true, true) => {
-                            if a.selector == b.selector {
-                                if a.property == b.property {
-                                    a.value.cmp(&b.value)
-                                } else {
-                                    a.property.cmp(&b.property)
-                                }
-                            } else {
-                                a.selector.cmp(&b.selector)
-                            }
-                        }
-                        (false, false) => {
-                            if a.property == b.property {
-                                a.value.cmp(&b.value)
-                            } else {
-                                a.property.cmp(&b.property)
-                            }
-                        }
+                        (true, true) => match a.selector.cmp(&b.selector) {
+                            Equal => match a.value.cmp(&b.value) {
+                                Equal => a.class_name.cmp(&b.class_name),
+                                val => val,
+                            },
+                            val => val,
+                        },
+                        (false, false) => match a.property.cmp(&b.property) {
+                            Equal => match a.value.cmp(&b.value) {
+                                Equal => a.class_name.cmp(&b.class_name),
+                                val => val,
+                            },
+                            prop => prop,
+                        },
                     }
                 } else {
                     b.basic.cmp(&a.basic)
@@ -348,7 +345,7 @@ mod tests {
             "properties": {
                 "0": [
                     {
-                        "class_name": "test",
+                        "className": "test",
                         "property": "mx",
                         "value": "40px",
                         "selector": null,
@@ -382,7 +379,7 @@ mod tests {
             "properties": {
                 "wrong": [
                     {
-                        "class_name": "test",
+                        "className": "test",
                         "property": "mx",
                         "value": "40px",
                         "selector": null,

libs/sheet/src/snapshots/sheet__tests__theme_selector.snap

@@ -2,4 +2,4 @@
 source: libs/sheet/src/lib.rs
 expression: sheet.create_css()
 ---
-":root[data-theme=dark] .test{margin-left:40px;margin-right:40px;}:root[data-theme=dark] .test{margin-top:40px;margin-bottom:40px;}:root[data-theme=light] .test{margin-left:50px;margin-right:50px;}"
+":root[data-theme=dark] .test{margin-top:40px;margin-bottom:40px;}:root[data-theme=dark] .test{margin-left:40px;margin-right:40px;}:root[data-theme=light] .test{margin-left:50px;margin-right:50px;}"