Skip to content

PostCSS Logical Polyfill

Transform CSS logical properties into physical properties with appropriate direction selectors for maximum browser compatibility.
Input
/* Input */
.container {
margin-inline: 1rem 2px;
padding-block: 2rem;
}
[dir="rtl"] .container {
border-inline-start: 2px solid blue;
}
Output
/* Output */
.container {
padding-top: 2rem;
padding-bottom: 2rem;
}
[dir="ltr"] .container {
margin-left: 1rem;
margin-right: 2px;
}
[dir="rtl"] .container {
margin-right: 2px;
margin-left: 1rem;
border-right: 2px solid blue;
}

Polyfill Direction

Transforms logical properties → physical properties (reverse of most tools)

Smart Generation

Creates both LTR and RTL versions automatically

Optimized Output

Block-direction properties generate single rules (no duplication)

Extended Support

Includes scroll properties and logical values via integrated shim

Experimental Features

Linear gradient logical directions and draft CSS specs

Configurable

Custom selectors and output order control

While modern browsers support CSS logical properties, older browsers don’t. This plugin acts as a polyfill, converting your modern logical properties to physical properties that work everywhere, while preserving the directional behavior for international layouts.

Perfect for:

  • ✅ Supporting older browsers while using modern CSS
  • ✅ Gradual migration from physical to logical properties
  • ✅ RTL/LTR internationalization
  • ✅ Framework integration with directional layouts

This plugin transforms CSS Logical Properties into physical properties with appropriate direction selectors for browser compatibility. It intelligently processes:

  • All standard logical properties (margin, padding, border, inset, sizing, etc.)
  • Logical values (float: inline-start, clear: inline-end, resize: block)
  • Scroll properties (scroll-margin, scroll-padding)
  • Overflow properties (overflow-block, overflow-inline)
  • CSS Containment properties (contain-intrinsic-block-size, contain-intrinsic-inline-size)
  • Experimental features (linear-gradient logical directions)
  • Both scoped and unscoped logical properties