The CSS nesting converter fails to group selectors that share a common ancestor if the rules are separated by one or more empty lines. The expected behavior is to merge the common ancestor (.a) regardless of the whitespace between the child rules.
.a .b { color: red; }
.a .c { color: red; }- | .a .b { color: red; }
- |
- | .a .c { color: red; }+ | .a {
+ | .b {
+ | color: red;
+ | }
+ |
+ | .c {
+ | color: red;
+ | }
+ | }The logic in scripts/nesting.js likely iterates through the CSS rules sequentially and compares the current rule's selector with the immediately preceding rule to check for common prefixes. The presence of an empty line (newline character) breaks this chain of adjacency. The parser treats the empty line as a delimiter that resets the "current parent" context, causing the second rule to be treated as a new, standalone entry rather than a sibling of the previous rule.
- Skip Whitespace: Modify the iteration logic in
scripts/nesting.jsto look back at the last valid rule, skipping over empty lines or whitespace-only strings, when determining if the current rule shares a parent with the previous one.
...
.a, .b {
color: red;
}
.a .c, .b .c, .d {
color: blue;
}- | .a, .b {
- | color: red;
- | }
- |
- | .a .c, .b .c, .d {
- | color: blue;
- | }+ | .a, .b {
+ | color: red;
+ |
+ | .c {
+ | color: blue;
+ | }
+ | }
+ |
+ | .d {
+ | color: blue;
+ | }...
...