Skip to content

[cssom] Make CSSStyleRule serialization aware of nesting. #6117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tabatkins merged 1 commit into from
May 10, 2021
Merged

[cssom] Make CSSStyleRule serialization aware of nesting. #6117

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions cssom-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1523,17 +1523,34 @@ To <dfn export>serialize a CSS rule</dfn>, perform one of the following in accor
<dl class="switch">
<dt>{{CSSStyleRule}}
<dd>
The result of concatenating the following:
Return the result of the following steps:

<ol>
<li>The result of performing <a>serialize a group of selectors</a> on the rule's associated selectors.
<li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
followed by a single SPACE (U+0020).
<li>The result of performing <a>serialize a CSS declaration block</a> on the rule's associated declarations.
<li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).
<li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).
<li>Let |s| initially be
the result of performing <a>serialize a group of selectors</a> on the rule's associated selectors,
followed by the string "<code> {</code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B).
<li>Let |decls| be the result of performing <a>serialize a CSS declaration block</a> on the rule's associated declarations, or null if there are no such declarations.
<li>Let |rules| be the result of performing [=serialize a CSS rule=] on each rule in the rule's {{CSSStyleRule/cssRules}} list, or null if there are no such rules.
<li>If |decls| and |rules| are both null, append " }" to |s| (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)) and return |s|.
<li>If |rules| is null:
<ol>
<li>Append a single SPACE (U+0020) to |s|
<li>Append |decls| to |s|
<li>Append " }" to |s| (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)).
<li>Return |s|.
</ol>
<li>Otherwise:
<ol>
<li>If |decls| is not null, prepend it to |rules|.
<li>For each |rule| in |rules|:
<ol>
<li>Append a newline followed by two spaces to |s|.

@emilio emilio Mar 19, 2021

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bit weird that we're doing this fake indentation thing. So for nested declarations this would look like:

Source:

a {
  b {
    c {
      color: red;
    }
  }
}

cssText:

a {
  b {
  c { color: red; } }
}

Which is a bit off. I think I'd rather avoid newlines completely, but not particularly opposed.

@tabatkins tabatkins Mar 19, 2021

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I absolutely agree that this is busted, I'm just copying the existing indentation treatment for the other rules in the spec; @media already shows off that exact same awful behavior, for instance.

I didn't want to try and fix the indentation for just this rule and leave the rest busted, so I stuck with the current behavior and assume that all of them can be fixed up at once in a separate commit.

@emilio emilio Mar 19, 2021

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me, thanks.

<li>Append |rule| to |s|.
</ol>
<li>Append a newline followed by RIGHT CURLY BRACKET (U+007D) to |s|.
<li>Return |s|.
</ol>


<dt>{{CSSImportRule}}
<dd>
The result of concatenating the following:
Expand Down