fix: prioritize important styles

Author: tborg

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Prioritize `!important` rules when computing element styles. [#398](https://github.com/Stranger6667/css-inline/pull/398)
+
 ## [0.14.2] - 2024-11-11
 
 ### Changed

bindings/c/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Prioritize `!important` rules when computing element styles. [#398](https://github.com/Stranger6667/css-inline/pull/398)
+
 ## [0.14.2] - 2024-11-11
 
 ### Changed

bindings/javascript/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Prioritize `!important` rules when computing element styles. [#398](https://github.com/Stranger6667/css-inline/pull/398)
+
 ## [0.14.2] - 2024-11-11
 
 ### Changed

bindings/python/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Prioritize `!important` rules when computing element styles. [#398](https://github.com/Stranger6667/css-inline/pull/398)
+
 ## [0.14.2] - 2024-11-11
 
 ### Changed

bindings/ruby/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Prioritize `!important` rules when computing element styles. [#398](https://github.com/Stranger6667/css-inline/pull/398)
+
 ## [0.14.2] - 2024-11-11
 
 ### Changed

css-inline/src/lib.rs

@@ -459,8 +459,23 @@ impl<'a> CSSInliner<'a> {
                         for (name, value) in &declarations[*start..*end] {
                             match element_styles.entry(name.as_ref()) {
                                 indexmap::map::Entry::Occupied(mut entry) => {
-                                    if entry.get().0 <= specificity {
-                                        entry.insert((specificity, *value));
+                                    match (
+                                        value.contains("!important"),
+                                        entry.get().1.contains("!important"),
+                                    ) {
+                                        // Equal importance; the higher specificity wins.
+                                        (false, false) | (true, true) => {
+                                            if entry.get().0 <= specificity {
+                                                entry.insert((specificity, *value));
+                                            }
+                                        }
+                                        // Only the new value is important; it wins.
+                                        (true, false) => {
+                                            entry.insert((specificity, *value));
+                                        }
+                                        // The old value is important and the new one is not; keep
+                                        // the old value.
+                                        (false, true) => {}
                                     }
                                 }
                                 indexmap::map::Entry::Vacant(entry) => {

css-inline/tests/test_inlining.rs

@@ -256,6 +256,32 @@ fn important_no_rule_exists() {
     )
 }
 
+#[test]
+fn important_multiple_rules() {
+    // `!important` rules should override other rules with the same specificity.
+    assert_inlined!(
+        style = ".blue { color: blue !important; } .reset { color: unset }",
+        body = r#"<h1 class="blue reset">Big Text</h1>"#,
+        expected = r#"<h1 class="blue reset" style="color: blue !important;">Big Text</h1>"#
+    );
+    // check in both directions
+    assert_inlined!(
+        style = ".reset { color: unset } .blue { color: blue !important; }",
+        body = r#"<h1 class="blue reset">Big Text</h1>"#,
+        expected = r#"<h1 class="blue reset" style="color: blue !important;">Big Text</h1>"#
+    );
+}
+
+#[test]
+fn important_more_specific() {
+    // `!important` rules should override other important rules with less specificity.
+    assert_inlined!(
+        style = "h1 { color: unset !important } #title { color: blue !important; }",
+        body = r#"<h1 id="title">Big Text</h1>"#,
+        expected = r#"<h1 id="title" style="color: blue !important;">Big Text</h1>"#
+    );
+}
+
 #[test]
 fn font_family_quoted() {
     // When property value contains double quotes