PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) even if browserlist says no support

[mherchel]

Bug description

Chrome and Safari do not yet support flow relative properties (e.g. float: inline-start). You can see the data on CanIUse at https://caniuse.com/mdn-css_properties_clear_flow_relative_values

However, if you tell browerlist to support Chrome, these properties are not transpiled by PostCSS Logical

This is an upstream bug report of Drupal core issue 3313146

"browserslist": [
    "last 2 Chrome major versions"
  ],

Source CSS

.selector {
  float: inline-end;
}

Expected CSS

[dir="ltr"] .selector {
  float: right;
}

[dir="rtl"] .selector {
  float: left;
}

Actual CSS

.selector {
  float: inline-end;
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

N/A

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Logical

Plugin version

5.0.4

What OS are you experiencing this on?

Linux

Node Version

16.14.0

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[Antonio-Laguna]

@mherchel thanks for reporting this!

We're aware that the behavior of the logical plugin is sub-optimal and we want to revamp it so it's more in line with the spec, note that your desired CSS is more specific than the first one and we're still to work out the best way to tackle that.

[romainmenke]

This is the same issue as : #575

I am still unsure how we will resolve this.

[romainmenke]

Hi @mherchel

There is now a dedicated plugin for this feature : https://www.npmjs.com/package/@csstools/postcss-logical-float-and-clear

It will be part of the upcoming major release of postcss-preset-env.

Thank you again for reporting this.