fix: insertInto and insertAt collaboration (#325)

Vasikaran · evilebottnawi · commit c7d8fecb8cca · 2018-05-08T12:14:45.000+03:00
diff --git a/lib/addStyles.js b/lib/addStyles.js
@@ -23,14 +23,17 @@ var isOldIE = memoize(function () {
 	return window && document && document.all && !window.atob;
 });
 
-var getTarget = function (target) {
+var getTarget = function (target, parent) {
+  if (parent){
+    return parent.querySelector(target);
+  }
   return document.querySelector(target);
 };
 
 var getElement = (function (fn) {
 	var memo = {};
 
-	return function(target) {
+	return function(target, parent) {
                 // If passing function in options, then use it for resolve "head" element.
                 // Useful for Shadow Root style i.e
                 // {
@@ -40,7 +43,7 @@ var getElement = (function (fn) {
                         return target();
                 }
                 if (typeof memo[target] === "undefined") {
-			var styleTarget = getTarget.call(this, target);
+			var styleTarget = getTarget.call(this, target, parent);
 			// Special case to return head of iframe instead of iframe itself
 			if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
 				try {
@@ -181,7 +184,7 @@ function insertStyleElement (options, style) {
 	} else if (options.insertAt === "bottom") {
 		target.appendChild(style);
 	} else if (typeof options.insertAt === "object" && options.insertAt.before) {
-		var nextSibling = getElement(options.insertInto + " " + options.insertAt.before);
+		var nextSibling = getElement(options.insertAt.before, target);
 		target.insertBefore(style, nextSibling);
 	} else {
 		throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
diff --git a/test/basic.test.js b/test/basic.test.js
@@ -25,7 +25,7 @@ describe("basic tests", function() {
     rootDir = path.resolve(__dirname + "/../") + "/",
     jsdomHtml = [
       "<html>",
-      "<head>",
+      "<head id='head'>",
       existingStyle,
       "</head>",
       "<body>",
@@ -158,6 +158,30 @@ describe("basic tests", function() {
     }, selector);
   });
 
+  it("insert at before with insert into custom element by function", function(done) {
+    const selector = "#head";
+    styleLoaderOptions.insertInto = () => document.querySelector("#head");
+
+    styleLoaderOptions.insertAt = {
+        before: "#existing-style"
+    };
+
+    let expected = requiredCss;
+
+    runCompilerTest(expected, done, function() {
+      let head = this.document.querySelector(selector);
+      let existingStyleIndex;
+      for (let i = 0; i < head.children.length; i++){
+        let html = `<style id="existing-style">${head.children[i].innerHTML}</style>`;
+        if(html === existingStyle){
+            existingStyleIndex = i;
+            break;
+        }
+      }
+      return head.children[existingStyleIndex - 1].innerHTML;
+    }, selector);
+  }); // it insert at before with insert into
+
   it("singleton (true)", function(done) {
     // Setup
     styleLoaderOptions.singleton = true;
