From 4a13ce95900ea4da426f6deaf21f04aec64ccb8e Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Mon, 19 Oct 2015 20:54:35 +0200
Subject: [PATCH] finalized insertAt=top

---
 README.md                  |  2 +-
 addStyles.js               | 35 ++++++++++++++++++++++++-----------
 fixtures/c.css             |  3 +++
 fixtures/entry.js          |  3 ++-
 fixtures/webpack.config.js |  2 +-
 5 files changed, 31 insertions(+), 14 deletions(-)
 create mode 100644 fixtures/c.css
diff --git a/README.md b/README.md
index 19f244b..db97d4a 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`
 
 #### `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')`.
+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 'top', e.g. `require('../style.css?insertAt=top')`.
 
 #### `singleton`
 
diff --git a/addStyles.js b/addStyles.js
index b1907d0..108a5f4 100644
--- a/addStyles.js
+++ b/addStyles.js
@@ -99,16 +99,16 @@ function listToStyles(list) {
 	return styles;
 }
 
-function createStyleElement(options) {
-	var styleElement = document.createElement("style");
+function insertStyleElement(options, styleElement) {
 	var head = getHeadElement();
 	var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
-	styleElement.type = "text/css";
 	if (options.insertAt === "top") {
-		if(lastStyleElementInsertedAtTop) {
+		if(!lastStyleElementInsertedAtTop) {
+			head.insertBefore(styleElement, head.firstChild);
+		} else if(lastStyleElementInsertedAtTop.nextSibling) {
 			head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
 		} else {
-			head.insertBefore(styleElement, head.firstChild);
+			head.appendChild(styleElement);
 		}
 		styleElementsInsertedAtTop.push(styleElement);
 	} else if (options.insertAt === "bottom") {
@@ -116,14 +116,27 @@ function createStyleElement(options) {
 	} else {
 		throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
 	}
+}
+
+function removeStyleElement(styleElement) {
+	styleElement.parentNode.removeChild(styleElement);
+	var idx = styleElementsInsertedAtTop.indexOf(styleElement);
+	if(idx >= 0) {
+		styleElementsInsertedAtTop.splice(idx, 1);
+	}
+}
+
+function createStyleElement(options) {
+	var styleElement = document.createElement("style");
+	styleElement.type = "text/css";
+	insertStyleElement(options, styleElement);
 	return styleElement;
 }
 
-function createLinkElement() {
+function createLinkElement(options) {
 	var linkElement = document.createElement("link");
-	var head = getHeadElement();
 	linkElement.rel = "stylesheet";
-	head.appendChild(linkElement);
+	insertStyleElement(options, linkElement);
 	return linkElement;
 }
 
@@ -141,10 +154,10 @@ function addStyle(obj, options) {
 		typeof URL.revokeObjectURL === "function" &&
 		typeof Blob === "function" &&
 		typeof btoa === "function") {
-		styleElement = createLinkElement();
+		styleElement = createLinkElement(options);
 		update = updateLink.bind(null, styleElement);
 		remove = function() {
-			styleElement.parentNode.removeChild(styleElement);
+			removeStyleElement(styleElement);
 			if(styleElement.href)
 				URL.revokeObjectURL(styleElement.href);
 		};
@@ -152,7 +165,7 @@ function addStyle(obj, options) {
 		styleElement = createStyleElement(options);
 		update = applyToTag.bind(null, styleElement);
 		remove = function() {
-			styleElement.parentNode.removeChild(styleElement);
+			removeStyleElement(styleElement);
 		};
 	}
 
diff --git a/fixtures/c.css b/fixtures/c.css
new file mode 100644
index 0000000..4078659
--- /dev/null
+++ b/fixtures/c.css
@@ -0,0 +1,3 @@
+body {
+	border: 3px solid blue;
+}
\ No newline at end of file
diff --git a/fixtures/entry.js b/fixtures/entry.js
index 9938b27..e6fdbda 100644
--- a/fixtures/entry.js
+++ b/fixtures/entry.js
@@ -1,2 +1,3 @@
 require("./b.css");
-require("./a.css");
\ No newline at end of file
+require("./a.css");
+require("./c.css");
diff --git a/fixtures/webpack.config.js b/fixtures/webpack.config.js
index 89cd072..151c9e4 100644
--- a/fixtures/webpack.config.js
+++ b/fixtures/webpack.config.js
@@ -1,7 +1,7 @@
 module.exports = {
 	module: {
 		loaders: [
-			{ test: /\.css$/, loader: "style!css?sourceMap" }
+			{ test: /\.css$/, loader: "style?insertAt=top!css?sourceMap" }
 		]
 	}
 }
\ No newline at end of file
