assetgraph-sprite - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

lib/spriteBackgroundImages.js

@@ -48,3 +48,4 @@ var URL = require('url'),
 
-function calculateSpritePadding(paddingStr) {
+function calculateSpritePadding(paddingStr, asset) {
+    var padding;
     if (paddingStr) {
@@ -60,12 +61,17 @@ // Strip units ('px' assumed)
         if (tokens.length === 4) {
-            return tokens;
+            padding = tokens;
         } else if (tokens.length === 3) {
-            return [tokens[0], tokens[1], tokens[2], tokens[1]]; // T, L+R, B
+            padding = [tokens[0], tokens[1], tokens[2], tokens[1]]; // T, L+R, B
         } else if (tokens.length === 2) {
-            return [tokens[0], tokens[1], tokens[0], tokens[1]]; // T+B, L+R
+            padding = [tokens[0], tokens[1], tokens[0], tokens[1]]; // T+B, L+R
         } else if (tokens.length === 1) {
-            return [tokens[0], tokens[0], tokens[0], tokens[0]];
+            padding = [tokens[0], tokens[0], tokens[0], tokens[0]];
         }
+    } else {
+        padding = [0, 0, 0, 0];
     }
-    return [0, 0, 0, 0];
+
+    return padding.map(function (size) {
+        return Math.max(size, Math.max(asset.devicePixelRatio) - 1);
+    });
 }
@@ -78,3 +84,3 @@
         noGroup: 'spriteNoGroup' in parsedQueryString,
-        padding: calculateSpritePadding(parsedQueryString.padding),
+        padding: calculateSpritePadding(parsedQueryString.padding, incomingRelation.to),
         asset: incomingRelation.to
@@ -116,2 +122,4 @@ };
         var spriteGroups = {};
+
+        // Find sprite annotated images and create a data structure with their information
         assetGraph.findRelations({type: 'CssImage', to: {isImage: true}, href: /\?(?:|[^#]*&)sprite(?:[=&#]|$)/}).forEach(function (relation) {
@@ -134,2 +142,3 @@ var relationSpriteInfo = getRelationSpriteInfoFromIncomingRelation(relation),
 
+        // Extract sprite grouping information va -sprite- prefixed properties in stylesheets
         assetGraph.findAssets({type: 'Css'}).forEach(function (cssAsset) {
@@ -198,3 +207,4 @@ cssAsset.eachRuleInParseTree(function (cssRule) {
                     imageInfos = _.values(spriteGroup.imageInfosById),
-                    spriteInfo = spriteGroup.placeHolders && spriteGroup.placeHolders[0] || {};
+                    spriteInfo = spriteGroup.placeHolders && spriteGroup.placeHolders[0] || {},
+                    packingData;
 
@@ -219,5 +229,8 @@ seq(imageInfos)
                         }[spriteInfo.packer] || 'tryAll';
-                        var packingData = packers[packerName].pack(imageInfos),
-                            canvas = new Canvas(packingData.width, packingData.height),
+
+                        packingData =  packers[packerName].pack(imageInfos);
+
+                        var canvas = new Canvas(packingData.width, packingData.height),
                             ctx = canvas.getContext('2d');
+
                         imageInfos = packingData.imageInfos;
@@ -291,2 +304,7 @@ if ('backgroundColor' in spriteInfo) {
                                 });
+
+                                // If background-size is set, we should update it, The correct size is now the sprites size
+                                if (spriteInfo.cssRule.style.getPropertyValue('background-size')) {
+                                    spriteInfo.cssRule.style.setProperty('background-size', packingData.width + 'px ' + packingData.height + 'px');
+                                }
                             });
@@ -303,4 +321,4 @@ }
                                     offsets = [
-                                        imageInfo.x,
-                                        imageInfo.y
+                                        Math.round(imageInfo.x / imageInfo.asset.devicePixelRatio), // FIXME: Rounding issues?
+                                        Math.round(imageInfo.y / imageInfo.asset.devicePixelRatio)
                                     ],
@@ -363,2 +381,17 @@ existingOffsets;
                                 });
+
+                                // Background-sizes change when spriting, upadte appropriately
+                                if (imageInfo.asset.devicePixelRatio === 1) {
+                                    // Device pixel ratio is default. Remove property and let the defaults rule
+                                    incomingRelation.cssRule.style.removeProperty('background-size');
+                                } else {
+                                    // Device pixel ratio is non-default, Set it explicitly with the ratio applied
+                                    var dpr = incomingRelation.to.devicePixelRatio;
+
+                                    // TODO: Figure out if rounding might become a problem
+                                    var width = packingData.width / dpr;
+                                    var height = packingData.height / dpr;
+                                    incomingRelation.cssRule.style.setProperty('background-size', width + 'px ' + height + 'px');
+                                }
+
                                 if (relationSpriteInfo.noGroup || !spriteGroup.placeHolders) {
@@ -365,0 +398,0 @@ // The user specified that this selector needs its own background-image/background

package.json

@@ -5,3 +5,3 @@ {
   "repository": "git://github.com/One-com/assetgraph-sprite.git",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "maintainers": [
@@ -29,6 +29,6 @@ {
   "optionalDependencies": {
-    "canvas": "=1.1.2"
+    "canvas": "=1.1.6"
   },
   "devDependencies": {
-    "assetgraph": "^1.6.42",
+    "assetgraph": "1.15.1",
     "coveralls": "^2.11.1",
@@ -39,3 +39,3 @@ "istanbul": "^0.3.0",
     "mocha-lcov-reporter": "0.0.1",
-    "unexpected": "=3.2.0",
+    "unexpected": "5.0.0-beta32",
     "urltools": "=0.1.0"
@@ -42,0 +42,0 @@ },

README.md

 AssetGraph-sprite
 =================
+
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/assetgraph/assetgraph-sprite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![NPM version](https://badge.fury.io/js/assetgraph-sprite.png)](http://badge.fury.io/js/assetgraph-sprite)
@@ -4,0 +6,0 @@ [![Build Status](https://travis-ci.org/assetgraph/assetgraph-sprite.png?branch=master)](https://travis-ci.org/assetgraph/assetgraph-sprite)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38659

increased by10.42%

Number of package files

9

increased by12.5%

Number of low license alerts

0

decreased by-100%

Lines of code

536

increased by4.69%

Number of lines in readme file

219

increased by0.92%

No dependency changes