px2rem

    0.5.0 • Public • Published

    px2rem

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

    NPM version Build status Test coverage Downloads

    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

    Keywords

    Install

    npm i px2rem

    DownloadsWeekly Downloads

    3,986

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • songsiqi