[babel-plugin] Do not compile logical styles into `ltr` and `rtl` equivalents.

[nmn]

Currently, when using styleResolution: 'legacy-expand-shorthands', CSS logical properties are compiled into two ltr and rtl equivalent CSS rules.

All new browsers natively support logical CSS properties, so we should just use those.

The one exception is border-*-*-radius, which is not supported in older browsers. In that case, we should polyfill it after CSS generation if it makes sense.

[mobalti]

I hope this will be made a top priority.

[nmn]

@mobalti Could you please explain why this is a priority for you? styleResolution: 'legacy-expand-shorthands' is something that no one should be using and it's a setting that we use internally for esoteric reasons.

If you use any other value for styleResolution we already do not generate separate ltr and rtl styles.

Do you have a usecase for using styleResolution: 'legacy-expand-shorthands' in your own codebase?

[mobalti]

I thought this issue was related to a discussion I started a few months ago about why the library converts all logical properties to their physical equivalents, such as changing "block-size" to "height" and "inline-size" to "width."

It would be helpful if the library offered an option to disable this feature because logical properties represent how we think when we design with CSS, not just browser behavior.

Thank you for considering this.

[nmn]

the library converts all logical properties to their physical equivalents, such as changing "block-size" to "height" and "inline-size" to "width."

@mobalti This is not completely accurate. Logical styles such as margin-inline-start etc are preserved. The current limitation is that StyleX does not support vertical writing modes. Logical styles along the horizontal axis are fully supported.

We are planning to fix this limitation.