feat: add srcset support (<img>)

README.md

@@ -25,7 +25,16 @@ npm i -D html-loader
 
 By default every local `<img src="image.png">` is required (`require('./image.png')`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
 
-You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `<tag>:<attribute>` combinations. (Default: `attrs=img:src`)
+Also every `<img srcset="..."`> is converted to `require` statements. For example
+``` html
+<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x">
+```
+is converted to
+``` javascript
+"<img src=\"" + require("./image.jpg") + "\" srcset=\"" + require("./image.jpg") + " 1x, " + require("./image@2x.jpg") + " 2x \">"
+```
+
+You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `<tag>:<attribute>` combinations. (Default: `attrs=[img:src, img:srcset]`). The srcset-specific qualifiers such as `100w` or `3x` are supported in any processed attribute.
 
 If you use `<custom-elements>`, and lots of them make use of a `custom-src` attribute, you don't have to specify each combination `<tag>:<attribute>`: just specify an empty tag like `attrs=:custom-src` and it will match every element.
 

index.js

@@ -26,7 +26,7 @@ function getLoaderConfig(context) {
 module.exports = function(content) {
 	this.cacheable && this.cacheable();
 	var config = getLoaderConfig(this);
-	var attributes = ["img:src"];
+	var attributes = ["img:src", "img:srcset"];
 	if(config.attrs !== undefined) {
 		if(typeof config.attrs === "string")
 			attributes = config.attrs.split(" ");

lib/attributesParser.js

@@ -3,14 +3,18 @@
 	Author Tobias Koppers @sokra
 */
 var Parser = require("fastparse");
+var srcset = require("./attrs/srcset");
 
 var processMatch = function(match, strUntilValue, name, value, index) {
 	if(!this.isRelevantTagAttr(this.currentTag, name)) return;
-	this.results.push({
-		start: index + strUntilValue.length,
-		length: value.length,
-		value: value
-	});
+
+	// tag might reference several images via srcset syntax
+	var start = index + strUntilValue.length;
+	var subMatches = srcset.split(start, value);
+
+	for (var i = 0; i < subMatches.length; ++i) {
+		this.results.push(subMatches[i]);
+	}
 };
 
 var parser = new Parser({

lib/attrs/srcset.js

@@ -0,0 +1,41 @@
+var SRCSET_REGEXP = /(\s+(\d+w))?(\s+(\d+x))?\s*$/;
+
+function split(start, value) {
+	var matches = [];
+
+	// allow to load several urls in srcsets, separated by commas
+	var subMatches = value.split(/,/);
+
+	for(var i = 0; i < subMatches.length; ++i) {
+		var subMatch = {
+			start: start,
+			value: subMatches[i],
+			length: subMatches[i].length
+		};
+		// save position of the next match
+		var next = start + subMatch.length + 1;
+
+		// remove initial spacing
+		var space = /^\s+/.exec(subMatch.value);
+		if(space) {
+			subMatch.value = subMatch.value.substr(space[0].length)
+		}
+
+		// remove srcset qualifiers (2x, 110w, etc.) at the end
+		var qualifier = SRCSET_REGEXP.exec(subMatch.value);
+		if(qualifier) {
+			var qualifierLength = qualifier[0].length;
+			subMatch.length -= qualifierLength;
+			subMatch.value = subMatch.value.substr(0, subMatch.value.length - qualifierLength);
+		}
+
+		matches.push(subMatch);
+		start = next;
+	}
+
+	return matches;
+}
+
+module.exports = {
+	split: split
+};

test/loaderTest.js

@@ -3,11 +3,31 @@ var should = require("should");
 var loader = require("../");
 
 describe("loader", function() {
-	it("should convert to requires", function() {
+	it("should convert src to requires", function() {
 		loader.call({}, 'Text <img src="image.png"><img src="~bootstrap-img"> Text').should.be.eql(
 			'module.exports = "Text <img src=\\"" + require("./image.png") + "\\"><img src=\\"" + require("bootstrap-img") + "\\"> Text";'
 		);
 	});
+	it("should convert srcset to requires", function() {
+		loader.call({}, 'Text <img srcset="image@2x.png 2x, ~bootstrap-img 3x"> Text').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image@2x.png") + " 2x," + require("bootstrap-img") + " 3x\\"> Text";'
+		);
+	});
+	it("should support both src srcset on a same element", function() {
+		loader.call({}, 'Text <img src="image.png" srcset="image@2x.png 2x, ~bootstrap-img 3x"> Text').should.be.eql(
+			'module.exports = "Text <img src=\\"" + require("./image.png") + "\\" srcset=\\"" + require("./image@2x.png") + " 2x," + require("bootstrap-img") + " 3x\\"> Text";'
+		);
+	});
+	it("should support multiple srcset qualifiers on a same element", function() {
+		loader.call({}, 'Text <img srcset="image-300w@2x.png 300w 2x, image@2x.png 2x"> Text').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image-300w@2x.png") + " 300w 2x," + require("./image@2x.png") + " 2x\\"> Text";'
+		);
+	});
+	it("should normalize spacing between entries of a srcset attribute", function() {
+		loader.call({}, 'Text <img srcset="image.png 1x,       image@2x.png 300w 2x,   image@3x.png 3x"> Text').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image.png") + " 1x," + require("./image@2x.png") + " 300w 2x," + require("./image@3x.png") + " 3x\\"> Text";'
+		);
+	});
 	it("should accept attrs from query", function() {
 		loader.call({
 			query: "?attrs=script:src"