Duplicate css rule with !important is sanitized

[prostakov]

I am having this one speciifc problem of duplicate css rules being sanitized.

Example 1:

var sanitizer = new HtmlSanitizer(new HtmlSanitizerOptions
{
    AllowedTags = new HashSet<string> { "style" },
    AllowedAtRules = new HashSet<CssRuleType> { CssRuleType.Style },
    AllowedCssProperties = new HashSet<string> { "font-size", "padding", "padding-bottom", "padding-left", "padding-right", "padding-top" }
});

const string input =
    """
    <style>
        .someClass {
            padding: 20px !important;
            font-size: 20px;
            padding: 0;
        }
    </style>
    """;

var output = sanitizer.Sanitize(input);

The output is:

<style>.someClass { padding: 0; font-size: 20px }</style>

---

Example 2:

var sanitizer = new HtmlSanitizer(new HtmlSanitizerOptions
{
    AllowedTags = new HashSet<string> { "p" },
    AllowedAttributes = new HashSet<string> { "style" },
    AllowedAtRules = new HashSet<CssRuleType> { CssRuleType.Style },
    AllowedCssProperties = new HashSet<string> { "font-size", "padding", "padding-bottom", "padding-left", "padding-right", "padding-top" }
});

const string input =
    """
    <p style="padding: 20px !important; font-size: 20px; padding: 0;">Test</p>
    """;

var output = sanitizer.Sanitize(input);

The output is:

<p style="padding: 0; font-size: 20px">Test</p>

---

In both cases we sanitize the first padding, even though it is marked as !important.

If it hadn't been sanitized - on the actual render the rule would've take precedence, because it's marked as !important.

I am wondering is there maybe a setting to not remove the duplicates on sanitize.

Or maybe there is some config that I have missed?

[tiesont]

This is probably an issue to raise/investigate at the AngleSharp.Css repo - AngleSharp handles all of the markup and CSS parsing for HtmlSanitizer.

To be fair, browser behavior is that the last rule declared wins (for duplicated rules), AFAIK - would be interested in seeing what, say, Chrome and Firefox do when processing the same ruleset.

---

So, yes, the !important should take precedence (and the duplicates should be left as-is). Not sure why AngleSharp is removing it. Curious as to whether moving the duplicate rules together changes anything?

Simple jsFiddle to demonstrate browser behavior: https://jsfiddle.net/Loz6543a/

[mganss]

@tiesont is right, this is an issue in AngleSharp.Css. I have reported here: https://github.com/AngleSharp/AngleSharp.Css/issues/193