cssgrace - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

 # CSS Grace
 
+## V 2.0.0 (2015-01-26)
+
+\+ Image path supports a relative path.
+\+ Surpporting Base64 encoding images.
+
 ## V 1.0.0 (2014-12-31)
 
 > First release 

lib/index.js

@@ -15,2 +15,3 @@ var path    = require('path'),
 var reBEFORE_AFTER = /::|:(before|after)/gi;
+var reBASE64       = /^data:image\/png;base64,/;
 
@@ -357,3 +358,7 @@
         if (obj.whichImg == "1x" || obj.whichImg == "1x") {
-          var normalSizes = sizeOf(path.join(process.cwd(), obj.url));
+          // var normalSizes = sizeOf(getAbsolutePath(obj.url));
+          var normalSizes = reBASE64.test(obj.url) ?
+            sizeOf(new Buffer(obj.url.replace(reBASE64, ''), 'base64')) :
+            sizeOf(getAbsolutePath(obj.url));
+
           normalWidth = normalSizes.width + 'px';
@@ -367,3 +372,3 @@ normalHeight = normalSizes.height + 'px';
         } else if (obj.whichImg == "2x" || obj.whichImg == "2x") {
-          var rSizes = sizeOf(path.join(process.cwd(), obj.url)); //2倍图尺寸
+          var rSizes = sizeOf(getAbsolutePath(obj.url)); //2倍图尺寸
           rWidth = rSizes.width / 2 + 'px';
@@ -411,3 +416,10 @@ rHeight = rSizes.height / 2 + 'px';
       var retinaPaths = returnURL(decl.value, reNO_SETURL) //获取第一个url图片的路径
-      var retinaSizes = sizeOf(path.join(process.cwd(), retinaPaths[0][2]));
+
+      // var retinaSizes = sizeOf(getAbsolutePath(retinaPaths[0][2]));
+
+      // 计算 base64 图片尺寸
+      var retinaSizes = reBASE64.test(retinaPaths[0][2]) ?
+        sizeOf(new Buffer(retinaPaths[0][2].replace(reBASE64, ''), 'base64')) :
+        sizeOf(getAbsolutePath(retinaPaths[0][2]));
+
       normalWidth = retinaSizes.width + 'px';
@@ -488,4 +500,13 @@ normalHeight = retinaSizes.height + 'px';
 
+//当前处理文件的路径，可以通过处理函数的opts.from得到
+var currentFilePath = '';
+//获取css文件中的资源的绝对地址
+function getAbsolutePath(sourcePath) {
+  return path.resolve(currentFilePath, sourcePath);
+}
+
 // PostCSS Processor
-var cssprocess = function(css) {
+var cssprocess = function(css, opts) {
+  //保存当前处理文件路径
+  currentFilePath = path.dirname(opts.from);
   css.eachRule(cssgraceRule);
@@ -495,2 +516,5 @@ }
 var pack = function(css, opts) {
+  //保存当前处理文件路径
+  currentFilePath = path.dirname(opts.from);
+  console.log(currentFilePath);
   return postcss(cssprocess).process(css, opts).css;
@@ -497,0 +521,0 @@ }

package.json

 {
   "name": "cssgrace",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "CSS postproccessor",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 
 # CSS Grace
 
-  >**从今天起，写简单优雅面向未来的 CSS。**
+[![Build Status](https://travis-ci.org/cssdream/cssgrace.svg?branch=master)](https://travis-ci.org/cssdream/cssgrace) 
+[![NPM Downloads](https://img.shields.io/npm/dm/cssgrace.svg?style=flat)](https://www.npmjs.com/package/cssgrace) 
+[![NPM Version](http://img.shields.io/npm/v/cssgrace.svg?style=flat)](https://www.npmjs.com/package/cssgrace) 
+[![License](https://img.shields.io/npm/l/cssgrace.svg?style=flat)](http://opensource.org/licenses/MIT) 
 
+  >**From now on,writing brief,elegant,future-oriented CSS.**
+
 --------------
 
-CSS Grace 是一个由 PostCSS 驱动，面向未来的 CSS 后处理工具。实现了大部分常用的 IE Hack，获取图片宽高等，position: center 等功能。同时可以配合 Sass/Less 等预处理工具使用，最重要的是它不改变 CSS 原生的语法，让 CSS 写起来更简单，更优雅。
+[简体中文](README-zh.md)
 
+CSS Grace is a plugin for PostCSS.It does not change the original grammar CSS, let CSS to write more simple and more elegant。
 
-![CSS Grace 动画演示](http://gtms03.alicdn.com/tps/i3/TB1OXJaGpXXXXbbXFXXZ.oU0pXX-848-504.gif)
 
+![CSS Grace Gif Demo](http://gtms03.alicdn.com/tps/i3/TB1OXJaGpXXXXbbXFXXZ.oU0pXX-848-504.gif)
 
-* 向前 CSS Grace 可以作为一种 Polyfill 工具，让你可以提前使用一些 CSS3 的新特性。
-* 向后 CSS Grace 可以实现各种旧浏览器的 Hack，让你无需担忧兼容性。
-* 而你只用书写和关心标准的 CSS 属性或属性值。
 
+![post and pre](test/img/post-and-pre.png)
 
-例如，下面的语法糖用来解决闭合浮动的问题：
 
-```css
-.clearfix {
-  *zoom: 1;
-}
-.clearfix:after {
-  clear: both;
-}
-.clearfix:before,
-.clearfix:after {
-  content: '';
-  display: table;
-}
+## Quick start
+
+1. Download and install Node.js.
+
+2. Installation cssgrace.
+
+```console
+npm install cssgrace
 ```
 
-这个语法糖虽然好用，兼容性良好，但在 HTML 中会出现非常多的 `class="clearfix"`。甚至有些地方已经闭合了浮动，有些人为了保险起见，还是随手加上了`class="clearfix"`。o(╯□╰)o
+3. test.js
 
-如此一来代码显得尤为冗余，而且加了很多无语意的 class。更进一步，我们知道如果触发了 BFC 的元素是自带闭合浮动特性的，clearfix 君略感尴尬。
+```console
+npm install chokidar
+```
 
-Q: 那么，CSS Grace 如何解决呢？
+```js
+var fs       = require('fs')
+var cssgrace = require('cssgrace')
 
-> A: 直接使用 `clear: fix` 即可。
+var src = 'src/input.css'
+console.info('Watching…\nModify the input.css and save.')
 
-input:
-
-```css
-.foo {
-  clear: fix;
-}
+chokidar.watch(src, {
+  ignored: /[\/\\]\./,
+  persistent: true
+}).on('all',
+  function(event, path, stats) {
+    var css = fs.readFileSync(src, 'utf8')
+    fs.writeFileSync('build/output.css', cssgrace.pack(css))
+  })
 ```
 
-output:
+4. input.css：
 
 ```css
-.foo {
-  *zoom: 1;
+.foo::after {
+  position: center;
+  width: 210px;
+  height: 80px;
+  background: rgba(112, 26, 0, .3);
 }
-.foo:after {
-  clear: both;
+
+.bar {
+  display: inline-block;
+  opacity: .5;
 }
-.foo:before,
-.foo:after {
-  content: '';
-  display: table;
-}
 ```
 
-Q: 那么，如何解决冗余问题呢？
+5. `node test`，we will get `output.css`.
 
-> A: 还是直接使用 `clear: fix` 即可，\(^o^)/~
-
-智能识别，如果存在触发 BFC 的属性，不生成语法糖。
-
-input:
-
 ```css
-.foo {
-  clear: fix;
-  overflow: hidden; /* 已经可以闭合浮动了 */
+.foo:after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -105px;
+  margin-top: -40px;
+  width: 210px;
+  height: 80px;
+  background: rgba(112, 26, 0, .3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c701a00', endColorstr='#4c701a00');
 }
-```
 
-output:
+:root .foo:after {
+  filter: none\9;
+}
 
-```css
-.foo {
-  clear: fix;
-  overflow: hidden; /* 已经可以闭合浮动了 */
+.bar {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  opacity: .5;
+  filter: alpha(opacity=50);
 }
 ```
 
-就是那么简单！
-
-目前功能处于初步阶段，欢迎大家提出更多意见和想法。
-
-
-## 快速开始
-
-1. 下载并安装 Node.js
-
-2. 新建一个目录，比如 test ，在命令行中切换到该目录，安装 cssgrace。
-
-    ```
-    npm install cssgrace
-    ```
-
-3. 在 test 目录新增一个 test.js，代码如下：
-
-    ```js
-    var fs       = require('fs')
-    var cssgrace = require('cssgrace')
-
-    var src = 'src/input.css'
-    console.info('Watching…\nModify the input.css and save.')
-
-    chokidar.watch(src, {
-      ignored: /[\/\\]\./,
-      persistent: true
-    }).on('all',
-      function(event, path, stats) {
-        var css = fs.readFileSync(src, 'utf8')
-        fs.writeFileSync('build/output.css', cssgrace.pack(css))
-      })
-    ```
-
-4. 在 test 目录新增一个 input.css，注意编码要和 ```fs.readFileSync``` 中的保持一致。输入测试的CSS代码片段，比如：
-
-    ```css
-    .foo::after {
-      position: center;
-      width: 210px;
-      height: 80px;
-      background: rgba(112, 26, 0, .3);
-    }
-
-    .bar {
-      display: inline-block;
-      opacity: .5;
-    }
-    ```
-
-5. 在命令行中执行 `node test`，快去看看 output.css 中发生了什么吧！
-
-    ```css
-    .foo:after {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -105px;
-      margin-top: -40px;
-      width: 210px;
-      height: 80px;
-      background: rgba(112, 26, 0, .3);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c701a00', endColorstr='#4c701a00');
-    }
-
-    :root .foo:after {
-      filter: none\9;
-    }
-
-    .bar {
-      display: inline-block;
-      *display: inline;
-      *zoom: 1;
-      opacity: .5;
-      filter: alpha(opacity=50);
-    }
-    ```
-
 -------------
 
-## 如何使用
+## How to use
 
-###  Node Watch && 配合其他插件
+###  Node watch & With the other plugins
 
-使用 chokidar 模块实时监测 CSS 文件变动，同时可以加载其他插件，灵活扩展。
 
@@ -211,2 +142,6 @@ ```js
 
+```
+npm install grunt-postcss
+```
+
 ```js
@@ -239,2 +174,6 @@ module.exports = function(grunt) {
 
+```
+npm install gulp-postcss
+```
+
 ```js
@@ -259,7 +198,6 @@ var gulp = require('gulp');
 
-## 更多功能
+## More features
 
-### 自动生成 2x 背景图兼容代码
+### Automatic generation of 2x background compatible code
 
-只用使用标准的 image-set 属性即可。
 
@@ -271,4 +209,4 @@ input:
   background-image: -webkit-image-set(
-                    url(./test/img/[e-mail]) 1x,
-                    url(./test/img/[e-mail]) 2x);
+                    url(../img/[e-mail]) 1x,
+                    url(../img/[e-mail]) 2x);
 }
@@ -281,6 +219,6 @@ ```
 .foo {
-  background-image: url(./test/img/[e-mail]);
+  background-image: url(../img/[e-mail]); /* Fallback */
   background-image: -webkit-image-set(
-                    url(./test/img/[e-mail]) 1x,
-                    url(./test/img/[e-mail]) 2x);
+                    url(../img/[e-mail]) 1x,
+                    url(../img/[e-mail]) 2x);
 }
@@ -295,3 +233,3 @@ @media
   .foo {
-    background-image: url(./test/img/[e-mail]);
+    background-image: url(../img/[e-mail]);
     background-size: 320px 427px;
@@ -302,7 +240,6 @@ }
 
-### 获取背景图宽高
+### Get the background image's width or height
 
-使用 image-width 和 image-height 可以直接在其他属性中灵活使用图片的宽高。
+Using the `image-width` and `image-height` to obtain the image's width or height.
 
-而且 url 和引号内的 image-width 和 image-height 不会被转换。
 
@@ -313,3 +250,3 @@ input:
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   width: image-width;
@@ -320,3 +257,3 @@ height: image-height;
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   margin: image-width image-height -image-height;
@@ -331,3 +268,3 @@ content: 'image-width';
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   width: 720px;
@@ -338,3 +275,3 @@ height: 719px;
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   margin: 720px 719px -719px;
@@ -345,5 +282,4 @@ content: 'image-width';
 
-### position:center
 
-已知宽高元素居中，自动计算 margin 取值，麻麻再也不用担心我数学不好了。
+### clear: fix
 
@@ -354,2 +290,51 @@ input:
 .foo {
+  clear: fix;
+}
+```
+
+output:
+
+```css
+.foo {
+  *zoom: 1;
+}
+.foo:after {
+  clear: both;
+}
+.foo:before,
+.foo:after {
+  content: '';
+  display: table;
+}
+```
+
+If there is already can remove floating property, don't generate compatible code.
+
+input:
+
+```css
+.foo {
+  clear: fix;
+  overflow: hidden;
+}
+```
+
+output:
+
+```css
+.foo {
+  overflow: hidden;
+}
+```
+
+
+
+### position:center polyfill
+
+Automatic calculation of margin value, the mother will never have to worry about my math is not good.
+
+input:
+
+```css
+.foo {
   position: center;
@@ -375,9 +360,7 @@ width: 300px;
 
-### 修复常见错误
+### Repair of common errors
 
-#### 浮动或绝对定位元素不用写 display: block
+#### Float or absolutely positioned elements don't write display: block
 
-当存在 float: left|right 或者 position: absolute|fixed 时，会自动删除多余的 display: block/inline-block。
 
-
 input:
@@ -418,5 +401,5 @@
 
-#### 绝对定位元素浮动不生效
+#### Absolutely positioned elements floating effect
 
-存在 position: absolute|fixed 时，会自动删除多余的 float: left/right。
+Remove float: left|right.
 
@@ -440,8 +423,6 @@ input:
 
-### 自动补全漏写属性
+### Missing property auto completion
 
-#### 自动修复 resize
+#### resize
 
-resize 生效 overflow 必须不是默认的 visible。
-
 input:
@@ -474,3 +455,3 @@
 
-#### 自动修复 text-overflow: ellipsis
+#### text-overflow: ellipsis
 
@@ -512,3 +493,2 @@ input:
 
-自动生成 filter。
 
@@ -543,4 +523,2 @@ input:
 
-自动生成 filter。
-
 input:
@@ -587,8 +565,8 @@
 
-## 贡献
+## Contributing
 
-* 安装相关的依赖模块。
-* 尊重编码风格（安装 [EditorConfig](http://editorconfig.org/)）。
-* 在[test](test)目录添加测试用例。
-* 运行测试。
+* Install all the dependent modules.
+* Respect the coding style (Use [EditorConfig](http://editorconfig.org/)).
+* Add test cases in the [test](test) directory.
+* Run the test cases.
 
@@ -600,2 +578,3 @@ ```
 $ npm test
+```
 
@@ -602,0 +581,0 @@ ## [Changelog](CHANGELOG.md)

No alert changes

Improved metrics

Total package byte prevSize

35945

increased by32.6%

Lines of code

452

increased by4.39%

Worsened metrics

Number of lines in readme file

563

decreased by-3.6%

No dependency changes