postcss-pe

PostCSS plugin that defines a pe unit that transforms a value in px to output its equivalent in em.

Write this:

1:root {
2  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
3}
4
5section {
6  margin-bottom: 24pe;
7  padding-top: 32pe;
8}
9
10.othersection {
11  font-size: 48pe;
12}
13
14/* Note the slash character to set the parent font-size */
15.othersection article {
16  margin-top: 96/48pe;
17}

And get this:

1:root {
2  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
3}
4
5section {
6  margin-bottom: 1.5em;
7  padding-top: 2em;
8}
9
10.othersection {
11  font-size: 3em;
12}
13
14.othersection article {
15  margin-top: 2em;
16}

Installation

$ npm install postcss-pe

Usage

Add the plugin

1postcss([ require('postcss-pe') ])

See PostCSS docs for examples for your environment.

Write your css

You can write sizes in two different forms:

1. {value}/[parentSize]pe. e.g. 24/16pe which will produce 1.5em
2. {value}pe. e.g. 24pe which will produce 1.5em if divider is 16px.

Looking for divider

Plugin tries to find a divider by next steps:

1. Explicit option rootFontSize, e.g. rootFontSize: 16.
2. If no rootFontSize, the plugin will use the font-size in the root element. :root by default.
3. If no root element, then 16px will be assumed.

Options

rootSelector

• Type: string
• Default: :root

The selector where the font-size is set. Used when the parent size of the element is omitted.

unit

• Type: string
• Default: pe

The unit to be used in your CSS.

rootFontSize

• Type: number
• Default: null

The default root font size.

followRuleFontSize

• Type: boolean
• Default: false

Plugin retrieves font-size value declared in each css rule and use it as a divider for this rule. If there is no font-size, it defines in default way. followRuleFontSize works only for pe units.

followRuleFontSize: true

1/* From */
2p {
3	font-size: 24pe; /* 24/16 */
4	margin: 24pe; /* 24/24 */
5}
6
7/* To */
8p {
9	font-size: 1.5em;
10	margin: 1em;
11}

followRuleFontSize: false

1/* From */
2p {
3	font-size: 24pe; /* 24/16 */
4	margin: 24pe; /* 24/16 */
5}
6
7/* To */
8p {
9	font-size: 1.5em;
10	margin: 1.5em;
11}

License

MIT - James Kolce