Quick Start

Requires Node.js 20.19.0 or later and PostCSS 8.4.0 or later within version 8.

npm install --save-dev postcss postcss-logical-polyfill
# or: pnpm add -D postcss postcss-logical-polyfill
# or: yarn add -D postcss postcss-logical-polyfill

For an ESM project, including Vite projects that load a PostCSS configuration:

import logicalPolyfill from 'postcss-logical-polyfill';

export default {
  plugins: [logicalPolyfill()]
};

For CommonJS:

module.exports = {
  plugins: [require('postcss-logical-polyfill')()]
};

Set an explicit direction marker on an ancestor of your styled elements:

<html dir="ltr">
  <body>
    <div class="card">Card content</div>
  </body>
</html>

Use dir="rtl" for RTL. The browser’s default LTR direction does not add a dir attribute, so it does not match the default [dir="ltr"] selector. Changing document.documentElement.dir switches between the generated rules without another CSS build.

Input:

.card {
  padding-block: 1rem;
  margin-inline-start: 2rem;
}

Output:

.card {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
[dir="ltr"] .card {
  margin-left: 2rem;
}
[dir="rtl"] .card {
  margin-right: 2rem;
}

Existing direction scopes and logical values

Recognized direction-scoped rules are transformed for their existing context:

/* Input */
[dir="rtl"] .notice {
  margin-inline-start: 1rem;
}

/* Output */
[dir="rtl"] .notice {
  margin-right: 1rem;
}

Additional transformations include scroll margin/padding, logical overflow and containment sizes, and logical values such as float: inline-start, clear: inline-end and resize: block. Experimental logical gradient directions are also supported; they are an extension, not a guarantee of native browser support.

/* Input */
.notice {
  float: inline-start;
}

/* Output */
[dir="ltr"] .notice {
  float: left;
}
[dir="rtl"] .notice {
  float: right;
}

Configuration

The default options are:

import logicalPolyfill from 'postcss-logical-polyfill';

export default {
  plugins: [logicalPolyfill({
    ltr: { selector: '[dir="ltr"]' },
    rtl: { selector: '[dir="rtl"]' },
    outputOrder: 'ltr-first' // or 'rtl-first'
  })]
};

Custom direction classes are supported:

logicalPolyfill({
  ltr: { selector: '.ltr' },
  rtl: { selector: '.rtl' }
});

These classes must match ancestors of the styled elements. They scope the generated CSS; also set the HTML dir attribute for text direction and other browser behavior.

See the configuration guide for selector lists and integration options.

Quick Start

Existing direction scopes and logical values

Configuration

Next steps