npm install @csstools/postcss-logical-viewport-units --save-dev
PostCSS Logical Viewport Units lets you easily use vb
and vi
length units following the CSS-Values-4 Specification.
.foo {
margin: 10vi 20vb;
}
/* becomes */
.foo {
margin: 10vw 20vh;
margin: 10vi 20vb;
}
Add PostCSS Logical Viewport Units to your project:
npm install postcss @csstools/postcss-logical-viewport-units --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLogicalViewportUnits = require('@csstools/postcss-logical-viewport-units');
postcss([
postcssLogicalViewportUnits(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The inlineDirection
option allows you to specify the direction of the inline axe. The default value is left-to-right
, which would match any latin language.
You should tweak this value so that it is specific to your language and writing mode.
postcssLogicalViewportUnits({
inlineDirection: 'top-to-bottom'
})
.foo {
margin: 10vi 20vb;
}
/* becomes */
.foo {
margin: 10vh 20vw;
margin: 10vi 20vb;
}
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 do anything particular for right-to-left
or bottom-to-top
.
The preserve
option determines whether the original notation
is preserved. By default, it is preserved.
postcssLogicalViewportUnits({ preserve: false })
.foo {
margin: 10vi 20vb;
}
/* becomes */
.foo {
margin: 10vw 20vh;
}