postcss-adaptive-extra

A postcss plugin that calculates and generates adaptive css code, such as rem and 0.5px borders for retina devices.

Depend on postcss-adaptive add add extra options based on path.

Usage

more to see postcss-adaptive.

API

adaptive-extra(config)

Config:

• remUnit: number, rem unit value (default: 75)
• baseDpr: number, base device pixel ratio (default: 2)
• remPrecision: number, rem value precision (default: 6)
• hairlineClass: string, class name of 1px border (default 'hairlines')
• autoRem: boolean, whether to transform to rem unit (default: false)
• extra:object, setting extra rules based on path

Node

npm install postcss-adaptive-extra

Webpack

var adaptive = require('postcss-adaptive-extra');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [
      adaptive({
        remUnit: 75,
        autoRem:true,
        // extra:{
        //   path:/node_modules\\antd-mobile/,
        //   remUnit: 37.5
        // }
        // //or
        extra: [{
          path: /node_modules\\vant/,
          remUnit: 37.5
        }, {
          path: /node_modules\\swiper/,
          autoRem: false,
          baseDpr: 1
        }]
      })
    ];
  }
}

Changelog

1.0.0

• First release.

License

MIT