fix: preserve !important when merging styles onto elements with existing inline styles

Two bugs in `merge_styles` caused `!important` flags to be lost during
CSS inlining when the target element already had an inline `style`
attribute:

1. Separator mismatch with minify_css: The property lookup in the
   declarations buffer always used `": "` (STYLE_SEPARATOR), but when
   minify_css is enabled, buffered declarations use `":"` (STYLE_SEPARATOR_MIN).
   This caused the find to miss existing properties, leading to
   duplicated declarations and lost `!important` flags.

2. !important stripped unconditionally: The `strip_suffix("!important")`
   used internally to detect important rules was never re-appended to the
   output. Both the override path (Some, Some) and the new-property path
   (Some, None) wrote values without restoring the `!important` suffix.

Bug 1 affects only `minify_css: true`. Bug 2 affects all configurations.

This is particularly impactful for HTML email inlining where
`keep_style_tags: true` is used alongside rules like
`a[x-apple-data-detectors] { color: inherit !important }` that remain
in `<style>` tags — the missing `!important` on inlined button styles
allowed these reset rules to override intended button styling.

Author: jareddellitt

css-inline/src/html/serializer.rs

@@ -700,6 +700,11 @@ fn merge_styles<Wr: Write>(
     let current_declarations_count = parsed_declarations_count;
     // Next, we iterate over the new styles and merge them into our existing set
     // New rules will not override old ones unless they are marked as `!important`
+    let sep = if minify_css {
+        STYLE_SEPARATOR_MIN
+    } else {
+        STYLE_SEPARATOR
+    };
     for (property, _, value) in new_styles {
         match (
             value.trim_end().strip_suffix("!important"),
@@ -708,22 +713,22 @@ fn merge_styles<Wr: Write>(
                 .take(parsed_declarations_count)
                 .find(|style| {
                     style.starts_with(property.as_bytes())
-                        && style.get(property.len()..=property.len().saturating_add(1))
-                            == Some(STYLE_SEPARATOR)
+                        && style
+                            .get(property.len()..property.len().saturating_add(sep.len()))
+                            == Some(sep)
                 }),
         ) {
             // The new rule is `!important` and there's an existing rule with the same name
             // Only override if the existing inline rule is NOT `!important`.
             // Per CSS spec: inline `!important` takes precedence over stylesheet `!important`
             (Some(value), Some(buffer)) => {
                 if !buffer.ends_with(b"!important") {
-                    // We keep the rule name and the colon-space suffix - '<rule>: `
-                    buffer.truncate(property.len().saturating_add(STYLE_SEPARATOR.len()));
+                    buffer.truncate(property.len().saturating_add(sep.len()));
                     write_declaration_value(buffer, value)?;
+                    buffer.extend_from_slice(b" !important");
                 }
             }
             // There's no existing rule with the same name, but the new rule is `!important`
-            // In this case, we add the new rule with the `!important` suffix removed
             (Some(value), None) => {
                 push_or_update!(
                     declarations_buffer,
@@ -732,6 +737,13 @@ fn merge_styles<Wr: Write>(
                     value,
                     minify_css
                 );
+                // `push_or_update!` increments `parsed_declarations_count`, so subtract 1
+                // to get the slot that was just written and append the `!important` suffix.
+                if let Some(buf) = declarations_buffer
+                    .get_mut(parsed_declarations_count.saturating_sub(1))
+                {
+                    buf.extend_from_slice(b" !important");
+                }
             }
             // There's no existing rule with the same name, and the new rule is not `!important`
             // In this case, we just add the new rule as-is

css-inline/tests/test_inlining.rs

@@ -242,7 +242,7 @@ fn important() {
     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>"#
+        expected = r#"<h1 style="color: blue !important">Big Text</h1>"#
     )
 }
 
@@ -251,17 +251,17 @@ fn important_with_space_at_the_end() {
     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>"#
+        expected = r#"<h1 style="color: blue !important">Big Text</h1>"#
     )
 }
 
 #[test]
 fn important_no_rule_exists() {
-    // `!important` rules should override existing inline styles
+    // `!important` rules should be added with the flag preserved
     assert_inlined!(
         style = "h1 { color: blue !important; }",
         body = r#"<h1 style="margin:0">Big Text</h1>"#,
-        expected = r#"<h1 style="color: blue;margin: 0">Big Text</h1>"#
+        expected = r#"<h1 style="color: blue !important;margin: 0">Big Text</h1>"#
     )
 }
 
@@ -303,6 +303,74 @@ fn important_inline_wins_over_stylesheet_important() {
     );
 }
 
+#[test]
+fn important_override_with_minify_css() {
+    // With minify_css enabled, `!important` should still be preserved when overriding inline styles.
+    // Regression: the property lookup used ": " (non-minified separator) even when styles were
+    // stored with ":" (minified), causing duplicated properties and lost `!important` flags.
+    let inliner = CSSInliner::options().minify_css(true).build();
+    let html = r#"<html><head><style>h1 { color: blue !important; }</style></head><body><h1 style="color: red;">Big Text</h1></body></html>"#;
+    let result = inliner.inline(html).unwrap();
+    assert!(
+        result.contains("style=\"color:blue !important\""),
+        "Expected `color:blue !important` with minified separator. Got: {}",
+        result
+    );
+    assert_eq!(
+        result.matches("color").count(),
+        1,
+        "Property should not be duplicated. Got: {}",
+        result
+    );
+}
+
+#[test]
+fn important_no_rule_exists_with_minify_css() {
+    // With minify_css enabled, `!important` should be preserved when adding new rules
+    let inliner = CSSInliner::options().minify_css(true).build();
+    let html = r#"<html><head><style>h1 { color: blue !important; }</style></head><body><h1 style="margin:0">Big Text</h1></body></html>"#;
+    let result = inliner.inline(html).unwrap();
+    assert!(
+        result.contains("color:blue !important"),
+        "Expected `color:blue !important`. Got: {}",
+        result
+    );
+    assert!(
+        result.contains("margin:0"),
+        "Existing margin should be preserved. Got: {}",
+        result
+    );
+}
+
+#[test]
+fn important_multiple_properties_with_existing_inline() {
+    // Multiple `!important` properties from a stylesheet should all be preserved when merging
+    // with an element that has existing inline styles
+    let inliner = CSSInliner::options().build();
+    let html = r##"<html><head><style>.btn a { display: inline-block !important; padding: 12px 20px !important; text-decoration: none !important; }</style></head><body><div class="btn"><a href="#" style="display: block; color: #fff;">Click</a></div></body></html>"##;
+    let result = inliner.inline(html).unwrap();
+    assert!(
+        result.contains("display: inline-block !important"),
+        "display should have !important. Got: {}",
+        result
+    );
+    assert!(
+        result.contains("padding: 12px 20px !important"),
+        "padding should have !important. Got: {}",
+        result
+    );
+    assert!(
+        result.contains("text-decoration: none !important"),
+        "text-decoration should have !important. Got: {}",
+        result
+    );
+    assert!(
+        result.contains("color: #fff"),
+        "Existing color should be preserved. Got: {}",
+        result
+    );
+}
+
 #[test]
 fn font_family_quoted() {
     // When property value contains double quotes
@@ -332,7 +400,7 @@ fn font_family_quoted_with_inline_style_override() {
         style = r#"h1 { font-family: "Open Sans", sans-serif !important; }"#,
         body = r#"<h1 style="font-family: Helvetica; whitespace: nowrap">Hello world!</h1>"#,
         // Then it should be replaced with single quotes
-        expected = r#"<h1 style="font-family: 'Open Sans', sans-serif;whitespace: nowrap">Hello world!</h1>"#
+        expected = r#"<h1 style="font-family: 'Open Sans', sans-serif !important;whitespace: nowrap">Hello world!</h1>"#
     )
 }