@csstools/postcss-logical-float-and-clear

PostCSS Logical Float And Clear

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

.element {
	clear: inline-start;
	float: inline-end;
}

/* becomes */

.element {
	clear: left;
	float: right;
}

Usage

Add PostCSS Logical Float And Clear to your project:

npm install postcss @csstools/postcss-logical-float-and-clear --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');

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

PostCSS Logical Float And Clear runs in all Node environments, with special instructions for:

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

Options

inlineDirection

The inlineDirection option allows you to specify the direction of the inline axe. The default value is left-to-right respectively which would match any latin language.

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

postcssLogicalFloatAndClear({
	inlineDirection: 'right-to-left'
})

.element {
	clear: inline-start;
	float: inline-end;
}

/* becomes */

.element {
	clear: right;
	float: left;
}

Each direction must be one of the following:

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

Please do note that transformations won't run if inlineDirection becomes vertical.