Re: [csswg-drafts] [css-cascade] [css-nesting] Figure out whether we're fine with "shifting up" bare declarations after rules (#8738)

The CSS Working Group just discussed `[css-cascade] [css-nesting] Figure out whether we're fine with "shifting up" bare declarations after rules`.

<details><summary>The full IRC log of that discussion</summary>
&lt;bramus> TabAtkins: we got a resolution last week?<br>
&lt;bramus> lea: yeah, to solve the issue<br>
&lt;bramus> … not sure if this issue should be on the agenda, prolly the new one 9492<br>
&lt;bramus> Rossen_: Is that one ready? dont see agenda+<br>
&lt;bramus> … we can discuss sth else<br>
&lt;bramus> lea: orig issue was on the agenda because impls are shipping<br>
&lt;bramus> … changes should be sooner than later in that case<br>
&lt;bramus> … TabAtkins made point that authors dont hit it frequently<br>
&lt;bramus> … so maybe we have more time?<br>
&lt;bramus> … changing shipped behavior tends to be difficult though<br>
&lt;bramus> … the longer we wait, the more work to change it later<br>
&lt;bramus> TabAtkins: at the end of the OG issue, interaction with future planned things like mixins does mean we prolly dont want to shift<br>
&lt;bramus> … I do agree this is worth fixing and should be fine to fix relatively quickly for reasons lea explained<br>
&lt;bramus> … we should figure out secondary issue but happy to stick with last weeks resolution that they get wrapped instead of lifted<br>
&lt;bramus> Rossen_: remaining Q then is if we discuss the new issue now or not?<br>
&lt;bramus> lea: the discussion died down after a few days and TabAtkins said he would reject … would be nice to start discussing<br>
&lt;lea> q?<br>
&lt;lea> q+<br>
&lt;oriol> +1 to Tab<br>
&lt;bramus> TabAtkins: I explained why immediately in preceding comment. we cant treat selectors in ?? fashion based on how they were referefenced in nested selector. inconsistent and confusing.<br>
&lt;Rossen_> ack lea<br>
&lt;bramus> lea: the way the :is() flattens specificity (largest one) was most reasonable one but it is a wart. the less we expose authors to it, the better<br>
&lt;TabAtkins> `.foo, #bar { &amp; .baz {...} .baz &amp; {...} }` &lt;-- these two nested rules absolutely need to have the same specificity<br>
&lt;TabAtkins> And `.foo, #bar { &amp; {...}}` should have the same specificity as the above, minus one class.<br>
&lt;bramus> … i dont think there are any use cases that actually require flattending spcfcty<br>
&lt;bramus> … the less authors hit that, the better<br>
&lt;oriol> q+<br>
&lt;bramus> … similar to generating a math expression: not including () when you dont need to<br>
&lt;bramus> TabAtkins: yes, but the wart exists<br>
&lt;fantasai> But `.foo, #bar { &amp; { ... } }` should have the same specificity as `.foo, #bar { ... }` is the argument<br>
&lt;Rossen_> ack fantasai<br>
&lt;bramus> fantasai: I agree we should solve soon. the way specificity works with is(), definitely not expected behavior.<br>
&lt;bramus> … nesting should not cause selectors to get flattened<br>
&lt;bramus> … if you have a class and an id, they mathc based on what they match<br>
&lt;bramus> … as soon was you start nesting they get flattened … definitley not expected<br>
&lt;TabAtkins> (And note that it's absolutely too expensive to not flatten *in general*, this was well-established in previous Nesting discussion. It makes matching exponential-time.)<br>
&lt;bramus> … &amp; foo and foo &amp; should have same specficity<br>
&lt;lea> Indeed, even beyond shifting, the fact that `.foo, #foo { h1 { color: red } }` flattens specificity is *incredibly* confusing (and wouldn't be solved by not using `:is()` when not necessary)<br>
&lt;bramus> … .foo.bar and .foo, .bar ???<br>
&lt;fantasai> .foo, #bar { color: blue; @media print { background: yellow; } }<br>
&lt;lea> e.g. it's common to do things like `button, .button { &amp;:hover { } }`, now `button:hover` has the same specificity as `.button:hover`!<br>
&lt;lea> q?<br>
&lt;bramus> fantasai: these decls should have same specificity when the match, but they dont right now<br>
&lt;bramus> oriol: I agree with tab. idea of treating lone &amp; vs when used in bigger selector seems incosistent and confusing<br>
&lt;lea> q+<br>
&lt;bramus> … i am confused. the main probl is with pseudo-els which cant be matched by &amp;, but discussion seems to be shifting to specificity<br>
&lt;TabAtkins> I had a proposal for just `@nest { ...props here }` that is semantically identical to `&amp; {...}` but doesn't impose the restrictions.<br>
&lt;bramus> … i dont really see the flattening as a blocking thing<br>
&lt;bramus> … maybe i am missing something<br>
&lt;bramus> … seems necessary in complex cases of nesting<br>
&lt;bramus> … if you need to check all possible combinatorial expansion to know the specificity, then it seems problematic<br>
&lt;bramus> … main problem was with psuedo-els though. could be possible to have &amp; also match pseudo-els<br>
&lt;bramus> …which would fix this<br>
&lt;Rossen_> ack lea<br>
&lt;bramus> lea: I wrote an example ajust above, wher authors can trigger this<br>
&lt;bramus> … button and .button<br>
&lt;bramus> … headings and classes of headings<br>
&lt;bramus> … common to style element names with class names<br>
&lt;TabAtkins> (I would also be fine with defining `&amp;` can match pseudos, fwiw. That wouldn't solve the specificity flattening, tho, so I lean more towards a solution that does more, and leave `&amp;` consistent with `:is()`.)<br>
&lt;TabAtkins> q+<br>
&lt;bramus> … right now with the button example, the button:hover would hav especificiy of .button:hover<br>
&lt;bramus> … @nest would only solve the issue with internal rewriting<br>
&lt;bramus> … even proposed solution with ??? that would also not fix the issue<br>
&lt;bramus> … i disagree with myself from last week<br>
&lt;bramus> … we should solve root cause<br>
&lt;bramus> … one idea: we introduced :is() to avoid combo explosion.<br>
&lt;emilio> q+<br>
&lt;bramus> … what if instead of wrapping with :is() we do some smarter rewriting that retains specificiyt<br>
&lt;Rossen_> ack TabAtkins<br>
&lt;bramus> TabAtkins: unforutnately the specifiity issue is not fixable<br>
&lt;lea> q?<br>
&lt;lea> qq+ to reply to TabAtkins<br>
&lt;bramus> … it depends on the length of th eseleector list and number of levels<br>
&lt;bramus> … but, i think we can solve being able to put naked props<br>
&lt;bramus> … after rules or inside @media et al<br>
&lt;bramus> … that should be solved<br>
&lt;bramus> … its not great today<br>
&lt;bramus> … even more wrapping will make it worse<br>
&lt;bramus> … ?? is too expensive in general case<br>
&lt;bramus> … flattening specificity also<br>
&lt;bramus> … even if authors often produce the same specifity the wont always<br>
&lt;bramus> … so the general is still as expensive<br>
&lt;Rossen_> ack lea<br>
&lt;Zakim> lea, you wanted to react to TabAtkins to reply to TabAtkins<br>
&lt;bramus> lea: i was proposing to drop is()<br>
&lt;bramus> … what if we do some smarter rewriting, to retain specificity?<br>
&lt;bramus> … it would be very productive to have an eexample of combinatorial explosion<br>
&lt;bramus> TabAtkins: nothing is forcing authors<br>
&lt;bramus> … example is make a selector list of n selectors and nest it a few times<br>
&lt;bradk> Just a thought, but maybe flattening ‘button, .button’ into the same specificity as .button isn’t necessarily a bad thing.<br>
&lt;bramus> … problem becomes exponential to resolve inner property<br>
&lt;Rossen_> ack emilio<br>
&lt;bramus> emilio: another potential solution would be to make is specificity dynamic, but we resolved against that in the past<br>
&lt;bramus> … you would still need to match all selectors<br>
&lt;bramus> … seems very non-triviail … like make the parent selector behave as dynamic specificity<br>
&lt;lea> it does introduce a new dependency for calculating specificity, where it depends on the element matched<br>
&lt;TabAtkins> `a, .a, #a { a, .a, #a { a, .a, #a { ...}}}` &lt;- already 3^3 possible specificies<br>
&lt;bramus> … i seem to recall webkit implemented ?? but that also has a lot of problems<br>
&lt;emilio> s/??/:matches()/<br>
&lt;bramus> Rossen_: good discussion, and we are at time<br>
&lt;bramus> … lets end here and continue discussion in the issue<br>
&lt;bramus> … feel free to bring back next week when enough progress<br>
&lt;bramus> … enjoy the rest of your week<br>
&lt;bramus> topic-end<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8738#issuecomment-1779696636 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 October 2023 17:02:27 UTC