Merging of rules with unprefixed pseudo-classes

[silverwind]

This is probably a bit of a corner case, but in advanced mode,

a{color: red}
div:fullscreen{color: red}

will get merged into

a,div:fullscreen{color:red}

The merged rule is considered invalid (because no browser supports unprefixed :fullscreen yet) and the a style ist dropped by browsers. I noticed that a :-moz-full-screen wasn't getting merged, so maybe that same treatment could be useful in this case too.

[silverwind]

As mentioned in the PR, there are a few more of these cases. Here's a script to test a browser for support:

var selectors = [
    ":active", ":checked", ":default", ":dir(ltr)", ":disabled", ":empty", ":enabled",
    ":first", ":first-child", ":first-of-type", ":fullscreen", ":focus", ":hover",
    ":indeterminate", ":in-range", ":invalid", ":lang(en)", ":last-child",
    ":last-of-type", ":left", ":link", ":not(.class)", ":nth-child(1)",
    ":nth-last-child(1)", ":nth-last-of-type(1)", ":nth-of-type(1)", ":only-child",
    ":only-of-type", ":optional", ":out-of-range", ":read-only", ":read-write",
    ":required", ":right", ":root", ":scope", ":target", ":valid", ":visited"
]

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

selectors.forEach(function (selector) {
    var valid = true;
    try {
        style.sheet.insertRule(selector + "{color:red}", 0);
    } catch (err) {
        valid = false;
    }
    console.log(selector + " " + (valid ? "yes" : "no"));
});

[silverwind]

Ran the script on Firefox, Chrome and Safari:

          Firefox Chrome Safari
:dir(ltr)     no      no     no
:first        no      no     no
:fullscreen   no      no     no
:left         no      no     no
:read-only    no     yes    yes
:read-write   no     yes    yes
:right        no      no     no

So I think I'd have to add all these to the regexp. Should I go ahead?

[jakubpawlowicz]

Just did the same. :-) Please add all from the list in a separate commit. Well done! 💯