feat: Set custom attributes for tag in url mode (#198)

* Add ability to set custom attributes for tag in url mode
webpack-contrib · Mar 22, 2017 · 2c4f427 · 2c4f427
1 parent 1f68495
commit 2c4f427
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -84,10 +84,16 @@ If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be
 If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
 Usage:
 ```javascript
-require('style-loader?{attrs:{id: "style-tag-id"}}!style.scss');
+require('style-loader?{attrs:{id: "style-tag-id"}}!style.css');
 
 // will create style tag <style id="style-tag-id">
 ```
+Usage in `url` mode:
+```javascript
+require('style-loader/url?{attrs:{prop: "value"}}!file-loader!style.css')
+
+// will create link tag <link rel="stylesheet" type="text/css" href="[path]/style.css" prop="value">
+```
 
 ### Recommended configuration
 

diff --git a/addStyleUrl.js b/addStyleUrl.js
@@ -2,14 +2,28 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
-module.exports = function addStyleUrl(cssUrl) {
+
+function attachTagAttrs(element, attrs) {
+	Object.keys(attrs).forEach(function (key) {
+		element.setAttribute(key, attrs[key]);
+	});
+}
+
+module.exports = function addStyleUrl(cssUrl, options) {
 	if(typeof DEBUG !== "undefined" && DEBUG) {
 		if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
 	}
+
+	options = options || {};
+	options.attrs = typeof options.attrs === "object" ? options.attrs : {};
+
 	var styleElement = document.createElement("link");
 	styleElement.rel = "stylesheet";
 	styleElement.type = "text/css";
 	styleElement.href = cssUrl;
+
+	attachTagAttrs(styleElement, options.attrs);
+
 	var head = document.getElementsByTagName("head")[0];
 	head.appendChild(styleElement);
 	if(module.hot) {

diff --git a/test/basicTest.js b/test/basicTest.js
@@ -155,6 +155,29 @@ describe("basic tests", function() {
     runCompilerTest(expected, done);
   }); // it url
 
+  it("url with attrs", function (done) {
+    cssRule.use = [
+      {
+        loader: "style-loader/url",
+        options: {
+          attrs: {
+            'data-attr-1': 'attr-value-1',
+            'data-attr-2': 'attr-value-2'
+          }
+        }
+      },
+      "file-loader"
+    ];
+
+    // Run
+    let expected = [
+      existingStyle,
+      '<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css" data-attr-1="attr-value-1" data-attr-2="attr-value-2">'
+    ].join("\n");
+
+    runCompilerTest(expected, done);
+  }); // it url with attrs
+
   it("useable", function(done) {
     cssRule.use = [
       {

diff --git a/url.js b/url.js
@@ -7,11 +7,12 @@ var loaderUtils = require("loader-utils"),
 module.exports = function() {};
 module.exports.pitch = function(remainingRequest) {
 	this.cacheable && this.cacheable();
+	var query = loaderUtils.getOptions(this) || {};
 	return [
 		"// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
 		"var update = require(" + JSON.stringify("!" + path.join(__dirname, "addStyleUrl.js")) + ")(",
 		"\trequire(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ")",
-		");",
+		", " + JSON.stringify(query) + ");",
 		"// Hot Module Replacement",
 		"if(module.hot) {",
 		"\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ", function() {",