assetgraph-sprite - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

lib/spriteBackgroundImages.js

@@ -260,3 +260,4 @@ var URL = require('url'),
                                     existingBackgroundPositionValue = style['background-position'],
-                                    backgroundPositionPriority,
+                                    existingBackgroundValue = style['background'],
+                                    backgroundOffsetsWereUpdated = false,
                                     offsets = [
@@ -267,28 +268,57 @@ imageInfo.x,
 
-                                if (existingBackgroundPositionValue === '!important') {
-                                    // Hack so that an existing value of "!important" will DTRT
-                                    backgroundPositionPriority = 'important';
-                                } else if (existingBackgroundPositionValue) {
-                                    backgroundPositionPriority = style.getPropertyPriority('background-position');
-                                    // FIXME: Silently ignores other units than px
-                                    var positions = existingBackgroundPositionValue.split(' ').map(function (item) {
-                                        return parseInt(item, 10);
+                                if (existingBackgroundValue) {
+                                    var backgroundTokens = existingBackgroundValue.split(/\s+/),
+                                        positionTokenIndices = [],
+                                        existingOffsets = [];
+                                    backgroundTokens.forEach(function (existingBackgroundValueToken, i) {
+                                        if (/^(?:-?\d+px|0)$/i.test(existingBackgroundValueToken)) {
+                                            positionTokenIndices.push(i);
+                                            existingOffsets.push(parseInt(existingBackgroundValueToken, 10));
+                                        }
                                     });
+                                    if (existingOffsets.length === 2) {
+                                        // Patch up the existing background property by replacing the old offsets with corrected ones:
+                                        offsets.forEach(function (offset, i) {
+                                            offset -= existingOffsets[i];
+                                            backgroundTokens.splice(positionTokenIndices[i], 1, offset ? -offset + 'px' : '0');
+                                        });
 
-                                    if (positions.length !== 2 || isNaN(positions[0]) || isNaN(positions[1])) {
-                                        console.warn(
-                                            'WARNING: trying to sprite',
-                                            imageInfo.asset.url,
-                                            'with background-position:',
-                                            existingBackgroundPositionValue
-                                        );
-                                    } else {
-                                        offsets[0] -= positions[0];
-                                        offsets[1] -= positions[1];
+                                        style.setProperty('background',
+                                                          backgroundTokens.join(' '),
+                                                          style.getPropertyPriority('background'));
+                                        backgroundOffsetsWereUpdated = true;
                                     }
                                 }
 
-                                style.setProperty('background-position', offsets.map(function (item) {
-                                    return item ? -item + 'px' : '0';
-                                }).join(' '), backgroundPositionPriority);
+                                if (!backgroundOffsetsWereUpdated) {
+                                    // There was no 'background' property, or it didn't contain something that looked like offsets.
+                                    // 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');
+                                        // FIXME: Silently ignores other units than px
+                                        var existingOffsets = existingBackgroundPositionValue.split(' ').map(function (item) {
+                                            return parseInt(item, 10);
+                                        });
+
+                                        if (existingOffsets.length !== 2 || isNaN(existingOffsets[0]) || isNaN(existingOffsets[1])) {
+                                            console.warn(
+                                                'WARNING: trying to sprite',
+                                                imageInfo.asset.url,
+                                                'with background-position:',
+                                                existingBackgroundPositionValue
+                                            );
+                                        } else {
+                                            offsets[0] -= existingOffsets[0];
+                                            offsets[1] -= existingOffsets[1];
+                                        }
+                                    }
+
+                                    style.setProperty('background-position', offsets.map(function (item) {
+                                        return item ? -item + 'px' : '0';
+                                    }).join(' '), backgroundPositionPriority);
+                                }
                                 ['group', 'padding', 'no-group-selector', 'important'].forEach(function (propertyName) {
@@ -295,0 +325,0 @@ style.removeProperty('-sprite-' + propertyName);

package.json

@@ -5,3 +5,3 @@ {
     "repository": "git://github.com/One-com/assetgraph-sprite.git",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "maintainers": [
@@ -8,0 +8,0 @@ {

test/spriteBackgroundImages-test.js

@@ -189,4 +189,30 @@ var vows = require('vows'),
     },
-    'After loading a test case with an existing background-position properties': {
+    'After loading a test case with an existing background property in the sprite selector': {
         topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/existingBackgroundInSpriteSelector/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 3 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 3);
+        },
+        'then spriting the background images': {
+            topic: function (assetGraph) {
+                assetGraph.queue(spriteBackgroundImages()).run(this.callback);
+            },
+            'the number of Png assets should still be 1': function (assetGraph) {
+                assert.equal(assetGraph.findAssets({type: 'Png'}).length, 1);
+            },
+            'the graph should contain 2 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 2);
+            },
+            'the stylesheet should have the expected contents': function (assetGraph) {
+                assert.matches(assetGraph.findAssets({type: 'Css'})[0].text,
+                               /^\.icon\{background-image:url\((\d+\.png)\)}\.icon-foo\{background-position:0 0\}.icon-bar{background:-12px 4px}.icon-quux{background:url\(\1\) -1610px -4px}$/);
+            }
+        }
+    },
+    'After loading a test case with existing background-position properties': {
+        topic: function () {
             new AssetGraph({root: __dirname + '/spriteBackgroundImages/existingBackgroundPositions/'})
@@ -197,4 +223,4 @@ .loadAssets('style.css')
         },
-        'the graph contains 2 Png': function (assetGraph) {
-            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 2);
+        'the graph contains 3 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 3);
         },
@@ -208,8 +234,8 @@ 'then spriting the background images': {
             },
-            'the graph should contain 1 CssImage relations': function (assetGraph) {
-                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 1);
+            'the graph should contain 2 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 2);
             },
             'the stylesheet should have the expected contents': function (assetGraph) {
                 assert.matches(assetGraph.findAssets({type: 'Css'})[0].text,
-                               /^\.icon\{background-image:url\(\d+\.png\)}\.icon-foo\{background-position:0 0!important\}\.icon-bar\{background-position:-112px -40px!important\}$/);
+                               /^\.icon\{background-image:url\((\d+\.png)\)}\.icon-foo\{background-position:0 0!important\}\.icon-bar\{background-position:-112px -40px!important\}\.icon-quux\{background-image:url\(\1\);background-position:-1610px 2px!important\}$/);
             }
@@ -216,0 +242,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

Improved metrics

Total package byte prevSize

54446

increased by10.35%

Number of package files

38

increased by11.76%

Lines of code

861

increased by8.85%

No dependency changes