npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

px2rpx

0.5.3 • Public • Published

px2rpx

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

NPM version 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 px2rpx
$ px2rpx -o build src/*.wxss
  Usage: px2rpx [options] <file...>

  Options:

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

API

var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx([config]);
var originCssText = '...';
var dpr = 2;
var newCssText = px2rpxIns.generaterpx(originCssText); // generate rpx version stylesheet
var newCssText = px2rpxIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet

License

MIT

Keywords

install

npm i px2rpx

Downloadsweekly downloads

858

version

0.5.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability