facebook / facebook/stylex

[babel-plugin] Create a set of custom "logical" property functions

Open
#1,232 2 comments 0 reactions 1 assignee Claimed by @mellyeliu View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.