CSS Nesting

[CanadaHonk]

Description

CSS Nesting is currently supported by all engines but they have varying implementations (from different spec snapshots).

Specification

https://www.w3.org/TR/css-nesting-1/

Open Issues

// todo

Tests

https://wpt.fyi/results/css/css-nesting

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko: mozilla/standards-positions#695
WebKit: WebKit/standards-positions#69

Browser bug reports

Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1095675
Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
WebKit: https://bugs.webkit.org/show_bug.cgi?id=223497

Developer discussions

Seen some discussion online of Gecko and Blink having different implementations (from varying spec at the time), seems to cause confusion with nesting.

Polls & Surveys

State of CSS 2023: https://2023.stateofcss.com/en-US/features/

88% of people are aware of CSS Nesting and 26% of people use it

Existing Usage

https://chromestatus.com/metrics/feature/timeline/popularity/4372 (this seems odd?)

Workarounds

Use a preprocessor like PostCSS.

Accessibility Impact

N/A

Privacy Impact

N/A

Other

[foolip]

For survey data and web developer demand, in State of CSS 2023, CSS Nesting was a very common answer to the question "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?"

Also, in preliminary results from State of HTML 2023, CSS Nesting was a somewhat common response to the freeform question "Which existing HTML features or browser APIs are you unable to use because of browser differences or lack of support?" To answer CSS Nesting was to ignore the scope of the question, but it says something nevertheless.

[andruud]

We'd need to also include these tests:

css/css-syntax/var-with-blocks.html
css/css-syntax/trailing-braces.html
css/css-syntax/custom-property-rule-ambiguity.html

[andruud]

Seen some discussion online of Gecko and Blink having different implementations (from varying spec at the time), seems to cause confusion with nesting.

@CanadaHonk Was this confusion related to relaxed nesting not being supported in all browsers? Or was it something else?

---

I'm trying to figure out which aspects of css-nesting we need to focus on. In particular, we can not look at the current set of WPTs and assume that they cover what they need to cover.

Also, we're now (apparently) going to change some fundamental parts of css-nesting, although we're not sure how yet. This would make sense to include as well, but we probably need to first confirm that we indeed can make this change at all.

[andruud]

We should probably ensure that we have a WPT for :is(:host) (via &) (w3c/csswg-drafts#9509) and include that in the list. (cc @emilio)

[emilio]

I have some in https://bugzilla.mozilla.org/show_bug.cgi?id=1850974

[CanadaHonk]

Was this confusion related to relaxed nesting not being supported in all browsers?

Yes.

If the spec is not clear, this might have to get delayed until 2025? Or maybe focus on the parts which are stable?

[andruud]

We could at least include the relaxed nesting part. All known issues related to that are resolved and tested by WPTs.

[andruud]

I suggest that we only include tests from these two relevant sub-areas:

• Relaxed nesting.
• :host within :is() (which automatically transfers over to nesting).

In other words:

// Relaxed nesting
css/css-nesting/nesting-type-selector.html
css/css-nesting/implicit-nesting-ident.html
css/css-nesting/implicit-nesting-ident-recovery.html
css/css-syntax/custom-property-rule-ambiguity.html
css/css-syntax/trailing-braces.html
css/css-syntax/var-with-blocks.html

// :is(:host)
css/css-nesting/host-nesting-001.html
css/css-nesting/host-nesting-002.html
css/css-nesting/host-nesting-003.html
css/css-nesting/host-nesting-004.html
css/css-nesting/host-nesting-005.html
css/css-scoping/host-is-001.html
css/css-scoping/host-is-002.html
css/css-scoping/host-is-003.html
css/css-scoping/host-is-004.html
css/css-scoping/host-is-005.html

Deliberately not included, regardless of the current interop situation in wpt.fyi:

• Anything related to serialization.

[foolip]

Here's a single view of the tests suggested in #420 (comment):

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=path%3A%2Fcss%2Fcss-nesting%2Fnesting-type-selector.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fhost-nesting-001.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fhost-nesting-002.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fhost-nesting-003.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fhost-nesting-004.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fhost-nesting-005.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fimplicit-nesting-ident-recovery.html%20or%20path%3A%2Fcss%2Fcss-nesting%2Fimplicit-nesting-ident.html%20or%20path%3A%2Fcss%2Fcss-scoping%2Fhost-is-001.html%20or%20path%3A%2Fcss%2Fcss-scoping%2Fhost-is-002.html%20or%20path%3A%2Fcss%2Fcss-scoping%2Fhost-is-003.html%20or%20path%3A%2Fcss%2Fcss-scoping%2Fhost-is-004.html%20or%20path%3A%2Fcss%2Fcss-scoping%2Fhost-is-005.html%20or%20path%3A%2Fcss%2Fcss-syntax%2Fcustom-property-rule-ambiguity.html%20or%20path%3A%2Fcss%2Fcss-syntax%2Ftrailing-braces.html%20or%20path%3A%2Fcss%2Fcss-syntax%2Fvar-with-blocks.html

[wpt-interop]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.

[zcorpan]

Thank you for proposing CSS Nesting for inclusion in Interop 2024.

We are pleased to let you know that this proposal was accepted as part of the CSS Nesting focus area. You can follow the progress of this focus area on the Interop 2024 dashboard.

For an overview of our process, see the proposal selection. Thank you for contributing to Interop 2024!

Posted on behalf of the Interop team.