Feature request: Add logical property to physical property mappings

[lifeiscontent]

Summary

It would be helpful to have explicit mappings from logical CSS properties to their physical equivalents for both LTR and RTL writing modes.

Current State

The logicalPropertyGroup field groups related properties together, but:

1. Properties are listed alphabetically, not by their logical-to-physical relationship
2. There's no explicit mapping showing which logical property corresponds to which physical property in LTR vs RTL

Use Case

CSS-in-JS libraries and tools that need to:

• Convert logical properties to physical properties for older browser support
• Generate RTL stylesheets from LTR source
• Understand the relationship between margin-inline-start → margin-left (LTR) / margin-right (RTL)

Proposed Enhancement

Add explicit LTR/RTL mappings:

{
  "name": "margin-inline-start",
  "logicalPropertyGroup": "margin",
  "physicalMapping": {
    "ltr": "margin-left",
    "rtl": "margin-right"
  },
  ...
}

Or a separate mapping structure:

{
  "logicalToPhysical": {
    "margin-inline-start": { "ltr": "margin-left", "rtl": "margin-right" },
    "margin-inline-end": { "ltr": "margin-right", "rtl": "margin-left" },
    "margin-block-start": { "ltr": "margin-top", "rtl": "margin-top" },
    "padding-inline-start": { "ltr": "padding-left", "rtl": "padding-right" },
    ...
  }
}

Affected Properties

Logical properties that need mappings:

• margin-inline-start, margin-inline-end, margin-block-start, margin-block-end
• padding-inline-start, padding-inline-end, padding-block-start, padding-block-end
• border-inline-start-*, border-inline-end-*, border-block-start-*, border-block-end-*
• inset-inline-start, inset-inline-end, inset-block-start, inset-block-end
• border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
• inline-size, block-size, min-inline-size, max-inline-size, etc.