Implement CSS Nesting Module #94 by blutorange · Pull Request #123 · phax/ph-css

blutorange · 2026-04-03T17:24:22Z

Implements CSS Nesting Module, closes #94

I think I've now got to the point where this should be done, if nobody can find any bugs. What do you think?

Implements:

Nested style rules (.foo { .bar { } }) (https://drafts.csswg.org/css-nesting-1/#syntax)
Nested at-rules (.foo { @media print { } ) (https://drafts.csswg.org/css-nesting-1/#conditionals)
Nesting selector (.foo { &.bar { ... } }) (https://drafts.csswg.org/css-nesting-1/#nest-selector)
Nested relative rules (.foo { > .bar { ... } }) (https://drafts.csswg.org/css-nesting-1/#syntax)

As mentioned in this comment, I added the interface ICSSNestedRule and the class CSSNestedDeclarations to represent nested rule, analogous to the CSSOM.

I also:

Updated the getAsCSSString logic to account for nested rules.
- It was kinda an issue that some getAsCSSString implementations added leading or trailing spaces / newlines. If these should be added may depend on the context, which only the container (e.g. the CSSStyleRule with the declarations and rules) knows about.
- So now getAsCSSString does not add trailing spaces / newlines.
- I don't think that counts as a breaking change -- it's still valid CSS, just slightly different whitespace in some cases.
Updated CSSVisitor to account for nested declarations and rules
- 4716f2d
Fixed testfiles/css30/good/issue-gc-13.css
- The file is not actually good -- it's missing an rbrace!
- 27cd08b
Updated WPT test files css3-modsel-156*.
- & is now a valid selector member. The WPT test suite also changed the tests to use % instead of &, which is still invalid.
- e1a2682
Adjusted test for different interpretation of missing rbrace in nested rule
- See commit message for explanation
- 2ce5343

Implements: * Nested style rules (https://drafts.csswg.org/css-nesting-1/#syntax) * The nesting selector (https://drafts.csswg.org/css-nesting-1/#nest-selector) TODO / decisions: * Add support for nested group rules (https://drafts.csswg.org/css-nesting-1/#conditionals) * How should the domain model be extended? * (a) Do we want to preserve the order of interspersed declarations and nested rules? * (b) Does it need to be API compatible? Or can there be minor changes? * (c) Do we want to preserve the distinction between style rule's "style" and "cssRules" attribute from the CSSOM (https://drafts.csswg.org/css-nesting-1/#nested-declarations)? * The easiest way would be to add a list of style rules, a list of media rules etc. to the "CSSStyleRule" class, which fulfills (b) but not (a) and (c). * A couple of test failures related to parsing errors. Since rules can now be nested, edge cases how invalid CSS is handled differ slightly. * Make sure nested rules appear in the output of the getCSSAsString method

@font-face

…ng issues, update getAsCssString Add CSSNestedDeclarations class to represent nested declarations, like the CSSOM does. CSSStyleRule now has a list of ICSSNestedRule, which includes various rules such as CSSStyleRule or CSSMediaRule. See https://drafts.csswg.org/css-nesting-1/#conditionals Update CSSNodeToDomainObject to create CSSNestedDeclarations instances where needed. Add support for parsing nested at-rules, e.g.: .foo { @media print {} } Fix parsing issue where the parser confused an element selector with a style declaration, e.g. such as in the following 2 cases: * .foo { p { color: red } } * .foo { p: value; } Add a lookahead that checks if a style declaration follows, and only consume it in that case. Otherwise, proceed to look for rules and nested declarations. Add a new parser rule for consuming a style declaration with nested elements. Not all rules support nesting, e.g. @font-face. For these rules, we do want to keep the previous behavior where it throws on nested rules. Minor change to how whitespace is handled: getAsCssString only outputs itself as a string, it does not output any leading or trailing whitespace or newlines. Space and lines around an CSS element should be handled by the container that contains the element, as it may depend on the context of that container.

& is now a valid selector member. The test suite has changed the tests to use % instead of &, which is still invalid. See: https://github.com/web-platform-tests/wpt/blob/master/css/selectors/old-tests/css3-modsel-156.xml

support for relative selectors in nested style rules, e.g. .foo { > .bar { ... } } When a style rule is nested, it allows a <relativeSelector>, not just a <selector>. But at the top-level, a <relativeSelector> is not allowed, i.e. the following is invalid: > .bar { ... } To prevent the grammar from blowing up, always allow <relativeSelector> in a style rule, even at the top-level. Check for disallowed <relativeSelector> at the top level when mapping the parsed AST to the domain model. Issue a CSS interpretation error if such an invalid relative selector is encountered.

The file is not actually good -- it's missing an rbrace!

…rule With the browser compliant flag enabled, the behavior did not change (empty string). With the browser compliant flag disabled, .class{color:red;.class{color:green}.class{color:blue} is now parsed as nothing. Previously, an error occurred at the second ".class", causing the parser to skip to the next rbrace. Now, the second ".class" is the start of a nested rule. The parser only encounters an error at the very end, when it finds a missing rbrace. The error recovery tries looking for the next rbrace, but finds none, only an EOF, causing it to discard the entire rule.

Use prefix "s" for string variables Use prefix "m_" for instance fields As per https://github.com/phax/meta/blob/master/CodingStyleguide.md

phax

Please find attached my review comments.
I tried to provide clear guidance to the AI what to do - hope it's not a big thing - all minor things

phax · 2026-04-06T19:26:37Z

ph-css/src/main/java/com/helger/css/decl/CSSKeyframesRule.java

      return "";

-    if (aSettings.isRemoveUnnecessaryCode () && m_aBlocks.isEmpty ())
+    int nBlockCount = m_aBlocks.size ();


Move below if

phax · 2026-04-06T19:28:57Z

ph-css/src/main/java/com/helger/css/decl/CSSNestedDeclarations.java

+ *         </ul>
+ *     </ul>
+ * </ul>
+ * @author Philip Helger


Obviously not ;-)

phax · 2026-04-06T19:30:41Z

ph-css/src/main/java/com/helger/css/decl/CSSPageRule.java

                                       .getToString ();
  }
+
+  private String getPageRuleMemberAsCSS(@NonNull ICSSWriterSettings aSettings, int nIndentLevel) {


Rename to _getPageRuleMemberAsCSS

phax · 2026-04-06T19:31:55Z

ph-css/src/main/java/com/helger/css/decl/CSSStyleRule.java

+    return m_aRules.getClone ();
+  }
+
+  @Override


No @Override for methods purely implementing an interface

phax · 2026-04-06T19:35:38Z

ph-css/src/test/java/com/helger/css/decl/CSSMediaRuleTest.java

+        assertEquals("print", aSR.getMediaQueryAtIndex(0).getAsCSSString());
+
+        assertTrue (aSR.getRuleAtIndex (0) instanceof CSSStyleRule);
+        assertEquals (1, ((CSSStyleRule)aSR.getRuleAtIndex (0)).getSelectorCount());


Simplify by storing intermediate value in a local variable

phax · 2026-04-06T19:43:44Z

ph-css/src/main/java/com/helger/css/decl/CSSNestedDeclarations.java

+  public CSSNestedDeclarations()
+  {}
+
+  @Override


Remove the @Override from pure implementations

phax · 2026-04-06T19:48:18Z

ph-css/src/main/java/com/helger/css/decl/CSSWritableList.java

      if (!bOptimizedOutput || nIndex < nDeclCount - 1)
        aSB.append (CCSS.DEFINITION_END);
-      if (!bOptimizedOutput)
+      if (!bOptimizedOutput && nIndex != size() - 1)


Replace size() with nDeclCount

phax · 2026-04-06T19:48:50Z

ph-css/src/main/java/com/helger/css/decl/ICSSNestedRule.java

+ * {@link com.helger.css.decl.visit.DefaultCSSVisitor DefaultCSSVisitor} which is a good basis for
+ * your own implementations.
+ *
+ * @author Philip Helger


Wasn't me :)

phax · 2026-04-06T19:49:28Z

ph-css/src/main/java/com/helger/css/decl/IHasCSSNestedRules.java

+ *
+ * @param <IMPLTYPE>
+ *        Implementation type
+ * @author Philip Helger


phax · 2026-04-06T19:50:55Z

ph-css/src/main/java/com/helger/css/handler/CSSNodeToDomainObject.java

+
  @Nullable
-  private CSSStyleRule _createStyleRule (@NonNull final CSSNode aNode)
+  private CSSStyleRule _createStyleRule (@NonNull final CSSNode aNode, final int nStyleRuleCount)


Instead of int nStyleRuleCount we want to expression boolean bIsTopLevel, don't we? In this case, please modify all calls accordingly

phax · 2026-04-06T20:01:51Z

Thanks alot for your contribution - like it :-)

Can you please do me a favour and explain the reasoning for modifying the new-line handling? As the tests are not really changing there is not much difference in the output - or was that just some AI "noise" on top of it?

awa-xima and others added 10 commits March 23, 2026 09:10

Add basic tests for nested rules and nesting selector

4cb3e70

Update wpt CSS test css3-modsel-156*

e1a2682

& is now a valid selector member. The test suite has changed the tests to use % instead of &, which is still invalid. See: https://github.com/web-platform-tests/wpt/blob/master/css/selectors/old-tests/css3-modsel-156.xml

Update CSSVisitor for nested declarations and rules

4716f2d

Fix testfiles/css30/good/issue-gc-13.css

27cd08b

The file is not actually good -- it's missing an rbrace!

Add test for distinction between &.foo{} and & .foo{}

15bf1f7

Some coding style fixes

a6c9d3f

Use prefix "s" for string variables Use prefix "m_" for instance fields As per https://github.com/phax/meta/blob/master/CodingStyleguide.md

This was referenced Apr 3, 2026

Implements @propery rule #121 #124

Closed

Feature/add property rule support #122

Open

phax requested changes Apr 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement CSS Nesting Module #94#123

Implement CSS Nesting Module #94#123
blutorange wants to merge 10 commits intophax:masterfrom
blutorange:issue-94

blutorange commented Apr 3, 2026 •

edited

Loading

Uh oh!

phax left a comment

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax Apr 6, 2026

Uh oh!

phax commented Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

blutorange commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

phax left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

phax commented Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

blutorange commented Apr 3, 2026 •

edited

Loading