Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @megalo/px2rpx with all npm packages installed. Try it out:

var px2rpx = require("@megalo/px2rpx")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@megalo/px2rpx v0.1.0

According to one stylesheet, generate rpx version and @1x, @2x and @3x stylesheet


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




RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free