fis-spriter-csssprites - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

libs/css/rules.js

@@ -12,5 +12,6 @@ /*
         , _ = fis.util
-        , __background_re = /(?:\/\*[\s\S]*?(?:\*\/|$))|\bbackground(?:-image)?:([\s\S]*?)(?:;|$)|background-position:([\s\S]*?)(?:;|$)|background-repeat:([\s\S]*?)(?:;|$)/gi
+        , __background_re = /(?:\/\*[\s\S]*?(?:\*\/|$))|\bbackground(?:-image)?:([\s\S]*?)(?:;|$)|background-position:([\s\S]*?)(?:;|$)|background-repeat:([\s\S]*?)(?:;|$)|background-size:([\s\S]*?)(?:;|$)/gi
         , __image_url_re = /url\s*\(\s*("(?:[^\\"\r\n\f]|\\[\s\S])*"|'(?:[^\\'\n\r\f]|\\[\s\S])*'|[^)}]+)\s*\)/i
         , __support_position_re = /(0|[+-]?(?:\d*\.|)\d+px|left|right)\s*(0|[+-]?(?:\d*\.|)\d+px|top)/i
+        , __support_size_re = /(\d+px)\s*(\d+px)/i //只支持px
         , __repeat_re = /\brepeat-(x|y)/i
@@ -25,2 +26,3 @@ , __sprites_re = /[?&]__sprite/i
     self.repeat = false;
+    self.size = [-1, -1];
 
@@ -59,3 +61,3 @@ self._position = [0, 0];
     self._css = css.replace(__background_re,
-        function(m, image, position, repeat) {
+        function(m, image, position, repeat, size) {
             var res, info;
@@ -99,2 +101,10 @@ if (image) {
             }
+
+            if (size) {
+                res = size.match(__support_size_re);
+                if (res) {
+                    self.size[0] = parseFloat(res[1]);
+                    self.size[1] = parseFloat(res[2]);
+                }
+            }
             return __sprites_hook_ld + m + __sprites_hook_rd;
@@ -101,0 +111,0 @@ }

libs/image.js

@@ -43,3 +43,3 @@ /*
     Image.setLimit(settings.width_limit, settings.height_limit);
-
+    var that = this;
     this.file = file;
@@ -53,26 +53,56 @@ this.ret = ret;
 
-    var list_x = [];
-    var list_y = [];
-    var list_z = [];
+    var list_ = {};
+    var scales = {};
+
+    function getImage(release) {
+        if (that.images.hasOwnProperty(release)) {
+            return that.images[release];
+        }
+        return false;
+    }
+
+    function insertToObject(o, key, elm) {
+        if (o[key]) {
+            o[key].push(elm);
+        } else {
+            o[key] = [elm];
+        }
+    }
+
     fis.util.map(list, function (k, bg) {
-        if (bg.getDirect() === 'x') {
-            list_x.push(bg);
-        } else if (bg.getDirect() === 'y') {
-            list_y.push(bg);
-        } else if (bg.getDirect() === 'z') {
-            list_z.push(bg);
+        var image_ = Image(getImage(bg.getImageUrl()).getContent());
+        var direct = bg.getDirect();
+
+        bg.image_ = image_;
+        
+        var scale_ = bg.size[0] / image_.size().width;
+
+        if (bg.size[0] != -1 && scale_ != settings.scale) {
+            scale_ = '' + scale_;
+            //不支持x, y
+            if (direct === 'z') {
+                if (scales[scale_]) {
+                    insertToObject(scales[scale_], direct, bg);
+                } else {
+                    scales[scale_] = {};
+                    insertToObject(scales[scale_], direct, bg);
+                }
+            }
+        } else {
+            insertToObject(list_, direct, bg);
         }
     });
-    this.fill(list_x, 'x');
-    this.fill(list_y, 'y');
-    this.zFill(list_z);
+
+    this.fill(list_['x'], 'x');
+    this.fill(list_['y'], 'y');
+    this.zFill(list_['z'], settings.scale);
+
+    //backgroud-size
+    fis.util.map(scales, function (s, l) {
+        s = parseFloat(s);
+        that.zFill(l['z'], s);
+    });
 }
 
 Generator.prototype = {
-    getImage: function(release) {
-        if (this.images.hasOwnProperty(release)) {
-            return this.images[release];
-        }
-        return false;
-    },
     _imageExist: function (images, url) {
@@ -86,5 +116,5 @@ for (var i = 0, len = images.length; i < len; i++) {
     },
-    after: function (image, arr_selector, direct) {
+    after: function (image, arr_selector, direct, scale) {
         var ext = '_' + direct + '.png';
-        
+        var size = image.size();
         if (this.index) {
@@ -94,2 +124,6 @@ ext = '_' + this.index + ext;
 
+        if (scale) {
+            ext = '_' + scale + ext;
+        }
+
         var image_file = fis.file.wrap(this.file.realpathNoExt + ext);
@@ -116,7 +150,11 @@ image_file.setContent(image.encode('png'));
                 this.css += arr_selector.slice(step, step + MAX).join(',')
-                    + '{background-image: url(' + image_file.getUrl(this.opt.hash, this.opt.domain) + image_file.hash + ')}';
+                    + '{'
+                    + (scale ? 'background-size: ' + (size.width * scale) + 'px ' + (size.height * scale) + 'px;': '')
+                    + 'background-image: url(' + image_file.getUrl(this.opt.hash, this.opt.domain) + image_file.hash + ')}';
             }
         } else {
             this.css += unique(arr_selector.join(',').split(',')).join(',')
-                + '{background-image: url(' + image_file.getUrl(this.opt.hash, this.opt.domain) + image_file.hash + ')}';
+                + '{'
+                + (scale ? 'background-size: ' + (size.width * scale) + 'px ' + (size.height * scale) + 'px;': '')
+                + 'background-image: url(' + image_file.getUrl(this.opt.hash, this.opt.domain) + image_file.hash + ')}';
         }
@@ -126,21 +164,17 @@ },
     fill: function(list, direct) {
-        if (list.length == 0) {
+        if (!list || list.length == 0) {
             return;
         }
-        var max = 0,
-            images = [],
-            //宽度或者高的和
-            total = 0,
-            parsed = [],
-            i, k, len, count, op_max;
+        var max = 0;
+        var images = [];
+        //宽度或者高的和
+        var total = 0;
+        var parsed = [];
+        var i, k, len, count, op_max;
 
         for (i = 0, k = -1, len = list.length; i < len; i++) {
             if (parsed.indexOf(list[i].getImageUrl()) == -1) {
-                var image_info = this.getImage(list[i].getImageUrl());
-                if (!image_info) {
-                    continue;
-                }
                 parsed.push(list[i].getImageUrl());
                 k++;
-                var img = Image(image_info.getContent());
+                var img = list[i].image_;
                 var size = img.size();
@@ -214,4 +248,4 @@ images[k] = {
     },
-    zFill: function(list) {
-        if (list.length == 0) {
+    zFill: function(list, scale) {
+        if (!list || list.length == 0) {
             return;
@@ -234,7 +268,3 @@ }
                 parsed[k0].push(item.getImageUrl());
-                var image_info = this.getImage(item.getImageUrl());
-                if (!image_info) {
-                    continue;
-                }
-                var img = Image(image_info.getContent());
+                var img = item.image_;
                 var size = img.size();
@@ -295,2 +325,3 @@ if (item.getType() == 'left') {
         }
+
         //减掉多加了一次的margin
@@ -312,7 +343,15 @@ height = height - this.settings.margin;
                 y = current.fit.y;
+
                 image.draw(Image(current.image), x, y);
                 for (j = 0, count = current.cls.length; j < count; j++) {
+                    var x_ = current.cls[j].position[0] + -x;
+                    var y_ = current.cls[j].position[1] + -y;
+                    if (scale) {
+                        x_ = x_ * scale;
+                        y_ = y_ * scale;
+                    }
+
                     this.css += current.cls[j].selector + '{background-position:'
-                        + (current.cls[j].position[0] + -x)+ 'px '
-                        + (current.cls[j].position[1] + -y) + 'px}';
+                        + x_ + 'px '
+                        + y_ + 'px}';
                     cls.push(current.cls[j].selector);
@@ -330,11 +369,20 @@ }
                 for (j = 0, count = current.cls.length; j < count; j++) {
-                    var x_cur;
+                    var x_, y_ = (current.cls[j].position[1] + -y) + 'px';
+                    if (scale) {
+                        y_ = ((current.cls[j].position[1] + -y) * scale) + 'px'
+                    }
+
                     if (current.cls[j].position[0] == 'right') {
-                        x_cur = 'right ';
+                        x_ = 'right ';
                     } else {
-                        x_cur = (-x + current.cls[j].position[0]) + 'px ';
+                        x_ = -x + current.cls[j].position[0];
+                        if (scale) {
+                            x_ = x_ * scale;
+                        }
+                        x_ = x_ + 'px ';
                     }
+
                     this.css += current.cls[j].selector + '{background-position:'
-                        + x_cur
-                        + (current.cls[j].position[1] + -y) + 'px}';
+                        + x_
+                        + y_ + '}';
                     cls.push(current.cls[j].selector);
@@ -345,4 +393,4 @@ }
         }
-        this.after(image, cls, 'z');
+        this.after(image, cls, 'z', scale);
     }
 };

package.json

 {
   "name": "fis-spriter-csssprites",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "基于fis的csssprite，支持repeat-x，repeat-x，background-position",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 ## fis-spriter-csssprites
 [![NPM version](https://badge.fury.io/js/fis-spriter-csssprites.png)](http://badge.fury.io/js/fis-spriter-csssprites)
 
-基于FIS的csssprites，对css文件,以及html文件css片段进行csssprites处理。支持`repeat-x`, `repeat-y`, `background-position`
+基于FIS的csssprites，对css文件,以及html文件css片段进行csssprites处理。支持`repeat-x`, `repeat-y`, `background-position` 和 `background-size`
 
@@ -39,7 +39,7 @@ ### 安装
     ```javascript
-    fis.config.set('roadmap.path', {
+    fis.config.set('roadmap.path', [{
         reg: /\/static\/.*\.css$/i,
         //配置useSprite表示reg匹配到的css需要进行图片合并
         useSprite: true
-    });
+    }]);
     ```
@@ -66,3 +66,16 @@ * 如果想配置html中的css片段进行csssprites处理，可以像下面这样配置
     ```
+* `background-size`
+    
+    `background-size` 只支持图片同倍率缩小或者放大；`scale < 1`缩小, `scale > 1`放大；其配置如下，当设置`scale`时，不需要给每一个规则都写上`background-size`，csssprites会根据scale产出正确的结果。
 
+    * 支持情况
+        * 不支持跟`background-repeat`一起用。
+        * 设置了`scale`，则规则不允许写`background-size`。
+
+    ```javascript
+    fis.config.set('settings.spriter.csssprites', {
+        scale: 0.5
+    })
+    ```
+
 * **csssprites其他设置**
@@ -69,0 +82,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31505

increased by7.73%

Lines of code

678

increased by7.11%

Number of lines in readme file

215

increased by6.44%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes