postcss-adaptive-mp-rpx v0.0.3

在原有的基础上加入排除某个文件，or 文件夹

  npm install --save-dev postcss-adaptive-mp-rpx

新增参数 exclude , 直接在配置 option 时传入即可,支持正则

  { 
    rpxUnit: 75 ,
    exclude: /node_modules|folder_name/i
  }

postcss-adaptive

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

Table of Contents

• Requirpxents
• Usage
• Changelog
• License

Requirpxents

Set rpx unit and hairline class. For example:

(function (win, doc) {
  var docEl = doc.documentElement;

  function setRemUnit () {
    var docWidth = docEl.clientWidth;
    var rpx = docWidth / 10;
    docEl.style.fontSize = rpx + 'px';
  }

  win.addEventListener('resize', function () {
    setRemUnit();
  }, false);
  win.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  }, false);

  setRemUnit();

  if (win.devicePixelRatio && win.devicePixelRatio >= 2) {
    var testEl = doc.createElement('div');
    var fakeBody = doc.createElement('body');
    testEl.style.border = '0.5px solid transparent';
    fakeBody.appendChild(testEl);
    docEl.appendChild(fakeBody);
    if (testEl.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.rpxoveChild(fakeBody);
  }
}) (window, document);

Usage

The raw stylesheet only contains @2x style, and if you

• intend to use rpx unit，add /*rpx*/ after the declaration
• don't intend to transform the original value, add /*no*/ after the declaration
• intend to use px unit when autoRem is set to true, add /*px*/ after the declaration

Attention: Dealing with SASS or LESS, only /*...*/ comment can be used, in order to have the comments persisted.

Before processing:

.selector {
  height: 64px;
  width: 150px; /*rpx*/
  padding: 10px; /*no*/
  border-top: 1px solid #ddd;
}

After processing:

.selector {
  height: 32px;
  width: 2rpx;
  padding: 10px;
  border-top: 1px solid #ddd;
}
.hairlines .selector {
  border-top: 0.5px solid #ddd;
}

API

adaptive(config)

Config:

• rpxUnit: number, rpx unit value (default: 75)
• baseDpr: number, base device pixel ratio (default: 2)
• rpxPrecision: number, rpx value precision (default: 6)
• hairlineClass: string, class name of 1px border (default 'hairlines')
• autoRem: boolean, whether to transform to rpx unit (default: false)

Node

npm install postcss-adaptive

var postcss = require('postcss');
var adaptive = require('postcss-adaptive');
var originCssText = '...';
var newCssText = postcss().use(adaptive({ rpxUnit: 75 })).process(originCssText).css;

Gulp

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

gulp.task('default', function () {
  var processors = [adaptive({ rpxUnit: 75 })];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

Webpack

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

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [adaptive({ rpxUnit: 75 })];
  }
}

Grunt

module.exports = function (grunt) {
  grunt.initConfig({
    postcss: {
      options: {
        processors: [
          adaptive({ rpxUnit: 75 })
        ]
      },
      dist: {
        src: 'src/*.css',
        dest: 'build'
      }
    }
  });
  grunt.loadNpmTasks('grunt-postcss');
  grunt.registerTask('default', ['postcss']);
}

Changelog

0.4.0

• Do not generate hairline when the declaration is commented with /*no*/.

0.3.2

• Upgrade postcss version to 6.x.
• The value below 1px will not transfer to rpx.

0.3.1

• Delete minify option, please use other postcss plugins like cssnano instead.

0.3.0

• Support minify option to minify the output css code.

0.2.0

• Support autoRem option.

0.1.4

• Support /*no*/ comment.

0.1.0

• First release.

License

MIT