Introduction
PostCSS Logical Polyfill lets you write logical properties and compile one stylesheet with LTR and RTL physical-property rules for older browsers and WebViews.
For example, margin-inline-start becomes margin-left in LTR and margin-right in RTL. Direction-independent properties such as padding-block become shared physical declarations.
Is this the right tool?
Section titled “Is this the right tool?”| Your requirement | Consider |
|---|---|
| Your target browsers support the logical properties you use | Native CSS; no transformation is needed |
| Compile logical properties for one configured direction or writing mode | postcss-logical, also available through postcss-preset-env |
| Mirror existing physical LTR styles into RTL styles | RTLCSS or postcss-rtlcss |
| Compile logical properties into one stylesheet with horizontal LTR/RTL scopes, including existing direction selectors | postcss-logical-polyfill |
| Need logical-property transformations for vertical writing modes or keyframes | Evaluate postcss-logical-properties-polyfill, whose documentation lists these features |
Other tools also generate combined LTR/RTL styles. This plugin focuses on logical-property input, existing direction scopes, common declarations and additional logical values. Check the supported properties and limitations below against your application.
Compatibility
Section titled “Compatibility”The plugin assumes horizontal writing modes. It transforms logical property names in transition and transition-property. Keyframes and animation references are left untouched by default; enable animations: true to compile static references to logical keyframes. Expand CSS nesting before running the plugin.
Generated direction prefixes add specificity. Use matching scopes for overrides in separate rules and explicit direction-scoped selectors for subtrees with conflicting direction ancestors.
Your target browser must support the generated physical properties and values. The plugin does not polyfill unrelated features such as CSS custom properties or containment; there is no universal browser-version guarantee.
With the default selectors, explicitly set <html dir="ltr"> or <html dir="rtl">. A browser’s default LTR direction does not match an absent dir attribute.