Closed (fixed)
Project:
Drupal core
Version:
10.1.x-dev
Component:
CSS
Priority:
Normal
Category:
Task
Assigned:
Unassigned
Issue tags:
Reporter:
Created:
31 Mar 2023 at 19:57 UTC
Updated:
24 May 2023 at 14:59 UTC
Jump to comment: Most recent, Most recent file
Comments
Comment #2
longwavepostcss-preset-envnow adds-webkit-text-decorationeverywheretext-decorationis used due to a Safari issue: https://github.com/postcss/autoprefixer/issues/1473Comment #3
smustgrave commentedNo failures.
Not sure the level of concern -webkit-text-decoration being added everywhere. Assuming none just mentioning.
Comment #4
longwaveThere is no concern from me, just a note to reviewers in case they are surprised by the diff like I was.
Comment #5
longwaveActually Olivero's variables.css has some odd looking changes, would like a second opinion on those from a frontend developer.
Comment #6
mherchelSomething'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 #3313146: PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) which are not supported by Chrome and Safari, 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.
Comment #7
mherchelThe patch no longer applies to 10.1.x
I ran the following commands:
Then I ran
yarn build:css.The CSS that was generated for me was different than the patch above:
-webkit-prefix ontext-decorationIn 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.
Comment #8
gauravvvv commentedPatch #2, no longer applies to 10.1.x. I have re-rolled the patch. please review
Comment #9
smustgrave commentedUmm 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?
Comment #10
gauravvvv commentedAbove patch has some errors (size is too high), I have rebased the branch and provided the latest patch.
Comment #11
gauravvvv commentedYes 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.
Comment #12
spokjeSo, "interestingly" when I do a
yarn installfollowed by ayarn build:css, so _without_ updating anything, I get the changes in the attached patch, which seem just to have (very) wrong indentations.EDIT: This looks like somehow #3314523: PostCSS results in CSS that does not comply with our coding standards got reverted, as already said by @mherchell in #7, but it appears unrelated to updating the packages in this issue, since it's already happening without any updates.
Comment #13
spokjeIf I revert #3344087: Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS and run
yarn build:cssI 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:csswhenevercore/package.jsonand/orcore/package.lockchanges in our commit checks, which would have caught the above, me thinks.Comment #14
longwaveI've reverted #3344087: Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS. Stylelint 15 has deprecated indentation and other opinionated style rules, and they have been removed from
stylelint-config-standard30. This is why the reformatting no longer works. We will have to migrate to Prettier or similar to continue reformatting our CSS.Comment #15
spokjeLet's wait until #3344087: Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS is committed before proceeding here, to prevent endless rerolling because of conflicts in yarn.lock.
Comment #16
spokje#3344087: Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS landed.
Comment #18
gauravvvv commentedComment #19
mherchelThis is still adding the unnecessary
-webkit-text-decorationproperties to the CSS. Haven't looked at why, but this is not needed. Webkit has support the unprefixed version since 2014.Comment #20
longwave@mherchel this is to work around a bug in Safari, see https://github.com/postcss/autoprefixer/issues/1473
Comment #21
mherchelOMG Safari 🤦♂️
Will look at this closely today (if no one beats me to it)
Comment #22
mherchelThis 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 theyarn watch:cssfunctionality.I also verified that the new syntax of CSS nesting works (removes
@nest,¬ 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
Comment #25
catchCommitted/pushed to 11.x and cherry-picked to 10.1.x, thanks!