fix: Ignoring selectors' specificity when applying declarations from different qualified rules

Ref: #148

Author: Stranger6667

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Ignoring selectors' specificity when applying declarations from different qualified rules. [#148](https://github.com/Stranger6667/css-inline/issues/148)
+
 ## [0.8.2] - 2022-07-21
 
 ### Added

bindings/python/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Ignoring selectors' specificity when applying declarations from different qualified rules. [#148](https://github.com/Stranger6667/css-inline/issues/148)
+
 ### Changed
 
 - Update `PyO3` to `0.17.1`.

bindings/wasm/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Ignoring selectors' specificity when applying declarations from different qualified rules. [#148](https://github.com/Stranger6667/css-inline/issues/148)
+
 ### Changed
 
 - Unpin `parking_lot_core`.

css-inline/src/lib.rs

@@ -306,10 +306,12 @@ impl<'a> CSSInliner<'a> {
                     *existing_style = merge_styles(existing_style, &styles)?;
                 } else {
                     let mut final_styles = String::with_capacity(128);
+                    let mut styles = styles.iter().collect::<Vec<_>>();
+                    styles.sort_unstable_by(|(_, (a, _)), (_, (b, _))| a.cmp(b));
                     for (name, (_, value)) in styles {
                         final_styles.push_str(name.as_str());
                         final_styles.push(':');
-                        replace_double_quotes!(final_styles, name, &value);
+                        replace_double_quotes!(final_styles, name, value);
                         final_styles.push(';');
                     }
                     attributes.insert("style", final_styles);
@@ -399,6 +401,8 @@ fn process_css(
                     let element_styles = styles
                         .entry(&**matching_element.as_node())
                         .or_insert_with(|| IndexMap::with_capacity(8));
+                    // Iterate over pairs of property name & value
+                    // Example: `padding`, `0`
                     for (name, value) in &declarations {
                         match element_styles.entry(name.to_string()) {
                             indexmap::map::Entry::Occupied(mut entry) => {
@@ -476,6 +480,8 @@ fn merge_styles(
         // This property won't be taken from new styles unless it's !important
         buffer.push(name.to_string());
     }
+    let mut new_styles = new_styles.iter().collect::<Vec<_>>();
+    new_styles.sort_unstable_by(|(_, (a, _)), (_, (b, _))| a.cmp(b));
     for (property, (_, value)) in new_styles {
         match (
             value.strip_suffix("!important"),

css-inline/tests/test_inlining.rs

@@ -21,7 +21,7 @@ p.footer { font-size: 1px}"#,
 }
 
 #[test]
-fn maintain_rules_order() {
+fn specificity_same_selector() {
     assert_inlined!(
         style = r#"
 .test-class {
@@ -35,6 +35,28 @@ fn maintain_rules_order() {
     )
 }
 
+#[test]
+fn specificity_different_selectors() {
+    assert_inlined!(
+        style = r#"
+.test { padding-left: 16px; }
+h1 { padding: 0; }"#,
+        body = r#"<h1 class="test"></h1>"#,
+        expected = r#"<h1 class="test" style="padding: 0;padding-left: 16px;"></h1>"#
+    )
+}
+
+#[test]
+fn specificity_different_selectors_existing_style() {
+    assert_inlined!(
+        style = r#"
+.test { padding-left: 16px; }
+h1 { padding: 0; }"#,
+        body = r#"<h1 class="test" style="color: blue;"></h1>"#,
+        expected = r#"<h1 class="test" style="color: blue;padding: 0;padding-left: 16px"></h1>"#
+    )
+}
+
 #[test]
 fn overlap_styles() {
     // When two selectors match the same element