Add postcss-preset-env

+1 to this from the Olivero theme's point of view!

+++ b/core/scripts/css/compile.js
@@ -2,29 +2,20 @@ const chalk = require('chalk');
+      postcssPresetEnv({ stage: 1 }),

Should we add preserve: false to the config? This setting will remove the CSS Custom Properties instead of including both the custom property and the transpiled value (which is what core currently does - see https://git.drupalcode.org/project/drupal/-/blob/9.0.x/core/scripts/css/...)

This is looking good! Seems like there's some invalid CSS going on in tabledrag, though.

+++ b/core/themes/claro/css/components/tabledrag.css
@@ -321,14 +321,12 @@ body.drag {
+@medianot all and (min-resolution: 0.001dpcm) and {

This looks invalid. Not sure what's going on. We might need to rewrite that CSS file.

FWIW, the previous CSS looks invalid too.

1. I was not able to get this working locally without adding the @babel/runtime dependency. I'm on a brand new machine, so it's possible it's specific to my new-and-trying local env, but would be good for another reviewer to confirm this. Same issue with HEAD

2. +++ b/core/themes/claro/css/components/details.css
   @@ -250,13 +247,11 @@ rgba(0, 0, 0, 0.1);
   -}
   

   It looks like the needed double media query used for targeting Safari is removed on compile now.

3. From the looks of yarn.lock this adds several new dependencies so (based on several other issues I've been working on), an evaluation needs to be provided for each.

Could you post the error that you are seeing and which command did you run when that error appeared?

The error was Error: Cannot find module '@babel/runtime/helpers/interopRequireWildcard' Same issue with HEAD, not specific to this change. Created followup issue for that bug #3172253: build:css error regarding missing interopRequireWildcard

1. +++ b/core/themes/claro/css/base/elements.css
   @@ -57,23 +57,7 @@
    html {
   -  font-family: BlinkMacSystemFont
   -,
   --apple-system
   -,
   -"Segoe UI"
   -,
   -Roboto
   -,
   -Oxygen-Sans
   -,
   -Ubuntu
   -,
   -Cantarell
   -,
   -"Helvetica Neue"
   -,
   -sans-serif;
   +  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   

   These changes are a nice result - much more readable and less bytes to send too :)

2. +++ b/core/themes/claro/css/components/details.css
   @@ -404,13 +401,11 @@ rgba(0, 0, 0, 0.1);
    /* stylelint-disable-next-line unit-whitelist */
    
   -@media not all and (min-resolution: 0.001dpcm) {
   -  @media {
   +@medianot all and (min-resolution: 0.001dpcm) and {
        .claro-details__summary::after {
          transition: none;
        }
      }
   -}
    
   

   This change doesn't look correct and like the other similar changes later on and above. But I'm not a CSS expert - might be legit :)

3. +++ b/core/themes/claro/css/components/system-admin--links.css
   @@ -35,6 +35,6 @@ small .admin-link:after {
    .system-cron-settings__link {
   -  overflow-wrap: break-word;
   +  word-wrap: break-word;
      word-wrap: break-word;
    }
   

   This change looks interesting. At the very least now we have duplicated word-wrap: break-word;

4. +++ b/core/themes/claro/css/components/views-ui.css
   @@ -431,6 +431,7 @@ details.fieldset-no-legend {
   +  border-right: 0;
      border-right: initial;
   
   @@ -471,6 +472,7 @@ details.fieldset-no-legend {
   +  border-right: 0;
      border-right: initial;
   

   these look interesting as border-right is defined twice.

+++ b/core/scripts/css/compile.js
@@ -2,29 +2,22 @@ const chalk = require('chalk');
+        stage: 1,

I'm working on refactoring Olivero to support postcss-preset-env, and ran into an issue with the postcss-focus-within plugin. (Olivero uses focus-within with non-js fallbacks).

The way that it works is that it sets the :focus-within pseudo-class to a [focus-within] attribute, which then needs to be paired with a JS polyfill to make that happen.

I recommend disabling this plugin, and also going through the list of plugins (https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugi...) to disable all that require a polyfill (looks like there may be several).

Here is my current setup in compile.js

      postcssPresetEnv({
        stage: 1,
        preserve: false,
        autoprefixer: { grid: 'no-autoplace' },
        features: {
          'focus-within-pseudo-class': false
        }
      }),

I did a little bit of looking through the dependencies, and the following PostCSS plugins require JS polyfills to work. I recommend disabling each of these (unless we choose to utilize the JS polyfill also).

• blank-pseudo-class
• focus-visible-pseudo-class
• focus-within-pseudo-class
• has-pseudo-class
• image-set-function
• prefers-color-scheme-query

I committed the (almost) final and largest chunk of refactoring Olivero to use PostCSS Preset ENV this morning.

I also wrote a first draft of documentation at https://www.drupal.org/docs/contributed-themes/olivero/authoring-css-for..., that we can use as a starter for core docs.

+++ b/core/themes/claro/css/components/system-admin--links.css
@@ -35,6 +35,6 @@ small .admin-link:after {
 .system-cron-settings__link {
-  overflow-wrap: break-word;
+  word-wrap: break-word;
   word-wrap: break-word;
 }

Twice the word-wrap fun :)

This looks really close!

We also need to turn on CSS Grid support for IE11 (Olivero uses CSS Grid extensively). CSS Grid is disabled by default in Autoprefixer (see https://github.com/postcss/autoprefixer/blob/master/README.md#options), and can be turned on by setting either grid: 'autoplace' or grid: 'no-autoplace'. The autoplacement feature didn't work for us, so have the latter option set.

I should've explicitly mentioned this in my previous comment (sorry!)

Code looks good from the Olivero standpoint!

This looks fine to me from a release-management point of view - swapping one dev-only package for another one.

I was a little concerned at first that we were switching from a babel package to just some individual maintainer's, but per @lauriii we were already relying on him for the other dep changed in this release, so that seems OK to me.

I did suggest posting some of the open dep evaluation questions in their queue so we have it for future reference, but I don't think it needs to block this going in.

Committed 611923c and pushed to 9.1.x. Thanks!

Fixed spelling on commit.

diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index 49e1153359..60bf595626 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -109,6 +109,7 @@ autoloader
 autoloaders
 autoloading
 autop
+autoplace
 autoplay
 autoreply
 autosave

Due to /Users/alex/dev/drupal/core/scripts/css/compile.js:38:21 - Unknown word (autoplace)