PostCSS Logical Polyfill

Quick Example

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;
}

Features

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

Why Use This Plugin?

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

What It Does

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