According to one stylesheet, generate rpx version and @1x, @2x and @3x stylesheet
Last updated a year ago by zwwill .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @megalo/px2rpx 
SYNC missed versions from official npm registry.


According to one stylesheet, generate rpx version.

NPM version Build status Test coverage Downloads


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

  • don't intend to transform the original value, eg: 1px border, add /*no*/ after the declaration

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


var Px2rpx = require('@megalojs/px2rpx');
var px2rpxIns = new Px2rpx({
  {rpxUnit: 0.5}
var originCssText = '...';
var newCssText = px2rpxIns.generateRpx(originCssText); // generate rpx version stylesheet


Pre processing:

One raw stylesheet: test.css

.selector {
  width: 350px;
  height: 60px; 
  font-size: 20px; 
  border: 1px solid #ddd; /*no*/

After processing:

Rpx version: test.debug.css

.selector {
  width: 750rpx;
  height: 120rpx;
  font-size: 40rpx;
  border: 1px solid #ddd;

Technical proposal

comment hook + css parser

Change Log




Current Tags

  • 0.1.0                                ...           latest (a year ago)

2 Versions

  • 0.1.0                                ...           a year ago
  • 0.0.2                                ...           2 years ago
Today 2
This Week 7
This Month 19
Last Day 1
Last Week 7
Last Month 24
Dependencies (5)
Dev Dependencies (3)

Copyright 2014 - 2017 © taobao.org |