postcss-flexible

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

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')({remUnit: 75})]
  }
}

Example

Before processing:

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

After processing:

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

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

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

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

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

Change Log

0.5.0

• add: generate different css files with fontGear
• support custom fontGear
• support custom enableFontSetting
• support custom addFontSizeToSelector
• support custom outputCSSFile

0.4.0

• support custom dprList

0.3.0

• add option desktop and addPrefixToSelector

0.1.0

• handle url()

0.0.3

• add dpr() and rem()

0.0.0

• First release.

License

MIT