PostCSS csstransform

小程序 rpx 单位转换工具, 支持 rpx/px 单位 转化成 rm, vw 单位，支持H5开发

Install

$ npm install postcss-rpx2vw -S

Options

参数默认值如下：

const DEFAULT_EAPP_OPTIONS = {
  platform: 'eapp',
  designWidth: 750,
  cssUnit: 'rpx',
  targetUnit: 'vw'
}

Usage

var fs = require('fs');
var postcss = require('postcss');
var rpx2vw = require('postcss-rpx2vw');
var css = fs.readFileSync('rpx.css', 'utf8');
var options = {};
var processedCss = postcss(pxtorem(options)).process(css).css;

fs.writeFile('vw.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('rpx2vw file written.');
});

Use width gulp-postcss

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var rpx2vw = require('postcss-rpx2vw');

gulp.task('css', function () {

    var processors = [
        autoprefixer({
            browsers: 'last 1 version'
        }),
        rpx2vw({
            replace: true
        })
    ];

    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

Use with postcss

var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('postcss-pxtransform');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
    replace: false
};
var processedCss = postcss(pxtorem(options)).process(css).css;

fs.writeFile('main-rem.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('Rem file written.');
});

Input/Output

rpx2vw

rpx2vw 配置下，rpx单位都会被转化成以 750 视觉搞为单位的 vw

options = {
  cssUnit: 'rpx',
  targetUnit: 'vw'
}

/* input */
body {
  width: 750rpx;
}

/* h5 output */
body {
  width: 100vw;
}

rpx2rem

rpx2rem 配置下，rpx单位都会被转化成以 750 视觉搞为单位的 rem

options = {
  cssUnit: 'rpx',
  targetUnit: 'rem'
}

/* input */
body {
  width: 750rpx;
}

/* h5 output */
body {
  width: 16rem;
}

px2rem or px2vm

options = {
  cssUnit: 'rpx', // or setting px
  targetUnit: 'rem' // or setting vw
}

/* input */
body {
  width: 750px;
}

/* h5 output */
body {
  width: 16rem;
}

Ignore

配置白名单属性

  it('5 should not replace white list', function () {
    var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
    var expected = '.rule { font-size: 0.4rem; margin: 0.4rem; margin-left: 5px; padding: 5px; padding-right: 0.4rem }'
    var options = {
      designWidth: 640,
      cssUnit: 'px',
      targetUnit: 'rem',
      propWhiteList: ['font*', 'margin*', '!margin-left', '*-right', 'pad']
    }
    var processed = postcss(pxtovw(options)).process(css).css

    expect(processed).toBe(expected)
  });

License

MIT ©