Feature request: Add RTL-sensitive value properties list

[lifeiscontent]

Summary

It would be helpful to have a list of CSS properties whose values need to be flipped/mirrored in RTL (right-to-left) writing modes.

Use Case

CSS-in-JS libraries generating RTL stylesheets need to know which properties have values that should be mirrored. For example:

/* LTR */
text-align: left;
float: left;
transform: translateX(10px);

/* RTL - values need flipping */
text-align: right;
float: right;
transform: translateX(-10px);

Current State

There's no indication of which properties have direction-sensitive values that need transformation in RTL contexts.

Proposed Enhancement

Add an rtlValueFlip or directionSensitive field:

{
  "name": "text-align",
  "directionSensitiveValues": true,
  "rtlValueMap": {
    "left": "right",
    "right": "left"
  },
  ...
}

{
  "name": "float",
  "directionSensitiveValues": true,
  "rtlValueMap": {
    "left": "right",
    "right": "left"
  },
  ...
}

{
  "name": "clear",
  "directionSensitiveValues": true,
  ...
}

Or a simpler list of properties:

{
  "rtlSensitiveProperties": [
    "text-align",
    "float",
    "clear",
    "background-position",
    "background-position-x",
    "transform-origin",
    "perspective-origin",
    "object-position"
  ]
}

Affected Properties

Properties with direction-sensitive values:

• text-align (left ↔ right)
• float (left ↔ right)
• clear (left ↔ right)
• background-position, background-position-x
• transform-origin, perspective-origin
• object-position
• Various transform functions (translateX values need sign flip)

[ydaniv]

I'm not sure I understand why you chose to ask for properties to flip, instead of using the logical property names/values in the first place?
Either you're not familiar with those? Or maybe I missed something in your request.

[lifeiscontent]

Thanks for the question, @ydaniv. You're right that logical properties are the modern approach and should be preferred for new code.

The use case is for CSS-in-JS libraries (like the one I maintain, LiveStyle) that need to support legacy codebases and migration paths:

1. Legacy code transformation: Many existing stylesheets still use physical properties like text-align: left. Libraries like RTLCSS and stylex need to transform these for RTL locales. Having a canonical list of which properties have direction-sensitive values helps.

2. Properties without logical equivalents: transform: translateX(10px) has no logical equivalent - the X value must be negated in RTL. Same with background-position-x, various transform functions, etc.

3. Gradual migration: Teams can't convert all existing code to logical properties at once. Automated RTL transformation provides a bridge.

That said, I agree logical properties are the better long-term solution. Perhaps this request is lower priority than the others, and I could instead focus on the shorthand expansion data (#1766) which has broader utility.