finalized insertAt=top

webpack-contrib · Oct 19, 2015 · 4a13ce9 · 4a13ce9
1 parent 8699f48
commit 4a13ce9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git 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
@@ -99,31 +99,44 @@ 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") {
 		head.appendChild(styleElement);
 	} 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,18 +154,18 @@ 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);
 		};
 	} else {
 		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
@@ -0,0 +1,3 @@
+body {
+	border: 3px solid blue;
+}
diff --git a/fixtures/entry.js b/fixtures/entry.js
@@ -1,2 +1,3 @@
 require("./b.css");
-require("./a.css");
+require("./a.css");
+require("./c.css");
diff --git 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" }
 		]
 	}
 }