[babel-plugin] Create a set of custom "logical" property functions
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the feature request
Logical style properties solve RTL/LTR layout for the majority of use-cases, but there are a few scenarios where that doesn't work, such as for properties like `transform`.
The simplest solution in such scenarios would be to use the `:dir()` pseudo class:
```tsx
transform: {
default: 'rotate(-45deg)',
':dir(rtl)': 'rotate(45deg)',
}
```
However, `:dir()` is not "widely available" and needs a polyfill. The commonly used polyfills for `:dir()` either rely on an attribute selector which assumes the same direction for the whole page, or uses `:lang` as an approximation.
We can instead use CSS variables and a space hack to enable this in a way that work even in older browsers. Similar to the proposed float polyfill here: https://github.com/facebook/stylex/issues/1217
We could even make it a utility function as shown in #1358.
```tsx
import * as stylex from '@stylexjs/stylex';
import {dirLeftRight} from '@stylex/utils';
const styles = stylex.create({
button: {
transform: dirLeftRight('rotate(-45deg)', 'rotate(45deg)'),
}
});
```
Contributor guide
Assessment
This issue has not been assessed yet.