feat(tag-attribute): Add support for custom tag attribute

webpack-contrib · Mar 15, 2017 · 995f3de · 995f3de
1 parent 2a2f261
commit 995f3de
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -72,6 +72,16 @@ By default, the style-loader appends `<style>` elements to the end of the `<head
 
 If defined, the style-loader will re-use a single `<style>` element, instead of adding/removing individual elements for each required module. **Note:** this option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (`?singleton` or `?-singleton`).
 
+#### `attrs`
+
+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');
+
+// will create style tag <style id="style-tag-id">
+```
+
 ### Recommended configuration
 
 By convention the reference-counted API should be bound to `.useable.css` and the simple API to `.css` (similar to other file types, i.e. `.useable.less` and `.less`).
@@ -92,7 +102,7 @@ So the recommended configuration for webpack is:
       {
         test: /\.useable\.css$/,
         use: [
-          { 
+          {
             loader: "style-loader",
             options: {
               useable: true

diff --git a/addStyles.js b/addStyles.js
@@ -26,6 +26,8 @@ module.exports = function(list, options) {
 	}
 
 	options = options || {};
+	options.attrs = typeof options.attrs === "object" ? options.attrs : {};
+
 	// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 	// tags it will allow on a page
 	if (typeof options.singleton === "undefined") options.singleton = isOldIE();
@@ -128,19 +130,29 @@ function removeStyleElement(styleElement) {
 
 function createStyleElement(options) {
 	var styleElement = document.createElement("style");
-	styleElement.type = "text/css";
+	options.attrs.type = "text/css";
+
+	attachTagAttrs(styleElement, options.attrs);
 	insertStyleElement(options, styleElement);
 	return styleElement;
 }
 
 function createLinkElement(options) {
 	var linkElement = document.createElement("link");
-	linkElement.rel = "stylesheet";
-	linkElement.type = "text/css";
+	options.attrs.type = "text/css";
+	options.attrs.rel = "stylesheet";
+
+	attachTagAttrs(linkElement, options.attrs);
 	insertStyleElement(options, linkElement);
 	return linkElement;
 }
 
+function attachTagAttrs(element, attrs) {
+	Object.keys(attrs).forEach(function (key) {
+		element.setAttribute(key, attrs[key]);
+	});
+}
+
 function addStyle(obj, options) {
 	var styleElement, update, remove;
 

diff --git a/test/basicTest.js b/test/basicTest.js
@@ -45,7 +45,7 @@ describe("basic tests", function() {
     },
     module: {
       rules: [cssRule]
-    }    
+    }
   };
 
   beforeEach(function() {
@@ -102,6 +102,26 @@ describe("basic tests", function() {
     runCompilerTest(expected, done);
   }); // it singleton
 
+  it("attrs", function(done) {
+    // Setup
+    styleLoaderOptions.attrs = {id: 'style-tag-id'};
+
+    fs.writeFileSync(
+      rootDir + "main.js",
+      [
+        "var a = require('./style.css');"
+      ].join("\n")
+    );
+
+    // Run
+    let expected = [
+      existingStyle,
+      `<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
+    ].join("\n");
+
+    runCompilerTest(expected, done);
+  }); // it attrs
+
   it("url", function(done) {
     cssRule.use = [
       {