Add specs for modern @extend in :is()/:has()/:where()
#2085
Conversation
Goodwine
left a comment
Goodwine
left a comment
There was a problem hiding this comment.
Only one actionable comment, the rest is me trying to understand how @extend works lol. I... think I got it now(?)
There was a problem hiding this comment.
Should the file name be in a directory named in_has? (same for in_where)
There was a problem hiding this comment.
Or maybe the directory could be called modern_pseudo?
There was a problem hiding this comment.
I like modern_pseudo, good idea.
There was a problem hiding this comment.
I'm kind of annoyed that github shows the README after partial_no_op lol
| :is(.a .b) {x: y} | ||
| .b.c {@extend .b} |
There was a problem hiding this comment.
I'm struggling to understand @extend in general 🤣 , can you let me know if this this accurate?
Is it fair to say that, assuming this was a modern browser, the extension is equivalent to replacing .original with :is(.original, .extension)?
There was a problem hiding this comment.
That's the intention, modulo some details regarding specificity, yes.
| <===> | ||
| ================================================================================ | ||
| <===> multiple_options/is/nested/trimmable/input.scss | ||
| :is(:is(.a), .b.c) {x: y} |
There was a problem hiding this comment.
Would :is(.a, .b.c) cause a different result?
If so, my rough understanding is that this would become something like...
:is(:is(.a.d, .a.e), .b.c) Which I guess is equivalent to :is(.a.d, .a.e, .b.c), and if specificity is the same regardless it gets compressed to :is(.a, .b.c), no?
If yes, why is the nested :is() necessary? is it just to test testing? or is it because the behavior is different than if .a wasn't in a nested :is()?
There was a problem hiding this comment.
You're correct except in that the untrimmed generated selector is :is(:is(.a, .a.d, .a.e), .b.c)—the original selector is always retained.
The nested :is() here is to verify that the trimming process will optimize it away. It is semantically equivalent to just including the raw selector.
| } | ||
|
|
||
| <===> multiple_recursive/output.css | ||
| :is(.a :is(.b, .a.mod5, .a.mod6, .mod3.a, .mod4.a, .mod1.a, .mod2.a)) { |
There was a problem hiding this comment.
I can't imagine how complex this extension gets before it's simplified lol. (assuming it gets extended first, and then simplified)
There was a problem hiding this comment.
It's not as bad as the version that doesn't use :is(), I'll tell you that much :).
See sass/dart-sass#2645
[skip dart-sass]