Merge 11025fd into d9acf3d

assetgraph · Dec 30, 2014 · 0f83ba7 · 0f83ba7
2 parents d9acf3d + 11025fd
commit 0f83ba7
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 9 deletions.
diff --git a/lib/transforms/processImages.js b/lib/transforms/processImages.js
@@ -45,10 +45,25 @@ module.exports = function (queryObj, options) {
                     targetContentType = imageAsset.contentType,
                     matchQueryString = imageAsset.url.match(/\?([^#]*)/),
                     usedQueryString,
-                    leftOverQueryString;
+                    leftOverQueryString,
+                    dpr = imageAsset.devicePixelRatio || 1; // Svg assets as images might not have a dpr
 
                 if (matchQueryString) {
                     var filterInfosAndTargetContentType = getFilterInfosAndTargetContentTypeFromQueryString(matchQueryString[1], {rootPath: urlTools.fileUrlToFsPath(assetGraph.root), sourceFilePath: urlTools.fileUrlToFsPath(imageAsset.nonInlineAncestor.url)});
+
+                    // Pick out any device pixel ratio setter
+                    var leftOverQueryStringFragments = filterInfosAndTargetContentType.leftOverQueryStringFragments.filter(function (keyValuePair) {
+                        if (/^dpr=\d+(?:[\.,]\d+)?$/.test(keyValuePair)) {
+                            dpr = keyValuePair.split('=')[1];
+                            return false;
+                        } else {
+                            return true;
+                        }
+                    });
+
+                    usedQueryString = filterInfosAndTargetContentType.usedQueryStringFragments.join('-').replace(/[^a-z0-9\.\-=,]/gi, '-');
+                    leftOverQueryString = leftOverQueryStringFragments.join('&');
+
                     if (filterInfosAndTargetContentType.filterInfos.length > 0) {
                         Array.prototype.push.apply(filters, filterInfosAndTargetContentType.filterInfos.map(function (filterInfo) {
                             return filterInfo.create();
@@ -58,11 +73,6 @@ module.exports = function (queryObj, options) {
                         if (filterInfosAndTargetContentType.targetContentType) {
                             targetContentType = filterInfosAndTargetContentType.targetContentType;
                         }
-
-                        usedQueryString = filterInfosAndTargetContentType.usedQueryStringFragments.join('-').replace(/[^a-z0-9\.\-=,]/gi, '-');
-                        leftOverQueryString = filterInfosAndTargetContentType.leftOverQueryStringFragments ?
-                            filterInfosAndTargetContentType.leftOverQueryStringFragments.join('&') :
-                            '';
                     }
                 }
 
@@ -96,6 +106,9 @@ module.exports = function (queryObj, options) {
                         }
                     }
                 }
+
+                var newUrl = imageAsset.url.replace(/\/([^\.\/]*)([^\?\/]*)\?[^#]*/, '/$1' + (usedQueryString ? '.' + usedQueryString : '') + '$2' + (leftOverQueryString ? '?' + leftOverQueryString : ''));
+
                 if (filters.length > 0) {
                     var callbackCalled = false;
                     filters.forEach(function (filter, i) {
@@ -128,26 +141,29 @@ module.exports = function (queryObj, options) {
                                 return;
                             }
                             callbackCalled = true;
-                            var rawSrc = Buffer.concat(chunks),
-                                newUrl = imageAsset.url.replace(/\/([^\.\/]*)([^\?\/]*)\?[^#]*/, '/$1.' + usedQueryString + '$2' + (leftOverQueryString ? '?' + leftOverQueryString : ''));
+                            var rawSrc = Buffer.concat(chunks);
                             if (targetContentType && targetContentType !== imageAsset.contentType) {
                                 var replacementImageAsset = assetGraph.createAsset({
                                     contentType: targetContentType,
                                     type: assetGraph.typeByContentType[targetContentType] || 'Image',
                                     url: newUrl,
-                                    rawSrc: rawSrc
+                                    rawSrc: rawSrc,
+                                    devicePixelRatio: dpr
                                 });
                                 imageAsset.replaceWith(replacementImageAsset);
                                 replacementImageAsset.extension = replacementImageAsset.defaultExtension;
                             } else {
                                 imageAsset.rawSrc = rawSrc;
                                 imageAsset.url = newUrl;
+                                imageAsset.devicePixelRatio = dpr;
                             }
                             cb();
                         });
 
                     filters[0].end(imageAsset.rawSrc);
                 } else {
+                    imageAsset.url = newUrl;
+                    imageAsset.devicePixelRatio = dpr;
                     cb();
                 }
             }, cb);

diff --git a/test/transforms/processImages.js b/test/transforms/processImages.js
@@ -161,4 +161,66 @@ describe('processImages', function () {
             })
             .run(done);
     });
+
+    it('should apply device pixel ratio to images', function (done) {
+        new AssetGraph({root: __dirname + '/../../testdata/transforms/processImages/devicePixelRatio/'})
+            .loadAssets('style.css')
+            .populate()
+            .queue(function (assetGraph) {
+                expect(assetGraph, 'to contain asset', 'Css', 1);
+                expect(assetGraph, 'to contain asset', 'Png', 9);
+
+                expect(_.pluck(assetGraph.findAssets({ isImage: true }), 'devicePixelRatio'), 'to equal', [1, 2, 1, 1, 1, 1, 1, 8, 1]);
+            })
+            .processImages()
+            .queue(function (assetGraph) {
+                var outputs = [
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 1
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 2
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 3,
+                        url: /foo\.png$/
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 1
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 5,
+                        url: /foo\.resize=,200\.png$/
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 6,
+                        url: /foo\.resize=,200\.png$/
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 7,
+                        url: /foo\.png\?foo=bar$/
+                    },
+                    {
+                        type: 'Png',
+                        devicePixelRatio: 1
+                    },
+                    {
+                        type: 'Jpeg',
+                        devicePixelRatio: 9
+                    }
+                ];
+
+                expect(assetGraph.findAssets({ isImage: true }), 'to be an array whose items satisfy', function (img, idx) {
+                    expect(img, 'to satisfy', outputs[idx]);
+                });
+            })
+            .run(done);
+    });
 });
diff --git a/testdata/transforms/processImages/devicePixelRatio/foo.png b/testdata/transforms/processImages/devicePixelRatio/foo.png
diff --git a/testdata/transforms/processImages/devicePixelRatio/foo@2x.png b/testdata/transforms/processImages/devicePixelRatio/foo@2x.png
diff --git a/testdata/transforms/processImages/devicePixelRatio/foo@8x.png b/testdata/transforms/processImages/devicePixelRatio/foo@8x.png
diff --git a/testdata/transforms/processImages/devicePixelRatio/style.css b/testdata/transforms/processImages/devicePixelRatio/style.css
@@ -0,0 +1,35 @@
+.p1 {
+    background-image: url(foo.png);
+}
+
+.p2 {
+    background-image: url(foo@2x.png);
+}
+
+.p3 {
+    background-image: url(foo.png?dpr=3);
+}
+
+.p4 {
+    background-image: url(foo.png?resize=,200);
+}
+
+.p5 {
+    background-image: url(foo.png?resize=,200&dpr=5);
+}
+
+.p6 {
+    background-image: url(foo.png?dpr=6&resize=,200);
+}
+
+.p7 {
+    background-image: url(foo.png?dpr=7&foo=bar);
+}
+
+.p8 {
+    background-image: url(foo@8x.png?dpr=1);
+}
+
+.p9 {
+    background-image: url(foo.png?setFormat=jpg&dpr=9);
+}