Update PostCSS and postcss-preset-env for Drupal 10.1

postcss-preset-env now adds -webkit-text-decoration everywhere text-decoration is used due to a Safari issue: https://github.com/postcss/autoprefixer/issues/1473

No failures.

Not sure the level of concern -webkit-text-decoration being added everywhere. Assuming none just mentioning.

There is no concern from me, just a note to reviewers in case they are surprised by the diff like I was.

Actually Olivero's variables.css has some odd looking changes, would like a second opinion on those from a frontend developer.

Something's looking weird here. I'm seeing lots of additions of -webkit-text-decoration, which makes absolutely no sense since that's a very old and well supported property.

In general this need to be done, as it's the correct resolution for 🐛 PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) which are not supported by Chrome and Safari Fixed , where PostCSS Preset ENV now includes https://www.npmjs.com/package/@csstools/postcss-logical-float-and-clear (see https://github.com/csstools/postcss-plugins/issues/632)

I'm going to pull it down and take a closer look.

The patch no longer applies to 10.1.x

I ran the following commands:

$ yarn add -D postcss-preset-env
$ yarn upgrade postcss postcss-import

Then I ran yarn build:css.

The CSS that was generated for me was different than the patch above:

• My CSS wasn't adding the unnecessary -webkit- prefix on text-decoration
• My CSS was also not formatting the generated CSS properly (which should have been fixed in #3314523: PostCSS results in CSS that does not comply with our coding standards → )

In addition, the new version is moving around some style blocks, which could potentially have regressions (although I doubt it actually will).

Setting this to NW based on all of this. I wish I had more time to work on this, but I don't at the moment.

Patch #2, no longer applies to 10.1.x. I have re-rolled the patch. please review

Umm that patch is almost 4 times the size of patch 2.

Also mentioned in the comment before there were some issues. Did you run the same steps mentioned in #7?

Above patch has some errors (size is too high), I have rebased the branch and provided the latest patch.

Also mentioned in the comment before there were some issues. Did you run the same steps mentioned in #7?

Yes I ran the same steps, it might be because of my branch was not up to date. I have provided the patch after rebasing the branch.

So, "interestingly" when I do a yarn install followed by a yarn build:css , so _without_ updating anything, I get the changes in the attached patch, which seem just to have (very) wrong indentations

If I revert 📌 Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS Fixed and run yarn build:css I get the same CSS as in the HEAD.
So it looks like that issue broke something

Also, we don't seem to be running yarn build:css whenever core/package.json and/or core/package.lock changes in our commit checks, which would have caught the above, me thinks.

I've reverted 📌 Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS Fixed . Stylelint 15 has deprecated indentation and other opinionated style rules, and they have been removed from stylelint-config-standard 30. This is why the reformatting no longer works. We will have to migrate to Prettier or similar to continue reformatting our CSS.

Let's wait until 📌 Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS Fixed is committed before proceeding here, to prevent endless rerolling because of conflicts in yarn.lock.

📌 Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS Fixed landed.

This is still adding the unnecessary -webkit-text-decoration properties to the CSS. Haven't looked at why, but this is not needed. Webkit has support the unprefixed version since 2014.

@mherchel this is to work around a bug in Safari, see https://github.com/postcss/autoprefixer/issues/1473

OMG Safari 🤦‍♂️

Will look at this closely today (if no one beats me to it)

This looks good! I pulled down the patch, and verified the CSS (paying special attention to the changes in Olivero's variables.css).

I also verified no changes to the CSS when I do a yarn build:css, and I also verified the yarn watch:css functionality.

I also verified that the new syntax of CSS nesting works (removes @nest, & not always needed, etc). At some point we'll convert to that.

Note that I have a couple questions upstream that don't affect us quite yet, and I opened up an issue at https://github.com/csstools/postcss-plugins/issues/958

Committed/pushed to 11.x and cherry-picked to 10.1.x, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.