Re: [csswg-drafts] [css-nesting] support nesting at-rules (#2891)

Now that the css-nesting spec draft is listed on the w3c site, here's the updated URL for Ameila’s CSSOM comment above: https://drafts.csswg.org/css-nesting-1/#cssom

> The thing that is different about nested @-rules is that the interior content of the rule changes. Instead of having full style rules with selectors inside the media query, we would only expect property declarations, because the selector would come from the outer context.

Excellent point! I've been pondering this problem for several days since I read your comment.

[Section 3 of the conditional spec](https://drafts.csswg.org/css-conditional-3/#contents-of) is the part of the spec covering what goes in @-rules:
> All conditional rules are defined to take a `<stylesheet>` in their block, which means they can accept any rule that is normally allowed at the top-level of a stylesheet, and not otherwise restricted.

I think we can actually leave this part of the spec unchanged if we instead alter section 2 and section 4.

In [section 2 of the conditional spec](https://drafts.csswg.org/css-conditional-3/#processing), we would add something like this:

> A conditional group rule can also be nested inside a CSS rule. When this occurs, the entire contents of the conditional group will be treated as if it were wrapped with `@nest & { <contents> }`.
>
> Example 3
> For example, with this nested rule:
> ```css
>#navigation {
>  display: block;
>
>  @media print {
>    display: none;
>  }
>}
>```
> the contents of the `@media` rule would be treated as if the author had written:
> ```css
>#navigation {
>  display: block;
>
>  @media print {
>    @nest & {
>      display: none;
>    }
>  }
>}
>```
> which is equivalent to:
> ```css
>#navigation {
>  display: block;
>}
>@media print {
>  #navigation {
>    display: none;
>  }
>}
>```

We would also need to change [section 4 of the conditional spec](https://drafts.csswg.org/css-conditional-3/#use) from:
> Conditional group rules are allowed at the top-level of a style sheet, and inside other conditional group rules.

to:
> Conditional group rules are allowed at the top-level of a style sheet, inside other conditional group rules, and inside the declaration block of a rule.

This still leaves a mismatch between `@nest` contents which are [defined as `<declaration-list>`](https://drafts.csswg.org/css-nesting-1/#at-nest) and `@media` and `@supports` contents which are [defined as `<stylesheet>`](https://drafts.csswg.org/css-conditional-3/#at-media). (See https://drafts.csswg.org/css-syntax-3/#declaration-rule-list for those definitions.) Does this mean we need to redefine `@nest`’s contents in the nesting spec to also be `<stylesheet>`? I'm unsure.

>  Or do we keep them as CSSGroupingRules, but then make the group contents a read-only copy of the outer selector?

It sounds like my verbose solution above is the same as what you are suggesting as a solution in CSSOM. Yes, we keep them as `CSSConditionRule` and the `cssRules` property would include a single `CSSStyleRule` where the `selectorText` is `@nest &` and the `style` is the `<stylesheet>` contents of the @-rule. Well… approximately that. The exact details would need more fleshing out.

I should point out I only just started playing with CSSOM today using [this codepen I made](https://codepen.io/johnalbin/pen/zbepJw) based on this [MDN article on modifying a stylesheet rule with CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information). However, the hands-on experience made it much easier to understand the CSSOM than by just reading; I recommend it for other new-to-CSSOM people.

-- 
GitHub Notification of comment by JohnAlbin
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2891#issuecomment-475946427 using your GitHub account

Received on Sunday, 24 March 2019 10:32:47 UTC