postcss-rem 

[PostCSS] plugin to use rem units with optional pixel fallback. Based on sass-rem.

Breaking change in 3.0: changed default function name to rem-convert as CSS now use rem() for calculating the remainder.

See also: startijenn-rem, vanilla JavaScript version.

[postcss]: https://github.com/postcss/postcss

Example

$3

``scss
.demo {
font-size: rem-convert(24px); / Simple /
padding: rem-convert(5px 10px); / Multiple values /
margin: rem-convert(10px 0.5rem); / Existing rem /
border-bottom: rem-convert(1px solid black); / Multiple mixed values /
box-shadow: rem-convert(
0 0 2px #ccc,
inset 0 0 5px #eee
); / Comma-separated values /
text-shadow: rem-convert(1px 1px) #eee, rem-convert(-1px) 0 #eee; / Alternate use /
}
`

$3

`css
.demo {
font-size: 1.5rem; / Simple /
padding: 0.3125rem 0.625rem; / Multiple values /
margin: 0.625rem 0.5rem; / Existing rem /
border-bottom: 0.0625rem solid black; / Multiple mixed values /
box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee; / Comma-separated values /
text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; / Alternate use /
}
`

Options

With baseline to 10 (html { font-size: 62.5%; }) and fallback to true:

`css
.demo {
font-size: 24px;
font-size: 2.4rem; / Simple /
padding: 5px 10px;
padding: 0.5rem 1rem; / Multiple values /
margin: 10px 5px;
margin: 1rem 0.5rem; / Existing rem /
border-bottom: 1px solid black;
border-bottom: 0.1rem solid black; / Multiple mixed values /
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee; / Comma-separated values /
text-shadow: 1px 1px #eee, -1px 0 #eee;
text-shadow: 0.1rem 0.1rem #eee, -0.1rem 0 #eee; / Alternate use /
}
`

With convert to px (for a lt-ie9 only stylesheet for example):

`css
.demo {
font-size: 24px; / Simple /
padding: 5px 10px; / Multiple values /
margin: 10px 8px; / Existing rem /
border-bottom: 1px solid black; / Multiple mixed values /
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee; / Comma-separated values /
text-shadow: 1px 1px #eee, -1px 0 #eee; / Alternate use /
}
`

Usage

Install with npm i postcss-rem and use with [PostCSS]:

`js
postcss([require("postcss-rem")]);
`

Example with custom options:

`js
postcss([
require("postcss-rem")({
name: "convert-rem", // Default to 'rem-convert'
baseline: 10, // Default to 16
// convert: "px", // Default to 'rem'
fallback: true, // Default to false
precision: 6, // Default to 5
}),
]);
``

See [PostCSS] docs for examples for your environment.