Selector specificity not working for !important rules

[arty-name]

When two selectors match the same element, and both have !important, then the selector specificity is ignored and the last rule wins:

inlineCss('<style>p a {color: red!important} a{color: black!important}</style>  <p><a>test', {url: '/'}).then(s=>console.log(s))
// '<p><a style="color: black;">test</a></p>'
inlineCss('<style>a{color: black!important} p a {color: red!important}</style>  <p><a>test', {url: '/'}).then(s=>console.log(s))
// '<p><a style="color: red;">test</a></p>'

However for the browsers it’s different. No matter which rule goes first, if both have !important in them, the more specific wins.

[jonkemp]

Not sure what the issue is here.

[arty-name]

The first example should also output color: red

[jonkemp]

Please be more general in what you think this module do in these cases.

[arty-name]

In general terms: while making styles inline inline-css should calculate selector specificity according to CSS specification, as browsers do. Currently it errs when two rules contain !important and match the same element. In that case inline-css thinks that the last rule should win. This is wrong: more specific rule should win.

[jonkemp]

What if they are equal?

[arty-name]

If they are equal in specificity, then the last rule indeed wins.

[jonkemp]

Ok, thanks for your feedback!

[bandrzejczak]

One more thing. Today I've found out, that source of style is also ignored with regards to important. For the following HTML:

<style>
p {
  color: red !important;
}
</style>
<p style="color: blue !important">test</p>

the output will be:

<p style="color: red !important">test</p>

while it should be:

<p style="color: blue !important">test</p>