postcss-flexible-rpx

Forked from postcss-flexible

This is a postcss plugin for translatingrx, rem(...), dpr(...), url(...). Similar to px2rem, but using custom function istead of comments for syntax.

rpx is to replace the rem(...) because the rpx is more concise. Futhermore, rx is to replace rpx for concise.

Install

npm i postcss-flexible-rpx -D

Usage

Webpack

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    // remUnit defaults to 75
    return [require('postcss-flexible-rpx')({remUnit: 75})]
  }
}

Example

Before processing:

.selector {
  font-size: dpr(32px);
  width: 75rx;
  height: rem(75px);
  line-height: 3;
  /* replace all @[1-3]x in urls: `/a/@2x/x.png`, `/a@2x/x.png` or `/a/[e-mail]` */
  background-image: url(/images/[e-mail]);
}

After processing:

.selector {
  width: 1rem;
  height: 1rem;
  line-height: 3;
}

[data-dpr="1"] .selector {
  font-size: 16px;
  background-image: url(/images/[e-mail]);
}

[data-dpr="2"] .selector {
  font-size: 32px;
  background-image: url(/images/[e-mail]);
}

[data-dpr="3"] .selector {
  font-size: 48px;
  background-image: url(/images/[e-mail]);
}

options

• desktop: boolean, default false
• baseDpr: number, default 2
• remUnit: number, default 75
• remPrecision: number, default 6
• addPrefixToSelector: function
• dprList: array, default [3, 2, 1]
• fontGear: array, default [-1, 0, 1, 2, 3, 4]
• enableFontSetting: boolean, default false
• addFontSizeToSelector: function
• outputCSSFile: function