px2rem - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

bin/px2rem.js

@@ -11,3 +11,3 @@ #!/usr/bin/env node
 
-// 字符串转换为合适的类型（thanks to zepto）
+// string to variables of proper type（thanks to zepto）
 function deserializeValue(value) {
@@ -29,3 +29,2 @@ var num;
 
-// 保存文件内容
 function saveFile(filePath, content) {
@@ -40,8 +39,8 @@ fs.createFileSync(filePath);
     .option('-u, --remUnit [value]', 'set `rem` unit value (default: 64)', 64)
-    .option('-x, --threeVersion [value]', 'whether to generate 3x version (default: true)', true)
-    .option('-r, --remVersion [value]', 'whether to generate rem version (default: true)', true)
+    .option('-x, --threeVersion [value]', 'whether to generate @1x, @2x and @3x version stylesheet (default: true)', true)
+    .option('-r, --remVersion [value]', 'whether to generate rem version stylesheet (default: true)', true)
     .option('-b, --baseDpr [value]', 'set base device pixel ratio (default: 2)', 2)
-    .option('-p, --remPrecision [value]', 'set rem precision (default: 2)', 6)
+    .option('-p, --remPrecision [value]', 'set rem value precision (default: 6)', 6)
     .option('-f, --forcePxComment [value]', 'set force px comment (default: `px`)', 'px')
-    .option('-p, --keepComment [value]', 'set not change value comment (default: `no`)', 'no')
+    .option('-p, --keepComment [value]', 'set no transform value comment (default: `no`)', 'no')
     .option('-o, --output [path]', 'the output file dirname')
@@ -77,3 +76,3 @@ .parse(process.argv);
 
-    // 生成3份版本
+    // generate @1x, @2x and @3x version stylesheet
     if (config.threeVersion) {
@@ -88,3 +87,3 @@ for (var dpr = 1; dpr <= 3; dpr++) {
 
-    // 生成rem版本
+    // generate rem version stylesheet
     if (config.remVersion) {
@@ -91,0 +90,0 @@ var newCssText = px2remIns.generateRem(cssText);

package.json

 {
     "name": "px2rem",
-    "description": "根据一份css样式，生成3份尺寸样式和rem样式",
-    "version": "0.1.1",
+    "description": "According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet",
+    "version": "0.1.2",
     "homepage": "http://gitlab.alibaba-inc.com/one-request/px2rem",
@@ -6,0 +6,0 @@ "author": {

README.md

 # px2rem
 
-根据一份css样式，生成1x、2x、3x样式和rem样式。
+According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet.
 
-有：
+This node module contains:
 
-* 独立命令行工具
-* gulp插件（待完善）
+* a CLI tool
+* [gulp plugin](https://www.npmjs.com/package/gulp-px3rem)
 
-供选择使用。
+## Usage
 
-## 使用
+The raw stylesheet only contains @2x style, and if you
 
-在css中只写用2x的尺寸，如果：
+* 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
 
-* 不想转换，例如1px的边框，在样式规则后面添加注释 `/*no*/`
-* 强制使用px，例如字体大小，在样式规则后面添加注释 `/*px*/`
+**Attention: Dealing with SASS or LESS, only /* */ comment can be used, in order to have the comments persisted**
 
-**注意：相应的sass或less文件中的注释钩子只能使用/* */，这样能在编译后的css文件中保留注释。不能使用//**
+### CLI tool
 
-**建议直接sass、less输出到build目录下，然后运行脚本**
-
-### 命令行工具
-
 ```
@@ -29,3 +25,3 @@ $ npm install -g px2rem
 ```
-$ px2rem -r 64 -o build src/*.css  # 把src/目录下的所有css文件以1rem为64px为基准进行单位转换，输出到build目录下
+$ px2rem -o build src/*.css
 ```
@@ -41,12 +37,12 @@
     -u, --remUnit [value]           set `rem` unit value (default: 64)
-    -x, --threeVersion [value]      whether to generate 3x version (default: true)
-    -r, --remVersion [value]        whether to generate rem version (default: true)
+    -x, --threeVersion [value]      whether to generate @1x, @2x and @3x version stylesheet (default: true)
+    -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 precision (default: 2)
+    -p, --remPrecision [value]      set rem value precision (default: 2)
     -f, --forcePxComment [value]    set force px comment (default: `px`)
-    -p, --keepComment [value]       set not change value comment (default: `no`)
+    -p, --keepComment [value]       set no transform value comment (default: `no`)
     -o, --output [path]             the output file dirname
 ```
 
-### 模块使用
+### API
 
@@ -56,12 +52,13 @@ ```
 var px2remIns = new Px2rem([config]);
-var cssText = ... // 原CSS文本
-var newCssText = px2remIns.generateThree(cssText, dpr); // 根据传入的dpr生成@1x、@2x、@3x样式
-var newCssText = px2remIns.generateRem(cssText); // px -> rem
+var originCssText = '...';
+var dpr = 2;
+var newCssText = px2remIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet
+var newCssText = px2remIns.generateRem(originCssText); // generate rem version stylesheet
 ```
 
-### 效果示例
+### Example
 
-#### 处理前：
+#### Pre processing:
 
-一份样式模板：
+One raw stylesheet: `test.css`
 
@@ -77,5 +74,5 @@ ```
 
-#### 处理后：
+#### After processing:
 
-rem版本：
+Rem version: `test.debug.css`
 
@@ -101,3 +98,3 @@ ```
 
-1x版本：
+@1x version: `test1x.debug.css`
 
@@ -113,3 +110,3 @@ ```
 
-2x版本：
+@2x version: `test2x.debug.css`
 
@@ -125,3 +122,3 @@ ```
 
-3x版本：
+@3x version: `test3x.debug.css`
 
@@ -137,8 +134,13 @@ ```
 
-## 实现方案
+## Technical proposal
 
-注释钩子 + css语法树解析
+comment hook + css parser
 
-后期优化：
+TODO:
 
-* 支持Media Query和Animation的keyframes
+* Support Media Query && Animation的keyframes
+
+## License
+
+MIT
+

src/px2rem.js

@@ -7,7 +7,7 @@ var css = require('css');
 var defaultConfig = {
-    baseDpr: 2,             // 基准devicePixelRatio，默认为2
-    remUnit: 64,            // rem基准像素，默认为64
-    remPrecision: 6,        // rem计算精度，默认为6，即保留小数点后6位
-    forcePxComment: 'px',   // 不转换为rem的注释，默认为"px"
-    keepComment: 'no'       // 不参与转换的注释，默认为"no"，如1px的边框
+    baseDpr: 2,             // base device pixel ratio (default: 2)
+    remUnit: 64,            // rem unit value (default: 64)
+    remPrecision: 6,        // rem value precision (default: 6)
+    forcePxComment: 'px',   // force px comment (default: `px`)
+    keepComment: 'no'       // no transform value comment (default: `no`)
 };
@@ -22,3 +22,3 @@
 
-// 生成3份版本
+// generate @1x, @2x and @3x version stylesheet
 Px2rem.prototype.generateThree = function(cssText, dpr) {
@@ -34,14 +34,14 @@ dpr = dpr || 2;
         rule.declarations.forEach(function(declaration, i) {
-            // 需要转换：样式规则声明 && 含有px
+            // need transform: declaration && commented 'px'
             if (declaration.type === 'declaration' && /px/.test(declaration.value)) {
                 var nextDeclaration = rule.declarations[i + 1];
-                if (nextDeclaration && nextDeclaration.type === 'comment') { // 下一条规则是注释
-                    if (nextDeclaration.comment.trim() === config.keepComment) { // 不用转换标记
+                if (nextDeclaration && nextDeclaration.type === 'comment') { // next next declaration is comment
+                    if (nextDeclaration.comment.trim() === config.keepComment) { // no transform
                         nextDeclaration.toDelete = true;
                         return;
                     }
-                    if (nextDeclaration.comment.trim() === config.forcePxComment) { // 强制使用px
+                    if (nextDeclaration.comment.trim() === config.forcePxComment) { // force px
                         nextDeclaration.toDelete = true;
                     }
-                } else { // 普通转换
+                } else { // common transform
                     declaration.value = self._getCalcValue('px', declaration.value, dpr);
@@ -57,3 +57,3 @@ }
 
-// 生成rem版本
+// generate rem version stylesheet
 Px2rem.prototype.generateRem = function(cssText) {
@@ -68,3 +68,3 @@ var self = this;
         }
-        // 生成3份带[data-dpr]前缀的选择器，供强制用px的使用
+        // generate 3 new rules which has [data-dpr]
         var newRules = [];
@@ -83,8 +83,9 @@ for (var dpr = 1; dpr <= 3; dpr++) {
         rule.declarations.forEach(function(declaration, i) {
-            // 需要转换：样式规则声明 && 含有px
+            // need transform: declaration && commented 'px'
             if (declaration.type === 'declaration' && /px/.test(declaration.value)) {
                 var nextDeclaration = rule.declarations[i + 1];
-                if (nextDeclaration && nextDeclaration.type === 'comment') { // 下一条规则是注释
-                    if (nextDeclaration.comment.trim() === config.forcePxComment) { // 强制使用px，不转换为rem
-                        for (var dpr = 1; dpr <= 3; dpr++) { // 生成3份
+                if (nextDeclaration && nextDeclaration.type === 'comment') { // next next declaration is comment
+                    if (nextDeclaration.comment.trim() === config.forcePxComment) { // force px
+                        // generate 3 new declarations and put them in the new rules which has [data-dpr]
+                        for (var dpr = 1; dpr <= 3; dpr++) {
                             var newDeclaration = {};
@@ -98,7 +99,7 @@ extend(true, newDeclaration, declaration);
                     }
-                    if (nextDeclaration.comment.trim() === config.keepComment) { // 不参与转换
+                    if (nextDeclaration.comment.trim() === config.keepComment) { // no transform
                         nextDeclaration.toDelete = true;
                         return;
                     }
-                } else { // 普通转换
+                } else { // common transform
                     declaration.value = self._getCalcValue('rem', declaration.value);
@@ -116,3 +117,3 @@ }
 
-    // 在原样式表尾部追加新的强制使用px的样式规则
+    // append the declarations which are forced to use px in the end of origin stylesheet
     newRulesList.forEach(function(rule) {
@@ -127,3 +128,3 @@ astObj.stylesheet.rules.push(rule);
 
-// 删除ast树中需要删除的内容，包括强制使用px的样式规则、标记注释
+// delete no use info in ast tree
 Px2rem.prototype._deleteNouseRules = function(astObj) {
@@ -148,3 +149,3 @@ astObj.stylesheet.rules.forEach(function(rule) {
 
-// 获取px或rem的计算值
+// get calculated value of px or rem
 Px2rem.prototype._getCalcValue = function(type, value, dpr) {
@@ -165,3 +166,3 @@ var self = this;
                 var remValue = $1 / config.remUnit;
-                if (parseInt(remValue) != remValue) { // 对小数控制精度
+                if (parseInt(remValue) != remValue) { // control decimal precision
                     remValue = parseFloat(remValue.toFixed(config.remPrecision));
@@ -168,0 +169,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

50106

increased by0.25%

Number of lines in readme file

139

increased by1.46%

No dependency changes