px2rem
According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet
Last updated 6 years ago .
· Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install px2rem 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.0                                ...           0.1.0 (7 years ago)
  • 0.5.0                                ...           latest (6 years ago)

19 Versions

  • 0.5.0                                ...           6 years ago
  • 0.4.2                                ...           7 years ago
  • 0.4.1                                ...           7 years ago
  • 0.4.0                                ...           7 years ago
  • 0.3.1                                ...           7 years ago
  • 0.3.0                                ...           7 years ago
  • 0.2.2                                ...           7 years ago
  • 0.2.1                                ...           7 years ago
  • 0.2.0                                ...           7 years ago
  • 0.1.9                                ...           7 years ago
  • 0.1.8                                ...           7 years ago
  • 0.1.7                                ...           7 years ago
  • 0.1.6                                ...           7 years ago
  • 0.1.5                                ...           7 years ago
  • 0.1.4                                ...           7 years ago
  • 0.1.3                                ...           7 years ago
  • 0.1.2                                ...           7 years ago
  • 0.1.1                                ...           7 years ago
  • 0.1.0                                ...           7 years ago
Dependencies (5)
Dev Dependencies (3)

Copyright © npmmirror.com | 浙ICP备15033595号-63 |