assetgraph-sprite - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

@@ -5,3 +5,3 @@ {
     "repository": "git://github.com/One-com/assetgraph-sprite.git",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "maintainers": [
@@ -17,5 +17,6 @@ {
     "dependencies": {
-        "underscore": "=1.2.2",
         "bufferjs": "=1.0.2",
-        "seq": "=0.3.5"
+        "passerror": "=0.0.1",
+        "seq": "=0.3.5",
+        "underscore": "=1.4.2"
     },
@@ -38,3 +39,3 @@ "optionalDependencies": {
     },
-    "main": "lib/index.js"
+    "main": "lib/spriteBackgroundImages.js"
 }

test/spriteBackgroundImages-test.js

 var vows = require('vows'),
     assert = require('assert'),
+    _ = require('underscore'),
     AssetGraph = require('assetgraph'),
-    transforms = AssetGraph.transforms;
+    spriteBackgroundImages = require('../lib/spriteBackgroundImages');
 
@@ -9,6 +10,6 @@ vows.describe('Sprite background images').addBatch({
         topic: function () {
-            new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'}).queue(
-                transforms.loadAssets('style.css'),
-                transforms.populate()
-            ).run(this.callback);
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
         },
@@ -29,3 +30,3 @@ 'the graph contains 4 assets': function (assetGraph) {
             topic: function (assetGraph) {
-                assetGraph.queue(require('../lib')()).run(this.callback);
+                assetGraph.queue(spriteBackgroundImages()).run(this.callback);
             },
@@ -37,14 +38,14 @@ 'the number of Png assets should be down to one': function (assetGraph) {
     },
-    'After loading the same test case again, set the -ag-sprite-image-format to jpg and sprite the background images': {
+    'After loading the same test case again, set the -sprite-image-format to jpg and sprite the background images': {
         topic: function () {
-            new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'}).queue(
-                transforms.loadAssets('style.css'),
-                transforms.populate(),
-                function (assetGraph) {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'})
+                .loadAssets('style.css')
+                .populate()
+                .queue(function (assetGraph) {
                     var cssAsset = assetGraph.findAssets({type: 'Css'})[0];
-                    cssAsset.parseTree.cssRules[0].style.setProperty('-ag-sprite-image-format', 'jpg');
+                    cssAsset.parseTree.cssRules[0].style.setProperty('-sprite-image-format', 'jpg');
                     cssAsset.markDirty();
-                },
-                require('../lib')()
-            ).run(this.callback);
+                })
+                .queue(spriteBackgroundImages())
+                .run(this.callback);
         },
@@ -60,8 +61,8 @@ 'there should be no Png assets left in the graph': function (assetGraph) {
     },
-    'After loading a simple test case with two background-images to be sprited, but with no group selector': {
+    'After loading a simple test case with a sprite with no group selector': {
         topic: function () {
-            new AssetGraph({root: __dirname + '/spriteBackgroundImages/noGroupSelector/'}).queue(
-                transforms.loadAssets('style.css'),
-                transforms.populate()
-            ).run(this.callback);
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/noGroupSelector/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
         },
@@ -73,3 +74,3 @@ 'the graph contains 2 Pngs': function (assetGraph) {
             topic: function (assetGraph) {
-                assetGraph.queue(require('../lib')()).run(this.callback);
+                assetGraph.queue(spriteBackgroundImages()).run(this.callback);
             },
@@ -83,7 +84,164 @@ 'the number of Png assets should be down to one': function (assetGraph) {
             'the stylesheet should have the expected contents': function (assetGraph) {
-                assert.equal(assetGraph.findAssets({type: 'Css'})[0].text,
-                             '.icon-foo{background-image:url(20.png);background-position:0 0}.icon-bar{background-image:url(20.png);background-position:-12px 0}');
+                assert.matches(assetGraph.findAssets({type: 'Css'})[0].text,
+                               /^\.icon-foo\{background-image:url\(\d+\.png\);background-position:0 0\}\.icon-bar\{background-image:url\(\d+\.png\);background-position:-12px 0\}$/);
             }
         }
+    },
+    'After loading a simple test case with a sprites with two images where one has spriteNoGroup in its query string': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/spriteNoGroup/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 2 Pngs': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 2);
+        },
+        'then spriting the background images': {
+            topic: function (assetGraph) {
+                assetGraph.queue(spriteBackgroundImages()).run(this.callback);
+            },
+            'the number of Png assets should be down to one': 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,
+                               /^\.foo\{background-image:url\((\d+\.png)\)}\.foo-foo\{background-image:url\(\1\);background-position:0 0\}\.foo-bar\{background-position:-12px 0\}$/);
+            }
+        }
+    },
+    'After loading a simple test case with two sprites with -sprite-location properties in the group selector': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/spriteLocation/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 4 Pngs': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 4);
+        },
+        'then spriting the background images': {
+            topic: function (assetGraph) {
+                assetGraph.queue(spriteBackgroundImages()).run(this.callback);
+            },
+            'the number of Png assets should be down to 2': function (assetGraph) {
+                assert.equal(assetGraph.findAssets({type: 'Png'}).length, 2);
+            },
+            'the graph should contain 2 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 2);
+            },
+            'the hrefs of the CssImage relations should have the expected values': function (assetGraph) {
+                var cssImageHrefs = _.pluck(assetGraph.findRelations({type: 'CssImage'}), 'href').sort();
+                assert.matches(cssImageHrefs[0], /^\d+\.png\?pngquant=128$/);
+                assert.equal(cssImageHrefs[1], 'myImage.png?pngquant=128');
+            }
+        }
+    },
+    'After loading a test case with an existing background-image property in the group selector': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/existingBackgroundImageInGroupSelector/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 1 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 1);
+        },
+        '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 1 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 1);
+            },
+            'the stylesheet should have the expected contents': function (assetGraph) {
+                assert.matches(assetGraph.findAssets({type: 'Css'})[0].text,
+                               /^\.icon\{background-image:url\(\d+\.png\)!important}\.icon-foo\{background-position:0 0\}$/);
+            }
+        }
+    },
+    'After loading a test case with an existing background property in the group selector': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/existingBackgroundInGroupSelector/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 1 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 1);
+        },
+        '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 1 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 1);
+            },
+            'the stylesheet should have the expected contents': function (assetGraph) {
+                assert.matches(assetGraph.findAssets({type: 'Css'})[0].text,
+                               /^\.icon\{background:red url\(\d+\.png\)!important}\.icon-foo\{background-position:0 0\}$/);
+            }
+        }
+    },
+    'After loading a test case with an existing background-position properties': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/existingBackgroundPositions/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 2 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 2);
+        },
+        '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 1 CssImage relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 1);
+            },
+            '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\}$/);
+            }
+        }
+    },
+    'After loading a test case with a background-image and a background that are !important': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/spriteBackgroundImages/important/'})
+                .loadAssets('style.css')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph contains 2 Png': function (assetGraph) {
+            assert.equal(assetGraph.findAssets({type: 'Png'}).length, 2);
+        },
+        '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-image:\1!important;background-position:0 0\}\.icon-bar\{background:red!important;background-position:-12px 0\}$/);
+            }
+        }
     }
 })['export'](module);

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

49056

increased by42.99%

Number of package files

34

increased by70%

Lines of code

781

increased by47.64%

Number of lines in readme file

213

increased by31.48%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpasserror@=0.0.1

• Updatedunderscore@=1.4.2