Extending inner of :has or :not can lead to invalid css

[mgreter]

Closely related to #2054

With the "support" of extending wrapped selectors, we opened a lot of previousely "unreachable" issues. I was pretty aware that these would surface at some point since I know from the ruby code that there are a few special rules regarding wrapped selectors. Probably the most prominent (not sure if there are even others) are :not and :has.

#2052 should fix the most urgent issues, but will not fix this one here:

:has(.thing) {
    color: red;
}
:has(.thing[disabled]) {
    @extend .thing;
    background: blue;
}

Should produce

:has(.thing, :has(.thing[disabled])) {
  color: red; }
:has(.thing[disabled], [disabled]:has(.thing[disabled])) {
  background: blue; }

Note that this is very different from what :not would produce.

Spec sass/sass-spec#915

[mgreter]

@chriseppstein @xzyfer I guess there are a few todo specs for this already in sass-spec, but probably not for very complex cases. To implement this properly (which will not be easy) we pretty sure need a more complete test set, containing tests as the following:

:not(.thing) {
    color: red;
}
:not(.thing[disabled]) {
    @extend .thing;
    background: blue;
}
:has(:not(.thing[disabled])) {
    @extend .thing;
    background: blue;
}

At the moment it is very easy to trip off libsass with anything beside the most basic cases with wrapped selectors. This may even warrant a rewrite of extend, as it currently does not fit the rest of the libsass code base (implementation is a one to one conversion from ruby sass code)

[chriseppstein]

implementation is a one to one conversion from ruby sass code

If it's a 1-1 impl why is it hard to trip it up? Maybe we've been fixing bugs since then and the specs haven't caught up. If you can tell me when the port was done, I can try to write specs for changes to the extend algorithm since that point.

[mgreter]

Additional examples

• Invalid :not selector generated with @extend #2139
• Output of @extend and :not() selector are wrong dlmanning/gulp-sass#583

[kenjiqq]

If your project is using a lot of pseudo selectors with common classes like :not(.btn) be careful about extending these classes. One extend of a common button class in our project cased the generated css to go from 1.1M to 2.1M with a lot of invalid css.

[mgreter]

Closing this since extend has been back-ported from dart sass.
Please create new issues in case anything in this regard is still failing.