postcss-media-query-transform

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

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

You should use postcss@8.x

Install

1npm i -D postcss-media-query-transform
2yarn add -D postcss-media-query-transform
3pnpm i -D postcss-media-query-transform

Usage

Use with postcss.config.js

1// postcss.config.js
2module.exports = {
3  plugins: [
4    // for example
5    // require('autoprefixer'),
6    require("postcss-media-query-transform")({
7      mediaQuery: { query: "(min-width: 400px)", scale: 0.5 },
8      propList: ["*"],
9      transformUnit: "px",
10    }),
11  ],
12};

Input/Output

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

1// input
2h1 {
3  margin: 0 0 20px;
4  font-size: 2rpx;
5  line-height: 1.2;
6  letter-spacing: 0.0625px;
7}
8
9// output
10h1 {
11  margin: 0 0 20px;
12  font-size: 2rpx;
13  line-height: 1.2;
14  letter-spacing: 0.0625px;
15}
16
17@media (min-width: 400px) {
18  h1 {
19    letter-spacing: 0.03125px;
20  }
21}

Options

Type: Object | Null Default:

1const defaultOptions = {
2  mediaQuery: { query: "(min-width: 400px)", scale: 0.5 },
3  unitPrecision: 5,
4  selectorBlackList: [],
5  propList: ["font", "font-size", "line-height", "letter-spacing"],
6  transformUnit: "px",
7  exclude: [/node_modules/i],
8  disabled: false,
9};

mediaQuery

Type: MediaQueryScale or MediaQueryScale[]

The media query string to be transformed，and scale value.

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.

exclude

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

The file path to ignore and leave as px.

transformUnit

Type: 'px' | 'rpx' | 'rem'

The transform output unit.

insert

Type: 'before' | 'after'

The insert output postion，you can select insert input before or after.

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 px unit declaration.

1// `Px` or `PX` is ignored by `postcss-rem-to-pixel` but still accepted by browsers
2.ignore {
3  border: 1px solid; // ignored
4  border-width: 2px; // ignored
5}

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