Query on Stylex Behavior: Logical Properties Conversion

[mobalti]

I noticed that Stylex converts certain logical properties like inlineSize and blockSize to width and height in the final bundled CSS file. I'm curious about the rationale behind this behavior. Is there a way to prevent this while retaining the logical properties?

Although I'm aware of Stylex's capability to efficiently manage variables through tokens.stylex, in this particular case, I've opted to use Open Props V2. My main objective here is to become acquainted with Stylex's API. Would there be any performance implications if I import variables from a global.css file, as I've done in this example, instead of using stylex.token.ts?"

Overall, I find the library to be solid, just as I expected. Thanks to the entire team for their work!

https://stackblitz.com/~/github.com/mobalti/open-props-v2-stylex-example

[nmn]

I'm curious about the rationale behind this behavior.

Old browsers don't support all logic properties. Existing polyfills don't support mixing ltr and rtl on the same page. I created a polyfill that does.

However, it is not possible to support vertical writing modes with this polyfill. So StyleX was designed to only support horizontal writing for now and assume top and bottom are always correct.

Another reason was to minimise the total amount of CSS. If an author uses inlineSize some of the times and width other times, we would get effectively duplicate CSS. So, we've chosen to have one canonical representation in the generated CSS.

Is there a way to prevent this while retaining the logical properties?

We should have an option to control this behaviour.