@csstools/postcss-logical-resize

PostCSS Logical Resize

PostCSS Logical Resize lets you use logical, rather than physical, values for resize, following the CSS Logical Properties and Values specification.

.resize-block {
	resize: block;
}

.resize-inline {
	resize: inline;
}

/* becomes */

.resize-block {
	resize: vertical;
}

.resize-inline {
	resize: horizontal;
}

Usage

Add PostCSS Logical Resize to your project:

npm install postcss @csstools/postcss-logical-resize --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssLogicalResize = require('@csstools/postcss-logical-resize');

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

PostCSS Logical Resize 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.

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

.resize-block {
	resize: block;
}

.resize-inline {
	resize: inline;
}

/* becomes */

.resize-block {
	resize: horizontal;
}

.resize-inline {
	resize: vertical;
}

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.