JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1586774
  • Score
    100M100P100Q244601F
  • License CC0-1.0

Use vb and vi length units in CSS

Package Exports

  • @csstools/postcss-logical-viewport-units

Readme

PostCSS Logical Viewport Units PostCSS Logo

npm version CSS Standard Status Build Status Discord

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;
}

Usage

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 */);

PostCSS Logical Viewport Units runs in all Node environments, with special instructions for:

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.

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.

preserve

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;
}