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

[mellyeliu]

Describe the feature request

For properties like transform

The majority of our leftover usages of /* @ltr-begin */ strings come from transform styles that should be flipped in RTL. For example:

transform: rotate(-45deg); 
/* @rtl begin */ 
transform: rotate(45deg); 
/* @rtl end */

We could either a set of basic supported CSS variables that autoflip based on [dir="rtl"]or create a config to allow users to define such a set to mimic logical behaviour for properties without such an equivalent

Similar to the proposed float polyfill here: #1217

[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)))