Merge pull request #4 from acelan86/master

fix image path

Author: yisibl

lib/index.js

@@ -353,7 +353,7 @@ function imageSetMixin(decl, i) {
         obj.path = "url(" + obj.url + ")";
         obj.whichImg = paths[j][3];
         if (obj.whichImg == "1x" || obj.whichImg == "1x") {
-          var normalSizes = sizeOf(path.join(process.cwd(), obj.url));
+          var normalSizes = sizeOf(_getResourceAbsolutePath(obj.url));
           normalWidth = normalSizes.width + 'px';
           normalHeight = normalSizes.height + 'px';
 
@@ -362,7 +362,7 @@ function imageSetMixin(decl, i) {
             value: obj.path
           });
         } else if (obj.whichImg == "2x" || obj.whichImg == "2x") {
-          var rSizes = sizeOf(path.join(process.cwd(), obj.url)); //2倍图尺寸
+          var rSizes = sizeOf(_getResourceAbsolutePath(obj.url)); //2倍图尺寸
           rWidth = rSizes.width / 2 + 'px';
           rHeight = rSizes.height / 2 + 'px';
           bgSize = rWidth + ' ' + rHeight; //2倍图的宽和高
@@ -405,7 +405,7 @@ function imageSetMixin(decl, i) {
     } else if (decl.value.indexOf('url(') != -1) {
       //没有image-set，执行以下
       var retinaPaths = returnURL(decl.value, reNO_SETURL) //获取第一个url图片的路径
-      var retinaSizes = sizeOf(path.join(process.cwd(), retinaPaths[0][2]));
+      var retinaSizes = sizeOf(_getResourceAbsolutePath(retinaPaths[0][2]));
       normalWidth = retinaSizes.width + 'px';
       normalHeight = retinaSizes.height + 'px';
     }
@@ -481,12 +481,24 @@ function returnURL(val, reg) {
   return paths;
 }
 
+//当前处理文件的路径，可以通过处理函数的opts.from得到
+var _currentProcessFilePath = '';
+//获取css文件中的资源的绝对地址
+function _getResourceAbsolutePath(sourcePath) {
+  return path.resolve(_currentProcessFilePath, sourcePath);
+}
+
 // PostCSS Processor
-var cssprocess = function(css) {
+var cssprocess = function(css, opts) {
+  //保存当前处理文件路径
+  _currentProcessFilePath = path.dirname(opts.from);
   css.eachRule(cssgraceRule);
 }
 
 var pack = function(css, opts) {
+  //保存当前处理文件路径
+  _currentProcessFilePath = path.dirname(opts.from);
+  console.log(_currentProcessFilePath);
   return postcss(cssprocess).process(css, opts).css;
 }
 

test/fixtures/image-set-out.css

@@ -1,8 +1,8 @@
 .foo {
-  background-image: url(./test/img/yuxifan@1x.jpg);
+  background-image: url(../img/yuxifan@1x.jpg);
   background-image: -webkit-image-set(
-                    url(./test/img/yuxifan@1x.jpg) 1x,
-                    url(./test/img/yuxifan@2x.jpg) 2x);
+                    url(../img/yuxifan@1x.jpg) 1x,
+                    url(../img/yuxifan@2x.jpg) 2x);
   width: 320px;
   height: 427px;
 }
@@ -14,7 +14,7 @@
   only screen and (min-resolution: 192dpi),
   only screen and (min-resolution: 2dppx) {
   .foo {
-    background-image: url(./test/img/yuxifan@2x.jpg);
+    background-image: url(../img/yuxifan@2x.jpg);
     background-size: 320px 427px;
 }
 }

test/fixtures/image-set-real.css

@@ -1,8 +1,8 @@
 .foo {
-  background-image: url(./test/img/yuxifan@1x.jpg);
+  background-image: url(../img/yuxifan@1x.jpg);
   background-image: -webkit-image-set(
-                    url(./test/img/yuxifan@1x.jpg) 1x,
-                    url(./test/img/yuxifan@2x.jpg) 2x);
+                    url(../img/yuxifan@1x.jpg) 1x,
+                    url(../img/yuxifan@2x.jpg) 2x);
   width: 320px;
   height: 427px;
 }
@@ -14,7 +14,7 @@
   only screen and (min-resolution: 192dpi),
   only screen and (min-resolution: 2dppx) {
   .foo {
-    background-image: url(./test/img/yuxifan@2x.jpg);
+    background-image: url(../img/yuxifan@2x.jpg);
     background-size: 320px 427px;
 }
 }

test/fixtures/image-set.css

@@ -1,7 +1,7 @@
 .foo {
   background-image: -webkit-image-set(
-                    url(./test/img/yuxifan@1x.jpg) 1x,
-                    url(./test/img/yuxifan@2x.jpg) 2x);
+                    url(../img/yuxifan@1x.jpg) 1x,
+                    url(../img/yuxifan@2x.jpg) 2x);
   width: image-width;
   height: image-height;
 }

test/fixtures/image-size-multiple-out.css

@@ -1,5 +1,5 @@
 .foo {
-  background: url(./test/img/yuxifan@1x.jpg);
+  background: url(../img/yuxifan@1x.jpg);
   border-image: url(../image-width/image-height.png);
   width: 320px;
   height: 427px;

test/fixtures/image-size-multiple-real.css

@@ -1,5 +1,5 @@
 .foo {
-  background: url(./test/img/yuxifan@1x.jpg);
+  background: url(../img/yuxifan@1x.jpg);
   border-image: url(../image-width/image-height.png);
   width: 320px;
   height: 427px;

test/fixtures/image-size-multiple.css

@@ -1,5 +1,5 @@
 .foo {
-  background: url(./test/img/yuxifan@1x.jpg);
+  background: url(../img/yuxifan@1x.jpg);
   border-image: url(../image-width/image-height.png);
   width: image-width;
   height: image-height;

test/fixtures/image-size-out.css

@@ -1,11 +1,11 @@
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   width: 720px;
   height: 719px;
 }
 
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   margin: 720px 719px -719px;
   content: 'image-width';
 }

test/fixtures/image-size-real.css

@@ -1,11 +1,11 @@
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   width: 720px;
   height: 719px;
 }
 
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   margin: 720px 719px -719px;
   content: 'image-width';
 }

test/fixtures/image-size.css

@@ -1,11 +1,11 @@
 .foo {
-  background: url(./test/img/post-and-pre.png);
+  background: url(../img/post-and-pre.png);
   width: image-width;
   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;
   content: 'image-width';
 }