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:
#drupal-off-canvas-wrapper .button:hover,
#drupal-off-canvas-wrapper .button:active {
: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.
Remove 'nesting-rules': { edition: '2021' }, from core/scripts/css/compile.js and re-run
yarn run build:css
Active
11.0 🔥
CSS
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!