assetgraph-sprite - npm Package Compare versions

Comparing version 0.8.3 to 1.0.0

lib/spriteBackgroundImages.js

@@ -14,2 +14,9 @@ var URL = require('url'),
 
+// Helper for extracting all nodes defining a specific property from a postcss rule
+function getProperties(container, propertyName) {
+    return container.nodes.filter(function (node) {
+        return node.prop === propertyName;
+    });
+}
+
 function getCanvasImageFromImageAsset(imageAsset, cb) {
@@ -91,11 +98,10 @@ var canvasImage = new Canvas.Image();
     var info = {};
-    for (var i = 0 ; i < cssRule.style.length ; i += 1) {
-        var propertyName = cssRule.style[i];
-        if (!propertyNamePrefix || propertyName.indexOf(propertyNamePrefix) === 0) {
-            var keyName = propertyName.substr(propertyNamePrefix.length).replace(/-([a-z])/g, function ($0, $1) {
+    cssRule.walkDecls(function (decl) {
+        if (!propertyNamePrefix || decl.prop.indexOf(propertyNamePrefix) === 0) {
+            var keyName = decl.prop.substr(propertyNamePrefix.length).replace(/-([a-z])/g, function ($0, $1) {
                 return $1.toUpperCase();
             });
-            info[keyName] = cssRule.style[propertyName].replace(/^([\'\"])(.*)\1$/, '$2');
+            info[keyName] = decl.value.replace(/^([\'\"])(.*)\1$/, '$2');
         }
-    }
+    });
     return info;
@@ -146,9 +152,9 @@ }
             cssAsset.eachRuleInParseTree(function (cssRule) {
-                if (cssRule.type !== 1) { // cssom.CSSRule.STYLE_RULE
+                if (cssRule.type !== 'rule') {
                     return;
                 }
-                if ('-sprite-selector-for-group' in cssRule.style) {
+                if (getProperties(cssRule, '-sprite-selector-for-group').length > 0) {
                     var spriteInfo = extractInfoFromCssRule(cssRule, '-sprite-'),
                         spriteGroupName = spriteInfo.selectorForGroup;
-                    if ('location' in spriteInfo) {
+                    if (spriteInfo.location) {
                         var matchLocation = spriteInfo.location.match(/^url\((['"]|)(.*?)\1\)$/);
@@ -159,5 +165,4 @@ if (matchLocation) {
                     }
-                    if (spriteGroupName in spriteGroups) {
-                        var group = spriteGroups[spriteGroupName];
-
+                    var group = spriteGroups[spriteGroupName];
+                    if (group) {
                         if (!Array.isArray(group.placeHolders)) {
@@ -291,3 +296,3 @@ group.placeHolders = [];
                                     relation = new assetGraph.CssImage({
-                                        cssRule: cssRule,
+                                        node: cssRule,
                                         from: spriteInfo.asset,
@@ -297,10 +302,10 @@ to: spriteAsset
 
-                                ['background-image', 'background' ].forEach(function (propertyName) {
-                                    if (!relation.propertyName && cssRule.style[propertyName]) {
+                                [ 'background-image', 'background' ].forEach(function (propertyName) {
+                                    var decls = getProperties(cssRule, propertyName);
+                                    if (!relation.propertyName && decls.length > 0) {
                                         relation.propertyName = propertyName;
-                                        var propertyValue = cssRule.style.getPropertyValue(propertyName),
-                                            propertyPriority = cssRule.style.getPropertyPriority(propertyName);
+                                        var propertyValue = decls[0].value;
                                         if (propertyValue === '!important') {
                                             // Hack so that an existing value of "!important" will DTRT
-                                            propertyPriority = 'important';
+                                            decls[0].important = true;
                                             propertyValue = 'url(...)';
@@ -316,8 +321,10 @@ } else if (/^\s*$/.test(propertyValue)) {
                                         }
-                                        cssRule.style.setProperty(propertyName, propertyValue, propertyPriority);
+                                        decls[0].value = propertyValue;
                                     }
                                 });
-                                if (!relation.propertyName) {
-                                    relation.propertyName = 'background-image';
-                                    cssRule.style.setProperty('background-image', 'url(...)');
+                                if (relation.propertyName) {
+                                    relation.propertyNode = getProperties(cssRule, relation.propertyName)[0];
+                                } else {
+                                    cssRule.append('background-image: url(...)');
+                                    relation.propertyNode = cssRule.last;
                                 }
@@ -327,9 +334,13 @@ // I can't see why the ordering of CssImage relations should be significant...
                                 relation.refreshHref();
-                                ['selector-for-group', 'packer', 'image-format', 'background-color', 'important'].forEach(function (propertyName) {
-                                    spriteInfo.cssRule.style.removeProperty('-sprite-' + propertyName);
+                                spriteInfo.cssRule.walkDecls(function (decl) {
+                                    if (['-sprite-selector-for-group', '-sprite-packer', '-sprite-image-format', '-sprite-background-color', '-sprite-important'].indexOf(decl.prop) !== -1) {
+                                        decl.remove();
+                                    }
                                 });
 
-                                // 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');
+
+                                // If background-size is set, we should update it, The correct size is now the size of the sprite:
+                                var backgroundSizeDecls = getProperties(spriteInfo.cssRule, 'background-size');
+                                if (backgroundSizeDecls.length > 0) {
+                                    backgroundSizeDecls[0].value = packingData.width + 'px ' + packingData.height + 'px';
                                 }
@@ -342,5 +353,5 @@ });
                                 var relationSpriteInfo = getRelationSpriteInfoFromIncomingRelation(incomingRelation),
-                                    style = incomingRelation.cssRule.style,
-                                    existingBackgroundPositionValue = style['background-position'],
-                                    existingBackgroundValue = style.background,
+                                    node = incomingRelation.node,
+                                    existingBackgroundPositionDecls = getProperties(node, 'background-position'),
+                                    existingBackgroundDecls = getProperties(node, 'background'),
                                     backgroundOffsetsWereUpdated = false,
@@ -352,5 +363,5 @@ offsets = [
                                     existingOffsets;
-
-                                if (existingBackgroundValue) {
-                                    var backgroundTokens = existingBackgroundValue.split(/\s+/),
+                                if (existingBackgroundDecls.length > 0) {
+                                    // Warn if there's more than one?
+                                    var backgroundTokens = existingBackgroundDecls[0].value.split(/\s+/),
                                         positionTokenIndices = [];
@@ -371,5 +382,3 @@ existingOffsets = [];
 
-                                        style.setProperty('background',
-                                                          backgroundTokens.join(' '),
-                                                          style.getPropertyPriority('background'));
+                                        existingBackgroundDecls[0].value = backgroundTokens.join(' ');
                                         backgroundOffsetsWereUpdated = true;
@@ -382,28 +391,35 @@ }
                                     // Create or update the background-position property instead:
-                                    var backgroundPositionPriority;
-                                    if (existingBackgroundPositionValue === '!important') {
-                                        // Hack so that an existing value of "!important" will DTRT
-                                        backgroundPositionPriority = 'important';
-                                    } else if (existingBackgroundPositionValue) {
-                                        backgroundPositionPriority = style.getPropertyPriority('background-position');
+                                    var backgroundPositionImportant = false;
+                                    if (existingBackgroundPositionDecls.length === 1) {
                                         // FIXME: Silently ignores other units than px
-                                        existingOffsets = existingBackgroundPositionValue.split(' ').map(function (item) {
-                                            return parseInt(item, 10);
-                                        });
+                                        backgroundPositionImportant = existingBackgroundPositionDecls[0].value === '!important' || existingBackgroundPositionDecls[0].important;
 
-                                        if (existingOffsets.length !== 2 || isNaN(existingOffsets[0]) || isNaN(existingOffsets[1])) {
-                                            var err = new Error('WARNING: trying to sprite ' + imageInfo.asset.url + ' with background-position: ' + existingBackgroundPositionValue);
-                                            assetGraph.emit('warn', err);
-                                        } else {
-                                            offsets[0] -= existingOffsets[0];
-                                            offsets[1] -= existingOffsets[1];
+                                        if (existingBackgroundPositionDecls[0].value !== '!important') {
+                                            existingOffsets = existingBackgroundPositionDecls[0].value.split(' ').map(function (item) {
+                                                return parseInt(item, 10);
+                                            });
+                                            if (existingOffsets.length !== 2 || isNaN(existingOffsets[0]) || isNaN(existingOffsets[1])) {
+                                                var err = new Error('WARNING: trying to sprite ' + imageInfo.asset.url + ' with background-position: ' + existingBackgroundPositionDecls[0].value);
+                                                assetGraph.emit('warn', err);
+                                            } else {
+                                                offsets[0] -= existingOffsets[0];
+                                                offsets[1] -= existingOffsets[1];
+                                            }
                                         }
                                     }
-
-                                    style.setProperty('background-position', offsets.map(function (item) {
+                                    var newBackgroundPositionValue = offsets.map(function (item) {
                                         return item ? -item + 'px' : '0';
-                                    }).join(' '), backgroundPositionPriority);
+                                    }).join(' ');
+                                    if (existingBackgroundPositionDecls.length > 0) {
+                                        existingBackgroundPositionDecls[0].value = newBackgroundPositionValue;
+                                        existingBackgroundPositionDecls[0].important = backgroundPositionImportant;
+                                    } else {
+                                        node.append('background-position: ' + newBackgroundPositionValue + (backgroundPositionImportant ? ' !important' : ''));
+                                    }
                                 }
-                                ['group', 'padding', 'no-group-selector', 'important'].forEach(function (propertyName) {
-                                    style.removeProperty('-sprite-' + propertyName);
+
+                                node.walkDecls(function (decl) {
+                                    if (['-sprite-group', '-sprite-padding', '-sprite-no-group-selector', '-sprite-important'].indexOf(decl.prop) !== -1) {
+                                        decl.remove();
+                                    }
                                 });
@@ -414,3 +430,5 @@
                                     // Device pixel ratio is default. Remove property and let the defaults rule
-                                    incomingRelation.cssRule.style.removeProperty('background-size');
+                                    getProperties(incomingRelation.node, 'background-size').forEach(function (backgroundSizeDecl) {
+                                        backgroundSizeDecl.remove();
+                                    });
                                 } else {
@@ -423,3 +441,8 @@ // Device pixel ratio is non-default, Set it explicitly with the ratio applied
                                     var height = packingData.height / dpr;
-                                    incomingRelation.cssRule.style.setProperty('background-size', width + 'px ' + height + 'px');
+                                    var existingBackgroundSizeDecls = getProperties(incomingRelation.node, 'background-size');
+                                    if (existingBackgroundSizeDecls.length > 0) {
+                                        existingBackgroundSizeDecls[0].value = width + 'px ' + height + 'px';
+                                    } else {
+                                        incomingRelation.node.append('background-size: ' + width + 'px ' + height + 'px');
+                                    }
                                 }
@@ -432,4 +455,4 @@
                                     var relation = new assetGraph.CssImage({
-                                        cssRule: incomingRelation.cssRule,
-                                        propertyName: incomingRelation.propertyName,
+                                        node: incomingRelation.node,
+                                        propertyNode: incomingRelation.propertyNode,
                                         from: incomingRelation.from,
@@ -436,0 +459,0 @@ to: spriteAsset

package.json

@@ -5,3 +5,3 @@ {
   "repository": "git://github.com/One-com/assetgraph-sprite.git",
-  "version": "0.8.3",
+  "version": "1.0.0",
   "maintainers": [
@@ -30,12 +30,12 @@ {
   "optionalDependencies": {
-    "canvas": "1.3.0"
+    "canvas": "1.3.4"
   },
   "devDependencies": {
-    "assetgraph": "1.23.1",
+    "assetgraph": "2.0.0",
     "coveralls": "2.11.4",
-    "istanbul": "0.4.0",
+    "istanbul": "0.4.1",
     "jshint": "2.8.0",
     "lodash.pluck": "3.1.2",
     "mocha": "2.3.3",
-    "unexpected": "10.0.2",
+    "unexpected": "10.3.1",
     "urltools": "0.2.0"
@@ -42,0 +42,0 @@ },

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 v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40970

increased by3.59%

Lines of code

582

increased by4.11%

Number of low quality alerts

1

decreased by-50%

No dependency changes