diff --git a/.gitignore b/.gitignore
index 71daf201..fed322b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ example/dist/
obj/
.ntvs_analysis.dat.tmp
coverage
+/.idea
diff --git a/index.js b/index.js
index 48a6817b..49570724 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ var path = require("path");
var assign = require("object-assign");
var fastreplace = require("./lib/fastreplace");
var findNestedRequires = require("./lib/findNestedRequires");
+var srcset = require("./lib/srcset");
function versionCheck(hbCompiler, hbRuntime) {
return (
@@ -143,11 +144,27 @@ module.exports = function (source) {
if (str.indexOf && str.indexOf('"') === 0) {
var replacements = findNestedRequires(str, inlineRequires);
str = fastreplace(str, replacements, function (match) {
- return (
- '" + require(' +
- loaderUtils.stringifyRequest(loaderApi, match) +
- ') + "'
- );
+ if (srcset.hasSrcsetProperties(match)) {
+ var requireList = [];
+ var matchList = match.matchAll(new RegExp(srcset.srcsetRegex, 'g'));
+ var startIndex = 0;
+
+ Array.from(matchList).forEach(function(item) {
+ var srcsetMatch = item[0];
+ var srcsetPath = item.input.substring(startIndex, item.index).trim();
+ var srcsetProperty = srcsetMatch.replace(',', '').trim();
+ requireList.push('" + require(' +
+ loaderUtils.stringifyRequest(loaderApi, srcsetPath) +
+ ') + " ' + srcsetProperty);
+ startIndex = item.index + srcsetMatch.length;
+ });
+
+ return requireList.join(', ');
+ }
+
+ return '" + require(' +
+ loaderUtils.stringifyRequest(loaderApi, match) +
+ ') + "';
});
}
return JavaScriptCompiler.prototype.appendToBuffer.apply(this, arguments);
diff --git a/lib/srcset.js b/lib/srcset.js
new file mode 100644
index 00000000..85ab0400
--- /dev/null
+++ b/lib/srcset.js
@@ -0,0 +1,10 @@
+var srcsetRegex = /(\s+\d+w($|\s*,)|\s+\d+x($|\s*,))/;
+
+function hasSrcsetProperties(match) {
+ return new RegExp(srcsetRegex).test(match);
+}
+
+module.exports = {
+ srcsetRegex: srcsetRegex,
+ hasSrcsetProperties: hasSrcsetProperties,
+};
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
index 97e2c5dd..150c7488 100644
--- a/test/test.js
+++ b/test/test.js
@@ -6,6 +6,7 @@ var assert = require("assert"),
sinon = require("sinon"),
loader = require("../"),
WebpackLoaderMock = require("./lib/WebpackLoaderMock"),
+ srcset = require("../lib/srcset"),
TEST_TEMPLATE_DATA = {
title: "Title",
description: "Description",
@@ -433,8 +434,10 @@ describe("handlebars-loader", function () {
"./image": function (text) {
return "Image URL: " + text;
},
- "images/path/to/image":
- "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
+ "images/path/to/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
+ "images/path/to/200/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
+ "images/path/to/400/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
+ "images/path/to/2x/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
},
},
function (err, output, require) {
@@ -443,6 +446,18 @@ describe("handlebars-loader", function () {
require.calledWith("images/path/to/image"),
"should have required image path"
);
+ assert.ok(
+ require.calledWith("images/path/to/200/image"),
+ "should have required srcset 200w image path"
+ );
+ assert.ok(
+ require.calledWith("images/path/to/400/image"),
+ "should have required srcset 400w image path"
+ );
+ assert.ok(
+ require.calledWith("images/path/to/2x/image"),
+ "should have required srcset 2x image path"
+ );
done();
}
);
@@ -787,4 +802,32 @@ describe("handlebars-loader", function () {
}
);
});
+
+ describe('srcset', function () {
+ it('matches src attributes on a simple image path', function () {
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 400w'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 20000w'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 2x'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 10x'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 800w'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 2x'));
+ assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 800w, image2.jpg 2x, image2.jpg 20x'));
+ });
+
+ it('should not match any src attributes', function () {
+ assert.equal(srcset.hasSrcsetProperties('image400w.jpg'), false);
+ assert.equal(srcset.hasSrcsetProperties('image 400w.jpg'), false);
+ assert.equal(srcset.hasSrcsetProperties('image2x.jpg'), false);
+ assert.equal(srcset.hasSrcsetProperties('image 2x.jpg'), false);
+ assert.equal(srcset.hasSrcsetProperties('image,400w.jpg'), false);
+ assert.equal(srcset.hasSrcsetProperties('image_400w,.jpg'), false);
+ });
+
+ it('is aware of edge case limitations', function () {
+ // The following should not be ok
+ assert.ok(srcset.hasSrcsetProperties('image 400w,.jpg'));
+ assert.ok(srcset.hasSrcsetProperties('image 400w ,hello.jpg'));
+ assert.ok(srcset.hasSrcsetProperties('image 2x ,.jpg'));
+ })
+ });
});
diff --git a/test/with-inline-requires.handlebars b/test/with-inline-requires.handlebars
index 21a58912..d8061c21 100644
--- a/test/with-inline-requires.handlebars
+++ b/test/with-inline-requires.handlebars
@@ -1 +1,6 @@
{{image "images/path/to/image"}}
+
+
+
+
+