From c7d8fecb8ccaa29bd961d560a518267f763e74ba Mon Sep 17 00:00:00 2001 From: Vasi Date: Tue, 8 May 2018 14:44:45 +0530 Subject: [PATCH] fix: insertInto and insertAt collaboration (#325) --- lib/addStyles.js | 11 +++++++---- test/basic.test.js | 26 +++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/lib/addStyles.js b/lib/addStyles.js index c0767b01..6ae09d8f 100644 --- 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 index 3725e962..fa4ceb63 100644 --- a/test/basic.test.js +++ b/test/basic.test.js @@ -25,7 +25,7 @@ describe("basic tests", function() { rootDir = path.resolve(__dirname + "/../") + "/", jsdomHtml = [ "", - "", + "", existingStyle, "", "", @@ -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 = ``; + 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;