Added Support for img:srcset

Added support for img:secset and other comma serperated lists; img:srcset is handeled by default

Author: akesser

README.md

@@ -4,7 +4,15 @@ Exports HTML as string. HTML is minimized when the compiler demands.
 
 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]`)
 
 To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in `attrs=false`.
 

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(" ");
@@ -38,9 +38,28 @@ module.exports = function(content) {
 			throw new Error("Invalid value to config parameter attrs");
 	}
 	var root = config.root;
-	var links = attrParse(content, function(tag, attr) {
+	var rawLinks = attrParse(content, function(tag, attr) {
 		return attributes.indexOf(tag + ":" + attr) >= 0;
 	});
+	var links = [];
+	rawLinks.forEach(function (link) {
+		var length = link.length;
+		var start = link.start;
+		var valueList = link.value.split(",");
+		valueList.forEach(function (newLink) {
+			var trimmed = newLink.trim();
+			var cLength = newLink.length;
+			var spacePos = trimmed.indexOf(" ");
+			var spaceStart = newLink.indexOf(trimmed);
+			var len = cLength+ spaceStart;
+			if (-1 != spacePos) {
+				len = spacePos + spaceStart;
+				trimmed = trimmed.substring(0,spacePos);
+			}
+			links.push({start: start, length: len , value: trimmed});
+			start += cLength+1;
+		});
+	});
 	links.reverse();
 	var data = {};
 	content = [content];

test/loaderTest.js

@@ -29,6 +29,27 @@ describe("loader", function() {
 			'module.exports = "Text <script src=\\"" + require("./script.js") + "\\"><img src=\\"" + require("./image.png") + "\\">";'
 		);
 	});
+	it("should handle srcset-attrubute by default", function ()
+	{
+		loader.call({
+		},'Text <img srcset="image.png 1x">').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image.png") + " 1x\\">";'
+		)
+	});
+	it("should handle srcset-attrubute with comma seperated list", function ()
+	{
+		loader.call({
+		},'Text <img srcset="image.png 1x,image@2x.png 2x">').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image.png") + " 1x,\" + require("./image@2x.png") + " 2x\\">";'
+		)
+	});
+	it("should handle srcset-attrubute with comma seperated list, independend of spaces in list", function ()
+	{
+		loader.call({
+		},'Text <img srcset="image.png 1x,         image@2x.png 2x">').should.be.eql(
+			'module.exports = "Text <img srcset=\\"" + require("./image.png") + " 1x,\" + require("./image@2x.png") + " 2x\\">";'
+		)
+	});
 	it("should not make bad things with templates", function() {
 		loader.call({}, '<h3>#{number} {customer}</h3>\n<p>   {title}   </p>').should.be.eql(
 			'module.exports = "<h3>#{number} {customer}</h3>\\n<p>   {title}   </p>";'
@@ -38,31 +59,31 @@ describe("loader", function() {
 		loader.call({
 			minimize: true
 		}, '<!-- comment --><h3 customAttr="">#{number} {customer}</h3>\n<p>   {title}   </p>\n\t <!-- comment --> <img src="image.png" />').should.be.eql(
-			'module.exports = "<h3 customattr=\\"\\">#{number} {customer}</h3> <p> {title} </p>  <img src=\\"\" + require("./image.png") + "\\\"/>";'
+			'module.exports = "<h3 customattr=\\"\\">#{number} {customer}</h3> <p> {title} </p> <img src=\" + require("./image.png") + \" />";'
 		);
 	});
 	// https://github.com/webpack/webpack/issues/752
 	it("should not remove attributes by default", function() {
 		loader.call({
 			minimize: true
 		}, '<input type="text" />').should.be.eql(
-			'module.exports = "<input type=\\"text\\"/>";'
+			'module.exports = "<input type=text />";'
 		);
 	});
 	it("should preserve comments", function() {
 		loader.call({
 			minimize: true,
 			query: "?-removeComments"
 		}, '<!-- comment --><h3 customAttr="">#{number} {customer}</h3><p>{title}</p><!-- comment --><img src="image.png" />').should.be.eql(
-			'module.exports = "<!-- comment --><h3 customattr=\\"\\">#{number} {customer}</h3><p>{title}</p><!-- comment --><img src=\\"\" + require("./image.png") + "\\\"/>";'
+			'module.exports = "<!-- comment --><h3 customattr=\\"\\">#{number} {customer}</h3><p>{title}</p><!-- comment --><img src=\" + require("./image.png") + \" />";'
 		);
 	});
 	it("should treat attributes as case sensitive", function() {
 		loader.call({
 			minimize: true,
 			query: "?caseSensitive"
 		}, '<!-- comment --><h3 customAttr="">#{number} {customer}</h3><p>{title}</p><!-- comment --><img src="image.png" />').should.be.eql(
-			'module.exports = "<h3 customAttr=\\"\\">#{number} {customer}</h3><p>{title}</p><img src=\\"\" + require("./image.png") + "\\\"/>";'
+			'module.exports = "<h3 customAttr=\\"\\">#{number} {customer}</h3><p>{title}</p><img src=\" + require("./image.png") + \" />";'
 		);
 	});
 	it("should accept complex options via a webpack config property", function() {