refactor: !important handling

Author: Stranger6667

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - New `http` & `file` features which give a way to disable resolving external stylesheets and reduce the compiled artifacts size.
 
+### Fixed
+
+- `!important` rules not overriding inlined styles. [#152](https://github.com/Stranger6667/css-inline/issues/152)
+
 ## [0.8.1] - 2022-04-01
 
 ### Fixed

bindings/python/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- `!important` rules not overriding inlined styles. [#152](https://github.com/Stranger6667/css-inline/issues/152)
+
 ## [0.8.2] - 2022-04-01
 
 ### Fixed

bindings/wasm/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixed
 
 - Not respecting specificity in case of inlining overlapping rules like `padding` and `padding-top`. [#142](https://github.com/Stranger6667/css-inline/issues/142)
+- `!important` rules not overriding inlined styles. [#152](https://github.com/Stranger6667/css-inline/issues/152)
 
 ## [0.8.0] - 2022-01-10
 

css-inline/src/lib.rs

@@ -470,28 +470,35 @@ fn merge_styles(
         let (name, value) = declaration?;
         let mut style = String::with_capacity(256);
         style.push_str(&name);
-        style.push(':');
-        replace_double_quotes!(style, name, value);
+        style.push_str(": ");
+        replace_double_quotes!(style, name, value.trim());
         final_styles.push(style);
         // This property won't be taken from new styles unless it's !important
         buffer.push(name.to_string());
     }
     for (property, (_, value)) in new_styles {
-        let index = buffer.iter().position(|r| r == property);
-        let is_important = value.ends_with("!important");
-        if index == None || is_important {
-            let mut style = String::with_capacity(256);
-            style.push_str(&property);
-            style.push(':');
-            replace_double_quotes!(style, property, value);
-            // Strip !important so additional styles with !important can override this
-            style = style.replace("!important", "");
-            style = style.trim().to_string();
-            if index != None {
-                final_styles[index.unwrap()] = style;
-            } else {
-                final_styles.push(style);
+        match (
+            value.strip_suffix("!important"),
+            buffer.iter().position(|r| r == property),
+        ) {
+            // The new rule is `!important` and there is already one in existing styles:
+            // override with the new one.
+            #[allow(clippy::integer_arithmetic)]
+            (Some(value), Some(index)) => {
+                // Reuse existing allocation
+                let target = &mut final_styles[index];
+                // Keep '<rule>: ` (with a space at the end)
+                // NOTE: There will be no overflow as the new len is always smaller than the old one
+                target.truncate(property.len() + 2);
+                // And push the value
+                target.push_str(value.trim())
             }
+            // No such rules exist - push the version with `!important` trimmed
+            (Some(value), None) => final_styles.push(format!("{}: {}", property, value.trim())),
+            // Completely new rule - write it
+            (None, None) => final_styles.push(format!("{}: {}", property, value.trim())),
+            // Rule exists and the new one is not `!important` - keep the original one
+            (None, Some(_)) => {}
         }
     }
     Ok(final_styles.join(";"))

css-inline/tests/test_inlining.rs

@@ -62,11 +62,11 @@ fn simple_merge() {
     // Then new styles should be merged with the existing ones
     let option_1 = html!(
         style,
-        r#"<h1 style="font-size: 1px;color:red;">Big Text</h1>"#
+        r#"<h1 style="font-size: 1px;color: red">Big Text</h1>"#
     );
     let option_2 = html!(
         style,
-        r#"<h1 style="color:red;font-size: 1px;">Big Text</h1>"#
+        r#"<h1 style="color: red;font-size: 1px">Big Text</h1>"#
     );
     let valid = (inlined == option_1) || (inlined == option_2);
     assert!(valid, "{}", inlined);
@@ -83,6 +83,16 @@ fn overloaded_styles() {
     )
 }
 
+#[test]
+fn important() {
+    // `!important` rules should override existing inline styles
+    assert_inlined!(
+        style = "h1 { color: blue !important; }",
+        body = r#"<h1 style="color: red;">Big Text</h1>"#,
+        expected = r#"<h1 style="color: blue">Big Text</h1>"#
+    )
+}
+
 #[test]
 fn font_family_quoted() {
     // When property value contains double quotes
@@ -102,7 +112,7 @@ fn existing_styles() {
         style = "h1 { color: red; }",
         body = r#"<h1 style="color: blue">Hello world!</h1>"#,
         // Then the existing rule should be preferred
-        expected = r#"<h1 style="color: blue;">Hello world!</h1>"#
+        expected = r#"<h1 style="color: blue">Hello world!</h1>"#
     )
 }
 
@@ -116,7 +126,7 @@ fn existing_styles_with_merge() {
         body = r#"<h1 style="color: blue">Hello world!</h1>"#,
         // Then the existing rule should be preferred
         // And the new style should be merged
-        expected = r#"<h1 style="color: blue;font-size:14px;">Hello world!</h1>"#
+        expected = r#"<h1 style="color: blue;font-size: 14px">Hello world!</h1>"#
     )
 }
 

css-inline/tests/test_selectors.rs

@@ -356,6 +356,6 @@ fn overwrite_comma() {
     assert_inlined!(
         style = r#"h1,h2,h3 {color: #000;}"#,
         body = r#"<h1 style="color: #fff">Foo</h1><h3 style="color: #fff">Foo</h3>"#,
-        expected = r#"<h1 style="color: #fff;">Foo</h1><h3 style="color: #fff;">Foo</h3>"#
+        expected = r#"<h1 style="color: #fff">Foo</h1><h3 style="color: #fff">Foo</h3>"#
     )
 }