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

In implementing this, I realized that we actually don't have any way of serializing conditional group rules that contain declarations at all. So I wrote up a spec that's intentionally very similar to the spec for serializing style rules with nested rules, and it's what I implemented in Blink. The example is for `@media`, but by replacing steps 1–2, we specs for `@supports` and so on.

Note that the current spec specifies that an empty div rule should serialize as `div { }`, but an empty `@media` rule should serialize as `@media screen {\n}`. I've kept this as-is, so that existing serialization doesn't change.

1. Let s initially be the string `"@media"`, followed by a single SPACE (U+0020).
2. Append the result of performing serialize a media query list on rule’s media query list to s. 
3. Append a single SPACE (U+0020) to s, followed by the string "{", i.e., LEFT CURLY BRACKET (U+007B).
4. If there is at least one rule in the rule's cssRules list, and the first rule is a CSSStyleRule with a single selector that would serialize to exactly “&”, and that rule has no children:
4.1. Let decls be the result of performing serialize a CSS declaration block on the first rule’s associated declarations.
4.2. Let rules be the result of performing serialize a CSS rule on each rule in the rule’s cssRules list except the first, or null if there are no such rules.
4.3. If rules is null:
4.3.1. Append a single SPACE (U+0020) to s.
4.3.2. Append decls to s.
4.3.3. Append " }" to s (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)).
4.3.4. Return s.
4.4. Otherwise:
4.4.1. Prepend decls to rules.
4.4.2. For each rule in rules:
  4.4.2.1. Append a newline followed by two spaces to s.
  4.4.2.2. Append rule to s.
4.4.3. Append a newline followed by RIGHT CURLY BRACKET (U+007D) to s.
4.4.4. Return s.
5. Otherwise:
5.1. Append a newline to s.
5.2. Append the result of performing serialize a CSS rule on each rule in the rule’s cssRules list to s, separated by a newline and indented by two spaces.
5.3. Append a newline to s, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)

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


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

Received on Monday, 24 October 2022 11:18:27 UTC