postcss-rem-to-responsive-pixel

A plugin for PostCSS that generates px or rpx units from rem units.

• Rewrite with typescript and well tested.
• TransformUnit Support px and rpx!

If you still use postcss@7.x, you should use postcss-rem-to-responsive-pixel@5.x > See version 6 breaking changes

Install

1npm i -D postcss-rem-to-responsive-pixel
2yarn add -D postcss-rem-to-responsive-pixel
3pnpm i -D postcss-rem-to-responsive-pixel

Usage

Use with postcss.config.js

1// postcss.config.js
2module.exports = {
3  plugins: [
4    // for example
5    // require('autoprefixer'),
6    // require('tailwindcss'),
7    require('postcss-rem-to-responsive-pixel')({
8      rootValue: 32,
9      propList: ['*'],
10      transformUnit: 'rpx',
11    }),
12  ],
13}

When you use tailwindcss to write your website or miniprogram, the default unit is rem, so sometimes we have to transform our unit to px or rpx.

1// postcss.config.js
2module.exports = {
3  plugins: [
4    require('tailwindcss'),
5    require('postcss-rem-to-responsive-pixel')({
6      rootValue: 32,
7      propList: ['*'],
8      transformUnit: 'rpx',
9    }),
10  ],
11}

Input/Output

With the default settings, only font related properties are targeted.

1// input
2h1 {
3  margin: 0 0 20px;
4  font-size: 2rem;
5  line-height: 1.2;
6  letter-spacing: 0.0625rem;
7}
8
9// output
10h1 {
11  margin: 0 0 20px;
12  font-size: 64rpx;
13  line-height: 1.2;
14  letter-spacing: 2rpx;
15}

Options

Type: Object | Null Default:

1const defaultOptions = {
2  rootValue: 16,
3  unitPrecision: 5,
4  selectorBlackList: [],
5  propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
6  replace: true,
7  mediaQuery: false,
8  minRemValue: 0,
9  exclude: [/node_modules/i],
10  transformUnit: 'px',
11  disabled: false
12}

rootValue

Type: number

The root element font size.

unitPrecision

Type: number

The decimal precision px units are allowed to use, floored (rounding down on half).

propList

Type: (string | RegExp)[]

The properties that can change from rem to px.

selectorBlackList

Type: (string | RegExp)[]

The selectors to ignore and leave as rem.

replace

Type: boolean

replaces rules containing rems instead of adding fallbacks.

mediaQuery

Type: boolean

Allow rem to be converted in media queries.

minRemValue

Type: number

Set the minimum rem value to replace.

exclude

Type: (string | RegExp)[] | ((filePath: string) => boolean)

The file path to ignore and leave as px.

transformUnit

Type: 'px' | 'rpx'

The transform output unit.

disabled

Type: boolean

If disable this plugin.

A message about ignoring properties

Currently, the easiest way to have a single property ignored is to use a capital in the rem unit declaration.

1// `rem` is converted to `px`
2.convert {
3  font-size: 1rem; // converted to 16px
4}
5
6// `Rem` or `REM` is ignored by `postcss-rem-to-pixel` but still accepted by browsers
7.ignore {
8  border: 1rem solid; // ignored
9  border-width: 2rem; // ignored
10}

Thanks to the author of postcss-rem-to-pixel and postcss-pxtorem.