`!important` does not take precedence over non-important declaration later in inline style

[mganss]

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version of AngleSharp.Css?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository? (there are multiple AngleSharp libraries, e.g., AngleSharp.Xml for Xml support)
• Did you perform a search in the issues?

Description

In an inline style where a non-important declaration for the same property comes later that an important one, the non-important takes precedence, although the important one should take precedence.

Originally reported as mganss/HtmlSanitizer#587
Possibly related: #184

Steps to Reproduce

const string html = """
    <p style="padding: 20px !important; font-size: 20px; padding: 0;">Test</p>
    """;
var parser = new HtmlParser(new HtmlParserOptions { IsScripting = true }, BrowsingContext.New(Configuration.Default.WithCss(new CssParserOptions())));
var dom = parser.ParseDocument(html);
var p = dom.QuerySelector("p") as IHtmlParagraphElement;
var style = p.GetStyle().CssText; // -> "padding: 0; font-size: 20px"

Expected Behavior

style is "padding: 20px !important; font-size: 20px"

Actual Behavior

style is "padding: 0; font-size: 20px"

Possible Solution / Known Workarounds

No response

[tiesont]

@mganss One thing I didn't test - are duplicate rules (ignoring the !important modifier) always reduced to a single rule? It's actually valid to have duplicates - the cascade means that the browser uses the last one it can understand. It seems like AngleSharp is currently reducing the properties to a single rule.

[mganss]

@tiesont AngleSharp.Css builds a CSSOM and applies the cascading rules. If you examine the CSSOM I think there can always just be one property value from the "winning" rule. Here's what it looks like in a browser:

let div = document.createElement("div");
div.innerHTML = '<p style="padding: 20px !important; font-size: 20px; padding: 0;">Test</p>';
let p = div.children[0];
p.style.cssText // -> 'font-size: 20px; padding: 20px !important;'

If you remove the !important it comes out as 'font-size: 20px; padding: 0px;'