PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) which are not supported by Chrome and Safari

Created on 2 October 2022, about 2 years ago

Updated 1 December 2023, 12 months ago

In #3312481: Update core's browserlist → we updated the browserlist database which determines what CSS properties PostCSS will transpile. With this update, Drupal core is not transpiling any logical properties.

However, there are certain properties which our supported browsers do not support, including flow relative properties such as `float: inline-end`, and `clear: inline-start`. You can see current browser support for these properties at https://caniuse.com/mdn-css_properties_clear_flow_relative_values.

The Chromium issue to implement this is at https://bugs.chromium.org/p/chromium/issues/detail?id=850004. I can’t find the webkit issue.

I created an upstream bug for PostCSS Logical at https://github.com/csstools/postcss-plugins/issues/632

Edit after the fact

This will likely never be fixed within PostCSS. I created an issue upstream at https://github.com/csstools/postcss-plugins/issues/958, where I discovered that PostCSS Logical doesn't compile to both RTL and LTR anymore. You have to pick one or the other (this is new to version 8 of PostCSS Logical). This doesn't affect Drupal except within the float and clear properties. We'll have to manually add the dir attributes when using those.

Task

It'd be nice if either 1) this could be fixed upstream or 2) we could set PostCSS Logical to always transpile these values. But, for now, I think we need to change the float values to use non-logical CSS properties. This should be an easy task, as they're only used in a few places within Olivero.

🐛 Bug report

Status

Fixed

Version

10.0 ✨

Component

CSS →

Last updated about 6 hours ago

Maintained by
🇹🇼Taiwan @johnalbin
🇺🇸United States @mherchel

Created by

🇺🇸United States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.

CSS
It involves the content or handling of Cascading Style Sheets.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment over 1 year ago →
🇺🇸United States mherchel Gainesville, FL, US
Adding note to IS about upstream issue:

This will likely never be fixed within PostCSS. I created an issue upstream at https://github.com/csstools/postcss-plugins/issues/958, where I discovered that PostCSS Logical doesn't compile to both RTL and LTR anymore. You have to pick one or the other (this is new to version 8 of PostCSS Logical). This doesn't affect Drupal except within the float and clear properties. We'll have to manually add the dir attributes when using those.
Comment 12 months ago →
🇺🇸United States mherchel Gainesville, FL, US
Note here for posterity: Browsers now support flow relative logical properties. See https://caniuse.com/mdn-css_properties_clear_flow_relative_values

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024