Integration Guide

Install postcss and postcss-logical-polyfill as development dependencies. Run this plugin after preprocessors, CSS generation and nesting expansion. Set <html dir="ltr"> or <html dir="rtl"> so the default direction selectors match.

PostCSS configuration

Use this configuration with tools that load a PostCSS config, including Vite:

import logicalPolyfill from 'postcss-logical-polyfill';

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

For CommonJS, use postcss.config.cjs:

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

PostCSS CLI

npm install --save-dev postcss postcss-cli postcss-logical-polyfill
npx postcss input.css -o output.css

The CLI loads the configuration above. See the CLI example.

Vite inline configuration

As an alternative to a separate PostCSS configuration file:

import { defineConfig } from 'vite';
import logicalPolyfill from 'postcss-logical-polyfill';

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

See the Vite source-map example.

Webpack

Install postcss-loader, css-loader and style-loader in addition to the plugin and PostCSS, then configure your CSS rule:

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [require('postcss-logical-polyfill')()]
            }
          }
        }
      ]
    }]
  }
};

See the Webpack example.

Next.js

Use a PostCSS configuration rather than adding another CSS loader to Next.js:

export default {
  plugins: {
    'postcss-logical-polyfill': {}
  }
};

A custom PostCSS configuration replaces Next.js defaults. Include the other plugins your application needs, with CSS generation and nesting expansion before this plugin. Set the HTML dir attribute in your root layout.

Sass, Less and Tailwind CSS

Compile Sass or Less to CSS before this plugin. The repository has Sass and Less examples.

For Tailwind, run this plugin after Tailwind generates CSS. Use the PostCSS plugin for your installed major version (tailwindcss for v3, @tailwindcss/postcss for v4). Prefer logical utilities: this plugin does not mirror physical ml-* and mr-* utilities.

Options and troubleshooting

The plugin options are ltr, rtl and outputOrder. Options such as preserve or dir from other plugins are not part of this API.