Merge pull request webpack-contrib#24 from diurnalist/feature/singlet…

…on-tag

Adds `singleton` option to allow re-using a single <style> element

README.md

@@ -32,6 +32,12 @@ Styles are not added on require, but instead on call to `use`/`ref`. Styles are
 
 Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
 
+### Options
+
+#### `singleton`
+
+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 # of style tags allowed on a page.
+
 ## 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`).

addStyles.js

@@ -2,14 +2,36 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
-var stylesInDom = {};
+var stylesInDom = {},
+	memoize = function(fn) {
+		var memo;
+		return function () {
+			if (typeof memo === "undefined") memo = fn.apply(this, arguments);
+			return memo;
+		};
+	},
+	isIE9 = memoize(function() {
+		return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
+	}),
+	getHeadElement = memoize(function () {
+		return document.head || document.getElementsByTagName("head")[0];
+	}),
+	singletonElement = null,
+	singletonCounter = 0;
 
-module.exports = function(list) {
+module.exports = function(list, 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 || {};
+	// Force single-tag solution on IE9, which has a hard limit on the # of <style>
+	// tags it will allow on a page
+	if (typeof options.singleton === "undefined") options.singleton = isIE9();
+
 	var styles = listToStyles(list);
-	addStylesToDom(styles);
+	addStylesToDom(styles, options);
+
 	return function update(newList) {
 		var mayRemove = [];
 		for(var i = 0; i < styles.length; i++) {
@@ -20,7 +42,7 @@ module.exports = function(list) {
 		}
 		if(newList) {
 			var newStyles = listToStyles(newList);
-			addStylesToDom(newStyles);
+			addStylesToDom(newStyles, options);
 		}
 		for(var i = 0; i < mayRemove.length; i++) {
 			var domStyle = mayRemove[i];
@@ -33,7 +55,7 @@ module.exports = function(list) {
 	};
 }
 
-function addStylesToDom(styles) {
+function addStylesToDom(styles, options) {
 	for(var i = 0; i < styles.length; i++) {
 		var item = styles[i];
 		var domStyle = stylesInDom[item.id];
@@ -43,12 +65,12 @@ function addStylesToDom(styles) {
 				domStyle.parts[j](item.parts[j]);
 			}
 			for(; j < item.parts.length; j++) {
-				domStyle.parts.push(addStyle(item.parts[j]));
+				domStyle.parts.push(addStyle(item.parts[j], options));
 			}
 		} else {
 			var parts = [];
 			for(var j = 0; j < item.parts.length; j++) {
-				parts.push(addStyle(item.parts[j]));
+				parts.push(addStyle(item.parts[j], options));
 			}
 			stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
 		}
@@ -73,44 +95,95 @@ function listToStyles(list) {
 	return styles;
 }
 
-function addStyle(obj) {
+function createStyleElement() {
 	var styleElement = document.createElement("style");
-	var head = document.head || document.getElementsByTagName("head")[0];
+	var head = getHeadElement();
 	styleElement.type = "text/css";
 	head.appendChild(styleElement);
-	applyToTag(styleElement, obj);
-	return function(newObj) {
+	return styleElement;
+}
+
+function addStyle(obj, options) {
+	var styleElement, update, remove;
+
+	if (options.singleton) {
+		var styleIndex = singletonCounter++;
+		styleElement = singletonElement || (singletonElement = createStyleElement());
+		update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
+		remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
+	} else {
+		styleElement = createStyleElement();
+		update = applyToTag.bind(null, styleElement);
+		remove = function () {
+			styleElement.parentNode.removeChild(styleElement);
+		};
+	}
+
+	update(obj);
+
+	return function updateStyle(newObj) {
 		if(newObj) {
 			if(newObj.css === obj.css && newObj.media === obj.media /*&& newObj.sourceMap === obj.sourceMap*/)
 				return;
-			applyToTag(styleElement, obj = newObj);
+			update(obj = newObj);
 		} else {
-			head.removeChild(styleElement);
+			remove();
 		}
 	};
-};
+}
+
+function replaceText(source, id, replacement) {
+	var boundaries = ["/** >>" + id + " **/", "/** " + id + "<< **/"];
+	var start = source.lastIndexOf(boundaries[0]);
+	var wrappedReplacement = replacement
+		? (boundaries[0] + replacement + boundaries[1])
+		: "";
+	if (source.lastIndexOf(boundaries[0]) >= 0) {
+		var end = source.lastIndexOf(boundaries[1]) + boundaries[1].length;
+		return source.slice(0, start) + wrappedReplacement + source.slice(end);
+	} else {
+		return source + wrappedReplacement;
+	}
+}
+
+function applyToSingletonTag(styleElement, index, remove, obj) {
+	var css = remove ? "" : obj.css;
+
+	if(styleElement.styleSheet) {
+		styleElement.styleSheet.cssText = replaceText(styleElement.styleSheet.cssText, index, css);
+	} else {
+		var cssNode = document.createTextNode(css);
+		var childNodes = styleElement.childNodes;
+		if (childNodes[index]) styleElement.removeChild(childNodes[index]);
+		if (childNodes.length) {
+			styleElement.insertBefore(cssNode, childNodes[index]);
+		} else {
+			styleElement.appendChild(cssNode);
+		}
+	}
+}
 
 function applyToTag(styleElement, obj) {
 	var css = obj.css;
 	var media = obj.media;
 	// var sourceMap = obj.sourceMap;
-
 	// No browser support
 	// if(sourceMap && typeof btoa === "function") {
 		// try {
 			// css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(JSON.stringify(sourceMap)) + " */";
 		// } catch(e) {}
 	// }
+
 	if(media) {
 		styleElement.setAttribute("media", media)
 	}
-	if (styleElement.styleSheet) {
+
+	if(styleElement.styleSheet) {
 		styleElement.styleSheet.cssText = css;
 	} else {
 		while(styleElement.firstChild) {
 			styleElement.removeChild(styleElement.firstChild);
 		}
 		styleElement.appendChild(document.createTextNode(css));
 	}
-
 }

index.js

@@ -2,18 +2,20 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
-var path = require("path");
+var loaderUtils = require("loader-utils"),
+	path = require("path");
 module.exports = function() {};
 module.exports.pitch = function(remainingRequest) {
 	this.cacheable && this.cacheable();
+	var query = loaderUtils.parseQuery(this.query);
 	return [
 		"// style-loader: Adds some css to the DOM by adding a <style> tag",
 		"",
 		"// load the styles",
 		"var content = require(" + JSON.stringify("!!" + remainingRequest) + ");",
 		"if(typeof content === 'string') content = [[module.id, content, '']];",
 		"// add the styles to the DOM",
-		"var update = require(" + JSON.stringify("!" + path.join(__dirname, "addStyles.js")) + ")(content);",
+		"var update = require(" + JSON.stringify("!" + path.join(__dirname, "addStyles.js")) + ")(content, " + JSON.stringify(query) + ");",
 		"// Hot Module Replacement",
 		"if(module.hot) {",
 		"	// When the styles change, update the <style> tags",

package.json

@@ -1,19 +1,22 @@
-{
-	"name": "style-loader",
-	"version": "0.8.1",
-	"author": "Tobias Koppers @sokra",
-	"description": "style loader module for webpack",
-	"devDependencies": {
-		"css-loader": "~0.8.0"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git@github.com:webpack/style-loader.git"
-	},
-	"licenses": [
-		{
-			"type": "MIT",
-			"url": "http://www.opensource.org/licenses/mit-license.php"
-		}
-	]
-}
+{
+	"name": "style-loader",
+	"version": "0.8.1",
+	"author": "Tobias Koppers @sokra",
+	"description": "style loader module for webpack",
+	"devDependencies": {
+		"css-loader": "~0.8.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:webpack/style-loader.git"
+	},
+	"licenses": [
+		{
+			"type": "MIT",
+			"url": "http://www.opensource.org/licenses/mit-license.php"
+		}
+	],
+	"dependencies": {
+		"loader-utils": "^0.2.5"
+	}
+}