Re: [csswg-drafts] [css-nesting-1] CSSOM for nested media query rules (#7850)

The CSS Working Group just discussed `[css-nesting-1] CSSOM for nested media query rules`, and agreed to the following:

* `RESOLVED: If naked property declarations inside @media become a thing, they are wrapped in a & {} rule.`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> TabAtkins: last discussed in January<br>
&lt;fantasai> ... basic question was, given that we allow nesting @media rule, and then you can put naked declarations inside, how do we expose that in the OM?<br>
&lt;fantasai> ... currently CSSMediaRule only exposes child rules<br>
&lt;fantasai> TabAtkins: The current proposal is if you have naked properties, they are effectively wrapped in a nested style rule with the &amp; selector<br>
&lt;fantasai> ... and are exposed that way<br>
&lt;fantasai> ... This rule is the first rule in @media's child rules<br>
&lt;fantasai> ... and only exists if it needs to<br>
&lt;fantasai> TabAtkins: there were two further suggestions<br>
&lt;fantasai> ... one was to add .style accessor that roots to this first style rule<br>
&lt;fantasai> ... and/or to change parsing of all nested rules to wrap in &amp;  {} as well<br>
&lt;fantasai> TabAtkins: there was mild opposition to both ideas, but ran out of time<br>
&lt;fantasai> ... some concern about adding more rules to large stylesheet<br>
&lt;fantasai> TabAtkins: suggestion that all nested @rules that accept style rules usually, wrap in &amp; {}<br>
&lt;fantasai> astearns: we could do things later?<br>
&lt;fantasai> TabAtkins: we couldn't do the second thing, but adding .style is still possible in the future<br>
&lt;fantasai> plinss: Some concern with ability to put raw declarations inside an @media rule that's nested<br>
&lt;fantasai> ... because we get yet another situation where you can mix declarations and rules, but defaulting differently<br>
&lt;fantasai> TabAtkins: ...<br>
&lt;fantasai> plinss: @media contains rules, so it's in rule error recovery<br>
&lt;fantasai> ... if you have stuff in side ...<br>
&lt;fantasai> TabAtkins: using same error recovery in all places<br>
&lt;fantasai> ... parser will fail rule parsing if it encounters ; before the block<br>
&lt;fantasai> ... today if trying to parse a rule, it will encounter the ;, stop there, throw it out, and then start parsing fresh<br>
&lt;fantasai> TabAtkins: semicolons have never been valid in the front of rules before, no expectation that this would break anything<br>
&lt;fantasai> plinss: if we have declaration top-level with braces, then something that follows braces?<br>
&lt;fantasai> TabAtkins: generally fine, some restrictions that we want to obey for future compatibility concerns, but very minor<br>
&lt;fantasai> ... part of larger issue<br>
&lt;fantasai> ... same effect here as anywhere else<br>
&lt;fantasai> ... won't affect current stuff, because nothing looks like that today<br>
&lt;fantasai> ... and in the future, you'll have the same set of restrictions everywhere, which are extremely minimal<br>
&lt;fantasai> ... but that's the larger parsing issue, same issue; only concern here is whether existing @media would be parsed differently, and I think the answer is "no in practice"<br>
&lt;fantasai> plinss: I accept it's part of the other issue<br>
&lt;fantasai> ... also concerned about older browsers parsing new content<br>
&lt;fantasai> TabAtkins: if you do nesting in an older browser, things will be very screwed up, misparsing is the least of your concerns<br>
&lt;fantasai> astearns: in the interest of moving forward, perhaps we can resovle to wrap things in an implicit &amp; rule if we allow naked declarations inside an @media rule<br>
&lt;fantasai> plinss: I'm ok with that. I'm concerned about requiring &amp;{} wrapping, ok if OM is same either way<br>
&lt;fantasai> RESOLVED: If naked property declarations inside @media become a thing, they are wrapped in a &amp; {} rule.<br>
&lt;fantasai> emilio: Is this anonymous rule well-defined? it's at the beginning?<br>
&lt;fantasai> TabAtkins: details in the issue, always at the beginning if it's needed<br>
&lt;fantasai> plinss: If mix of declarations and rules, all the declarations sort to the beginning?<br>
&lt;fantasai> TabAtkins: yes<br>
&lt;fantasai> matthieudubet: if they actually write &amp; { ... } explicitly, do we group with that?<br>
&lt;fantasai> TabAtkins: no<br>
&lt;fantasai> TabAtkins: if they explicitly write a rule, that's their rule, we don't do anything magic with that<br>
&lt;fantasai> matthieudubet: OK, that's not what Safari Tech Preview is doing right now<br>
&lt;fantasai> ... it tries to show the smallest representation with the same semantics<br>
&lt;fantasai> ... so it removes it<br>
&lt;heycam> @media (...) { &amp; { color: red; } color: green; } /* element would be red */ ?<br>
&lt;fantasai> TabAtkins: This isn't in the spec yet, so it's not tested yet, so Safari will discover if it's doing the wrong thing<br>
&lt;fantasai> emilio: You can't just merge them because the order matters<br>
&lt;fantasai> heycam: So just want to clarify that all the bare declarations get hoisted to the top of the rule<br>
&lt;fantasai> ... so it might be a little confusing, about the order they'll applied<br>
&lt;fantasai> TabAtkins: it's the same behavior you get in ordinary nested style rules, though<br>
&lt;fantasai> ... all your naked declarations are sorted before all of the style rules<br>
&lt;fantasai> fremy: we resolved that we would be consistent, and maybe discuss what to do (but nobody filed an issue about that)<br>
&lt;fantasai> fremy: I think it's weird that they move, but should be consistent<br>
&lt;fantasai> plinss: if I have a bare red and then two wrapped blue, and then bare green, I expect it to be green and it will be blue<br>
&lt;fantasai> fremy: we discussed in the past, if we agree, we should file an issue about that<br>
&lt;fantasai> TabAtkins: this is a minor issue for compat purposes, so we can adjust this<br>
&lt;fantasai> TabAtkins: I think the answer is, don't put naked things after rules; but no reason to ban them<br>
&lt;fantasai> ... either way it's confusing<br>
&lt;fantasai> ... but I don't care which way we go<br>
&lt;fantasai> ... but aside from that, that would be a separate issue, I think we're done with this issue<br>
&lt;fantasai> astearns: resolution makes us consistent for the moment, but we can look at general issue on what to do with general declarations<br>
&lt;fantasai> ACTION: fremy or plinss to file issue about whether naked declarations get sorted to the top of the list or not<br>
</details>


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


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

Received on Wednesday, 5 April 2023 16:35:54 UTC