Use latest rules for postcss-nesting

MR 12426 is ready.

This looks good to me. I looked at the code, and it looks as expected. I also tested it out and checked out the interfaces with the most "interesting" CSS, to make sure they look as expected, and they do!

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Re-based to resolve merge conflict. Since this applying the new nesting format on top of changed CSS from upstream, moving to NR first. Though ideally this is either merged somewhat soon or decided not to be done, because every CSS change upstream will likely lead to a merge conflict.

Side note, I find generated selectors like this pretty amusing: :is(:is(:is(body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2) .primary-nav__menu-link-inner)::after):dir(rtl)

God that is a fugly selector! Anyway, I'll take a look at this shortly!

I did some extensive spot checking in Olivero, Claro, as well as the off-canvas dialog.

Everything looks as it should. Without some type of robust visual regression system, this is the best we're going to get.

I recommend getting this merged sooner than later, so we have time to identify any potential regressions (which I'd be surprised to see).

longwave → closed merge request !12426

Personally I think the new nesting style is less readable in compiled form, but it is what it is, so let's get this in. Not eligible for backport due to the risk of regressions.

Committed d0e9947 and pushed to 11.x. Thanks!

@mherchel mentioned this in the original issue 📌 Update prettier/PostCSS/stylelint for 11.2 Active for the next step after this:

After that, we should really see what's holding us back from shipping native nesting. A quick look at https://caniuse.com/css-nesting, shows that our supported browsers support it.

I suppose a follow up is needed for that, but I don't know what needs to be done there.