px2rem

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

This set of tools contains:

Usage

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
intend to use px by force，eg: font-size, add /*px*/ after the declaration

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

CLI tool

$ npm install -g px2rem

$ px2rem -o build src/*.css

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

  Options:

    -h, --help                      output usage information
    -V, --version                   output the version number
    -u, --remUnit [value]           set `rem` unit value (default: 75)
    -x, --threeVersion [value]      whether to generate @1x, @2x and @3x version stylesheet (default: false)
    -r, --remVersion [value]        whether to generate rem version stylesheet (default: true)
    -b, --baseDpr [value]           set base device pixel ratio (default: 2)
    -p, --remPrecision [value]      set rem value precision (default: 6)
    -o, --output [path]             the output file dirname

API

var Px2rem = require('px2rem');
var px2remIns = new Px2rem([config]);
var originCssText = '...';
var dpr = 2;
var newCssText = px2remIns.generateRem(originCssText); // generate rem version stylesheet
var newCssText = px2remIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet

Example

Pre processing:

One raw stylesheet: test.css

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

After processing:

Rem version: test.debug.css

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

@1x version: test1x.debug.css

.selector {
    width: 75px;
    height: 32px;
    font-size: 14px;
    border: 1px solid #ddd;
}

@2x version: test2x.debug.css

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

@3x version: test3x.debug.css

.selector {
    width: 225px;
    height: 96px;
    font-size: 42px;
    border: 1px solid #ddd;
}

Technical proposal

comment hook + css parser

Change Log

0.5.0

Support Animation keyframes (no /*px*/ comment).

0.4.2

The generated [data-dpr] rules follow the origin rule, no longer placed at the end of the whole style sheet.
Optimize 0px, do not generate 3 [data-dpr] rules.

0.3.1

Change default remUnit to 75.
Delete comment config.
Don't generate @1x, @2x and @3x version stylesheet by default.

0.2.2

Support media query.

0.1.8

Fix cli option duplication bug.
Fix regular expression bug.
Fix common comments bug which affects rem transformation.

License

MIT

Current Tags

0.1.0 ... 0.1.0 (10 years ago)
0.5.0 ... latest (9 years ago)