px2rem-stzhang

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

This set of tools contains:

• a CLI tool
• gulp plugin
• webpack loader
• postcss plugin

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-stzhang

$ 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
    -m, --minPixelValue [value]     set the minimum pixel value to replace. (default: 0)

API

var Px2rem = require('px2rem-stzhang');
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

1.0.0

• 使用schema-utils对被输入的配置对象做数据结构验证。
• 添加新的配置项minPixelValue数字类型（缺省值为0）。
  • 当样式px值小于等于minPixelValue时，就绕过px2rem处理。
• 添加新配置项blackList对象类型
  • 数据结构：
    • [{selector: string | RegExp; property: string | RegExp; type: 'AND' | 'OR'}, ...]
    • selector与property若是字符串类型，遵循被包含匹配规则。也就是说，若被指定的css selector片段被包含，就认定为匹配。
    • type代表selector与property之间的逻辑运算关系：与 / 或。
  • 功能：满足【黑清单】过滤条的样式属性皆绕过px2rem处理。

全新配置对象如下：

new Px2rem({
    baseDpr: 2,           // base device pixel ratio (default: 2)
    remUnit: 75,          // rem unit value (default: 75)
    remPrecision: 6,      // rem value precision (default: 6)
    forcePxComment: 'px', // force px comment (default: `px`)
    keepComment: 'no',    // no transform value comment (default: `no`)
    minPixelValue: 0,     // Set the minimum pixel value to replace.
    blackList: [/* {      The condition to ignore and leave as px.
        selector: string | RegExp,
        property: string | RegExp,
        type: 'AND' | 'OR'
    } */]
})

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