rpx2rem

rpx2rem

fork from px2rem convert rpx unit to rem

This set of tools contains:

• a CLI tool
• webpack loader
• postcss plugin

Usage

CLI tool

$ npm install -g rpx2rem

$ rpx2rem -o build src/*.css

  Usage: rpx2rem [options] <file...>

  Options:

    -h, --help                      output usage information
    -V, --version                   output the version number
    -u, --remUnit [value]           set `rem` unit value (default: 100)    
    -r, --remVersion [value]        whether to generate rem version stylesheet (default: true)
    -p, --remPrecision [value]      set rem value precision (default: 6)
    -o, --output [path]             the output file dirname

API

var Rpx2rem = require('rpx2rem');
var rpx2remIns = new Rpx2rem([config]);
var originCssText = '...';
var newCssText = rpx2remIns.generateRem(originCssText); // generate rem version

Example

Pre processing:

One raw stylesheet: test.css

.selector {
  width: 150rpx;
  height: 64rpx;
  font-size: 28rpx;
  border: 1px solid #ddd;
}

After processing:

rpx version: test.1.css

.selector {
  width: 150rpx;
  height: 64rpx;
  font-size: 28rpx;
  border: 1px solid #ddd;
}

rem version: test.1.css

.selector {
  width: 1.5rem;
  height: 0.64rem;
  font-size: 0.28rem;
  border: 1px solid #ddd;
}

Technical proposal

comment hook + css parser

Change Log

License

MIT