Repository navigation
[cssom] Serialization of nested grouping rules is all weird #5494
Description
https://drafts.csswg.org/cssom/#serialize-a-css-rule includes "separated by a newline and indented by two spaces" in some rules like CSSMediaRule is a bit weird.
Take this example (link):
<!DOCTYPE html>
<style>
@media screen { @media screen { div { color: red } } }
@supports (display: grid) { @supports (display: grid) { foo { color: green } }
</style>
<script>
console.log(document.styleSheets[0].cssRules[0].cssText);
console.log(document.styleSheets[0].cssRules[1].cssText);
</script>All browsers show the following on the console:
@media screen {
@media screen {
div { color: red; }
}
}
@supports (display: grid) {
@supports (display: grid) {
foo { color: green; }
}
}
Which is pretty odd. It is very simple because that means that the serialization for a rule doesn't have to be stateful, but the result just sucks...
My question is, should we fix this? And assuming the answer is yes, should we fix this by properly indenting things, or by removing the indentation altogether?
Activity
tabatkins commentedon Sep 4, 2020
I was cleaning out my browser tabs, and was about to start working on #4828 which this is kinda a dupe of. Luckily, we already have a resolution for it - unless browser compat requires otherwise, serialize without newlines or indentation.
tabatkins commentedon Sep 4, 2020
Ah, now I've gone slightly further back in my email and see that you commented on that thread yesterday. ^_^
I think we should either remove the indentation or do it right; this half-assed indentation is horrid and nonsensical.