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

[mellyeliu]

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:

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: #1217

We could even make it a utility function as shown in #1358.

import * as stylex from '@stylexjs/stylex';
import {dirLeftRight} from '@stylex/utils';

const styles = stylex.create({
  button: {
    transform: dirLeftRight('rotate(-45deg)', 'rotate(45deg)'),
  }
});

[mellyeliu]

We could add something like this at the head of the stylesheet:

:root,
[dir="ltr"] {
  --translate-inline-start: 1;
  --translate-inline-end: -1;

  --rotate-diagonal: -45deg;
}

[dir="rtl"] {
  --translate-inline-start: -1;
  --translate-inline-end: 1;

  --rotate-diagonal: 45deg;
}

To be used like:

const styles = stylex.create({
  card: {
    transform: `translateX(calc(10px * var(--translate-inline-start)))`,
  },
});

Which then can be abstracted to:

const styles = stylex.create({
  card: {
    transform: stylex.fn.translateLogicalX('10px'),
  },
});

where translateLogicalX(val) is mapped to translateX(calc(val * var(--translate-inline-start)))