PostCSS Logical Properties and Values

PostCSS Logical Properties and Values lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.

.element {
    block-size: 100px;
    max-inline-size: 400px;
    inline-size: 200px;
    padding-block: 10px 20px;
    margin-inline: auto;
    border-block-width: 2px;
    border-block-style: solid;
}

/* becomes */

.element {
    height: 100px;
    max-width: 400px;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
}

Usage

Add PostCSS Logical Properties and Values to your project:

npm install postcss postcss-logical --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssLogical = require('postcss-logical');

postcss([
    postcssLogical(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Logical Properties and Values runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

Options

blockDirection & inlineDirection

The blockDirection and inlineDirection options allow you to specify the direction of the block and inline axes. The default values are top-to-bottom and left-to-right respectively which would match any latin language.

You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example.

postcssLogical({
    blockDirection: 'right-to-left',
    inlineDirection: 'top-to-bottom'
})

.element {
    block-size: 100px;
    max-inline-size: 400px;
    inline-size: 200px;
    padding-block: 10px 20px;
    margin-inline: auto;
    border-block-width: 2px;
    border-block-style: solid;
}

/* becomes */

.element {
    width: 100px;
    max-height: 400px;
    height: 200px;
    padding-right: 10px;
    padding-left: 20px;
    margin-top: auto;
    margin-bottom: auto;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
}

Each direction must be one of the following:

• top-to-bottom
• bottom-to-top
• left-to-right
• right-to-left

You can't mix two vertical directions or two horizontal directions so for example top-to-bottom and right-to-left are valid, but top-to-bottom and bottom-to-top are not.

Please do note that text-align won't be transformed if inlineDirection becomes vertical.