Merge pull request #69 from elsbree/master

Add support for 'insertAt' parameter
webpack-contrib · Oct 15, 2015 · 3944f22 · 3944f22
2 parents 6d76315 + a081f99
commit 3944f22
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,10 @@ Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`
 
 ### Options
 
+#### `insertAt`
+
+By default, the style-loader appends `<style>` elements to the end of the `<head>` tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'bottom', e.g. `require('../style.css?insertAt=bottom')`.
+
 #### `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 number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (`?singleton` or `?-singleton`).

diff --git a/addStyles.js b/addStyles.js
@@ -29,6 +29,9 @@ module.exports = function(list, options) {
 	// tags it will allow on a page
 	if (typeof options.singleton === "undefined") options.singleton = isOldIE();
 
+	// By default, add <style> tags to the bottom of <head>.
+	if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
+
 	var styles = listToStyles(list);
 	addStylesToDom(styles, options);
 
@@ -95,11 +98,17 @@ function listToStyles(list) {
 	return styles;
 }
 
-function createStyleElement() {
+function createStyleElement(options) {
 	var styleElement = document.createElement("style");
 	var head = getHeadElement();
 	styleElement.type = "text/css";
-	head.appendChild(styleElement);
+	if (options.insertAt === "top") {
+		head.insertBefore(styleElement, head.firstChild);
+	} else if (options.insertAt === "bottom") {
+		head.appendChild(styleElement);
+	} else {
+		throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
+	}
 	return styleElement;
 }
 
@@ -116,7 +125,7 @@ function addStyle(obj, options) {
 
 	if (options.singleton) {
 		var styleIndex = singletonCounter++;
-		styleElement = singletonElement || (singletonElement = createStyleElement());
+		styleElement = singletonElement || (singletonElement = createStyleElement(options));
 		update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
 		remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
 	} else if(obj.sourceMap &&
@@ -133,7 +142,7 @@ function addStyle(obj, options) {
 				URL.revokeObjectURL(styleElement.href);
 		};
 	} else {
-		styleElement = createStyleElement();
+		styleElement = createStyleElement(options);
 		update = applyToTag.bind(null, styleElement);
 		remove = function() {
 			styleElement.parentNode.removeChild(styleElement);