We can polyfill inline-start and inline-end float values using CSS custom properties alongside [dir="ltr"] selectors. This is a for long-term migration off of LTR/RTL polyfill completely

Note: --start and --end are for descriptive purposes. We should generate a hashed name here instead

Details:

• We expand and normalize properties for our legacy style resolution here (https://github.com/facebook/stylex/blob/main/packages/%40stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js)
  • Replace float: inline-start -> float: var(--start);
  • Replace float: inline-end -> float: var(--end);
  • Delete these blocks in the LTR/RTL files: https://github.com/facebook/stylex/blob/main/packages/%40stylexjs/babel-plugin/src/shared/physical-rtl/generate-ltr.js#L206-L208

So we get:

.f-s {
  /* float: inline-start; */ 
  float: var(--start);
}
.f-e {
  /* float: inline-end; */
  float: var(--end);
}

We then need to add something like this within the broader sheet in processStylexRules if the rules metadata contains a float property (https://github.com/facebook/stylex/blob/main/packages/%40stylexjs/babel-plugin/src/index.js#L359):

:root, [dir="ltr"] {
  --start: left;
  --end: right;
}
[dir="rtl"] {
  --start: right;
  --end: left;
}