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.

Example

Input

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

Output

1.demo {
2  font-size: 1.5rem; /* Simple */
3  padding: 0.3125rem 0.625rem; /* Multiple values */
4  margin: 0.625rem 0.5rem; /* Existing rem */
5  border-bottom: 0.0625rem solid black; /* Multiple mixed values */
6  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee; /* Comma-separated values */
7  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; /* Alternate use */
8}

Options

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

1.demo {
2  font-size: 24px;
3  font-size: 2.4rem; /* Simple */
4  padding: 5px 10px;
5  padding: 0.5rem 1rem; /* Multiple values */
6  margin: 10px 5px;
7  margin: 1rem 0.5rem; /* Existing rem */
8  border-bottom: 1px solid black;
9  border-bottom: 0.1rem solid black; /* Multiple mixed values */
10  box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
11  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee; /* Comma-separated values */
12  text-shadow: 1px 1px #eee, -1px 0 #eee;
13  text-shadow: 0.1rem 0.1rem #eee, -0.1rem 0 #eee; /* Alternate use */
14}

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

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

Usage

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

1postcss([require("postcss-rem")]);

Example with custom options:

1postcss([
2  require("postcss-rem")({
3    name: "convert-rem", // Default to 'rem-convert'
4    baseline: 10,        // Default to 16
5    // convert: "px",    // Default to 'rem'
6    fallback: true,      // Default to false
7    precision: 6,        // Default to 5
8  }),
9]);

See PostCSS docs for examples for your environment.