postcss-vr-pr

PostCSS plugin that extends postcss-pr with added support for postcss-vertical-rhythm. Refer to the other plugins for additonal documentation. The examples below assume an understanding of postcss-pr and postcss-vertical-rhythm. Basically, nothing changes other than adding a set of parentheses around your 'vr' value. The plugin handles the rest.

Write this:

:root {
  line-height: 1.5;
}

section {
  margin-bottom: (1vr)pr;
  padding-top: (.5vr)pr;
}

postcss-vertical-rhythm runs first:

:root {
  line-height: 1.5;
}

section {
  margin-bottom: (24px)pr;
  padding-top: (12px)pr;
}

Now it's postcss-pr's turn:

:root {
  line-height: 1.5;
}

section {
  margin-bottom: 1.5rem;
  padding-top: .75rem;
}

Installation (not yet active)

$ npm install postcss-vr-pr

Usage

postcss([ require('postcss-pr') ])

See PostCSS docs for examples for your environment.

Options

rootSelector

• Type: string
• Default: :root

The selector where the font-size is set.

unit

• Type: string
• Default: pr

The unit to be used in your CSS.

fontSize

• Type: number
• Default: 16

The default root font size. Used only when a font size definition in the root element is not found.

License

MIT - James Kolce