Use latest rules for postcss-nesting

Problem/Motivation

In 📌 Update prettier/PostCSS/stylelint for 11.2 Active , the update to postcss libraries included using the 2021 nesting rules in core/scripts/css/compile.js. This was done because the latest nesting rules 2024-02 introduced changes for nested rules with enforced usage of the :is() pseudo-class: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ne....

This ends up with some rules that look like this:

Before

#drupal-off-canvas-wrapper .button:hover,
#drupal-off-canvas-wrapper .button:active {

After

:is(#drupal-off-canvas-wrapper .button):hover,
:is(#drupal-off-canvas-wrapper .button):active {

The decision was to use the other nesting rules for 11.2.0, then update the rules to 2024 soon after to provide more time to discover any visual regression before the release of the next minor, see #11 in 📌 Update prettier/PostCSS/stylelint for 11.2 Active

My suggestion is to stick with the 2021 rules for now. Early on after 11.2, lets update to the 2024-02 rules, which will more accurately reproduce the specificity that browser do. Then we'll have several months to find any potential regressions.

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.

Steps to reproduce

Proposed resolution

Remove 'nesting-rules': { edition: '2021' }, from core/scripts/css/compile.js and re-run

yarn run build:css

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet