From 806411d888a74d41c0199a5424bf120576ff0942 Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 16:54:48 +0300
Subject: [PATCH 1/6] feat: insert option as modulepath

---
 src/index.js                                  |  50 +++++---
 src/utils.js                                  |  28 +++--
 test/__snapshots__/insert-option.test.js.snap | 114 ++++++++++++++++++
 test/fixtures/insertFn.js                     |  19 +++
 test/insert-option.test.js                    |  18 +++
 5 files changed, 202 insertions(+), 27 deletions(-)
 create mode 100644 test/fixtures/insertFn.js

diff --git a/src/index.js b/src/index.js
index 373986b6..bc19a050 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
+import path from "path";
+
 import {
   getImportInsertStyleElementCode,
   getImportGetTargetCode,
@@ -26,7 +28,6 @@ loaderAPI.pitch = function loader(request) {
     typeof options.insert === "string"
       ? JSON.stringify(options.insert)
       : '"head"';
-  const insertIsFunction = typeof options.insert === "function";
   const injectType = options.injectType || "styleTag";
   const { styleTagTransform } = options;
   const esModule =
@@ -41,19 +42,30 @@ loaderAPI.pitch = function loader(request) {
     runtimeOptions.base = options.base;
   }
 
-  const insertFn = insertIsFunction
-    ? options.insert.toString()
-    : `function(style){
-    var target = getTarget(${insert});
-
-    if (!target) {
-      throw new Error(
-        "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
-      );
-    }
+  const insertType =
+    typeof options.insert === "function"
+      ? "function"
+      : options.insert && path.isAbsolute(options.insert)
+      ? "modulePath"
+      : "selector";
+
+  let insertFn;
+
+  if (insertType === "function") {
+    insertFn = options.insert.toString();
+  } else if (insertType === "selector") {
+    insertFn = `function(style){
+      var target = getTarget(${insert});
+
+      if (!target) {
+        throw new Error(
+          "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
+        );
+      }
 
-    target.appendChild(style);
-  }`;
+      target.appendChild(style);
+    }`;
+  }
 
   const styleTagTransformFn =
     typeof styleTagTransform === "function"
@@ -76,7 +88,7 @@ loaderAPI.pitch = function loader(request) {
 
       return `
       ${getImportLinkAPICode(esModule, this)}
-      ${getImportGetTargetCode(esModule, this, insertIsFunction)}
+      ${getImportGetTargetCode(esModule, this, insertType, options)}
       ${getImportLinkContentCode(esModule, this, request)}
       ${
         esModule
@@ -86,7 +98,7 @@ loaderAPI.pitch = function loader(request) {
 
 var options = ${JSON.stringify(runtimeOptions)};
 
-options.insert = ${insertFn};
+options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
 
 var update = API(content, options);
 
@@ -109,7 +121,7 @@ ${esModule ? "export default {}" : ""}`;
 
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
-      ${getImportGetTargetCode(esModule, this, insertIsFunction)}
+      ${getImportGetTargetCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
@@ -131,7 +143,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-options.insert = ${insertFn};
+options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
@@ -168,7 +180,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
       return `
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
-      ${getImportGetTargetCode(esModule, this, insertIsFunction)}
+      ${getImportGetTargetCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
@@ -183,7 +195,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-options.insert = ${insertFn};
+options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
diff --git a/src/utils.js b/src/utils.js
index 6267edb6..8e532fa7 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -112,15 +112,27 @@ function getImportStyleContentCode(esModule, loaderContext, request) {
     : `var content = require(${modulePath});`;
 }
 
-function getImportGetTargetCode(esModule, loaderContext, insertIsFunction) {
-  const modulePath = stringifyRequest(
-    loaderContext,
-    `!${path.join(__dirname, "runtime/getTarget.js")}`
-  );
+function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
+  if (insertType === "selector") {
+    const modulePath = stringifyRequest(
+      loaderContext,
+      `!${path.join(__dirname, "runtime/getTarget.js")}`
+    );
 
-  return esModule
-    ? `${!insertIsFunction ? `import getTarget from ${modulePath};` : ""}`
-    : `${!insertIsFunction ? `var getTarget = require(${modulePath});` : ""}`;
+    return esModule
+      ? `import getTarget from ${modulePath};`
+      : `var getTarget = require(${modulePath});`;
+  }
+
+  if (insertType === "modulePath") {
+    const modulePath = stringifyRequest(loaderContext, `!${options.insert}`);
+
+    return esModule
+      ? `import insertFn from ${modulePath};`
+      : `var insertFn = require(${modulePath});`;
+  }
+
+  return "";
 }
 
 function getImportInsertStyleElementCode(esModule, loaderContext) {
diff --git a/test/__snapshots__/insert-option.test.js.snap b/test/__snapshots__/insert-option.test.js.snap
index 12c42e44..b2ce4a32 100644
--- a/test/__snapshots__/insert-option.test.js.snap
+++ b/test/__snapshots__/insert-option.test.js.snap
@@ -342,6 +342,30 @@ exports[`"insert" option should insert styles into "head" bottom when not specif
 
 exports[`"insert" option should insert styles into "head" bottom when not specified and when the "injectType" option is "styleTag": warnings 1`] = `Array []`;
 
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazySingletonStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazySingletonStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazySingletonStyleTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head><style>body {
   color: red;
@@ -366,6 +390,30 @@ exports[`"insert" option should insert styles into "head" top when the "injectTy
 
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazySingletonStyleTag": warnings 1`] = `Array []`;
 
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazyStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+</style><style>h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazyStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazyStyleTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazyStyleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head><style>body {
   color: red;
@@ -390,6 +438,24 @@ exports[`"insert" option should insert styles into "head" top when the "injectTy
 
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "lazyStyleTag": warnings 1`] = `Array []`;
 
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "linkTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><link rel=\\"stylesheet\\" href=\\"style.css\\"><link rel=\\"stylesheet\\" href=\\"style-other.css\\">
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "linkTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "linkTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "linkTag": DOM 1`] = `
 "<!DOCTYPE html><html><head><link rel=\\"stylesheet\\" href=\\"style.css\\"><link rel=\\"stylesheet\\" href=\\"style-other.css\\">
   <title>style-loader test</title>
@@ -408,6 +474,30 @@ exports[`"insert" option should insert styles into "head" top when the "injectTy
 
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "linkTag": warnings 1`] = `Array []`;
 
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "singletonStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "singletonStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "singletonStyleTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "singletonStyleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head><style>body {
   color: red;
@@ -432,6 +522,30 @@ exports[`"insert" option should insert styles into "head" top when the "injectTy
 
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "singletonStyleTag": warnings 1`] = `Array []`;
 
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "styleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+</style><style>h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "styleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert styles into "head" top when the "injectType" option is "styleTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "head" top when the "injectType" option is "styleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head><style>body {
   color: red;
diff --git a/test/fixtures/insertFn.js b/test/fixtures/insertFn.js
new file mode 100644
index 00000000..1b5e7db8
--- /dev/null
+++ b/test/fixtures/insertFn.js
@@ -0,0 +1,19 @@
+function insert (element) {
+  const parent = document.querySelector("head");
+  const lastInsertedElement =
+    // eslint-disable-next-line no-underscore-dangle
+    window._lastElementInsertedByStyleLoader;
+
+  if (!lastInsertedElement) {
+    parent.insertBefore(element, parent.firstChild);
+  } else if (lastInsertedElement.nextSibling) {
+    parent.insertBefore(element, lastInsertedElement.nextSibling);
+  } else {
+    parent.appendChild(element);
+  }
+
+  // eslint-disable-next-line no-underscore-dangle
+  window._lastElementInsertedByStyleLoader = element;
+};
+
+module.exports = insert;
diff --git a/test/insert-option.test.js b/test/insert-option.test.js
index d92d4e0b..30247829 100644
--- a/test/insert-option.test.js
+++ b/test/insert-option.test.js
@@ -136,6 +136,24 @@ describe('"insert" option', () => {
       expect(getErrors(stats)).toMatchSnapshot("errors");
     });
 
+    it(`should insert styles into "head" top when the "injectType" option is "${injectType}" and insert is object`, async () => {
+      expect.assertions(3);
+
+      const entry = getEntryByInjectType("simple.js", injectType);
+      const compiler = getCompiler(entry, {
+        injectType,
+        insert: require.resolve("./fixtures/insertFn.js"),
+      });
+      const stats = await compile(compiler);
+
+      runInJsDom("main.bundle.js", compiler, stats, (dom) => {
+        expect(dom.serialize()).toMatchSnapshot("DOM");
+      });
+
+      expect(getWarnings(stats)).toMatchSnapshot("warnings");
+      expect(getErrors(stats)).toMatchSnapshot("errors");
+    });
+
     it(`should insert styles into before "#existing-style" id when the "injectType" option is "${injectType}"`, async () => {
       expect.assertions(3);
 

From 29f1420645594df6409d3bec0c8cb944484baac0 Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 19:26:16 +0300
Subject: [PATCH 2/6] feat: insert option processed path to module

---
 README.md                                     | 32 +++++++++++++++++++
 src/index.js                                  | 24 +++-----------
 src/runtime/getTarget.js                      | 15 ++++++++-
 src/runtime/injectStylesIntoLinkTag.js        |  2 +-
 src/runtime/insertStyleElement.js             |  2 +-
 src/utils.js                                  | 22 +++++++++++--
 test/runtime/injectStylesIntoLinkTag.test.js  |  2 +-
 test/runtime/injectStylesIntoStyleTag.test.js |  2 +-
 8 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 4bf21e3c..2d158561 100644
--- a/README.md
+++ b/README.md
@@ -433,6 +433,8 @@ If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLI
 
 #### `String`
 
+##### `Selector`
+
 Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) where styles inject into the DOM.
 
 **webpack.config.js**
@@ -458,6 +460,36 @@ module.exports = {
 };
 ```
 
+##### `Absolute path to function`
+
+Allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.
+
+> ⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
+> ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: "style-loader",
+            options: {
+              insert: require.resolve("modulePath"),
+            },
+          },
+          "css-loader",
+        ],
+      },
+    ],
+  },
+};
+```
+
 A new `<style>`/`<link>` elements will be inserted into at bottom of `body` tag.
 
 #### `Function`
diff --git a/src/index.js b/src/index.js
index bc19a050..3abba7aa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,7 @@ import {
   getExportStyleCode,
   getExportLazyStyleCode,
   getSetAttributesCode,
+  getInsertOptionCode,
 } from "./utils";
 
 import schema from "./options.json";
@@ -24,10 +25,6 @@ const loaderAPI = () => {};
 
 loaderAPI.pitch = function loader(request) {
   const options = this.getOptions(schema);
-  const insert =
-    typeof options.insert === "string"
-      ? JSON.stringify(options.insert)
-      : '"head"';
   const injectType = options.injectType || "styleTag";
   const { styleTagTransform } = options;
   const esModule =
@@ -51,20 +48,9 @@ loaderAPI.pitch = function loader(request) {
 
   let insertFn;
 
+  // Todo remove "function" type for insert option in next major release, because code duplication occurs. Leave require.resolve()
   if (insertType === "function") {
     insertFn = options.insert.toString();
-  } else if (insertType === "selector") {
-    insertFn = `function(style){
-      var target = getTarget(${insert});
-
-      if (!target) {
-        throw new Error(
-          "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
-        );
-      }
-
-      target.appendChild(style);
-    }`;
   }
 
   const styleTagTransformFn =
@@ -98,7 +84,7 @@ loaderAPI.pitch = function loader(request) {
 
 var options = ${JSON.stringify(runtimeOptions)};
 
-options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
+${getInsertOptionCode(insertType, options, insertFn)}
 
 var update = API(content, options);
 
@@ -143,7 +129,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
+${getInsertOptionCode(insertType, options, insertFn)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
@@ -195,7 +181,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-options.insert = ${insertType === "modulePath" ? "insertFn" : insertFn};
+${getInsertOptionCode(insertType, options, insertFn)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
diff --git a/src/runtime/getTarget.js b/src/runtime/getTarget.js
index 042a4659..d8ea78aa 100644
--- a/src/runtime/getTarget.js
+++ b/src/runtime/getTarget.js
@@ -26,4 +26,17 @@ function getTarget(target) {
   return memo[target];
 }
 
-module.exports = getTarget;
+/* istanbul ignore next  */
+function insertBySelector(style, insert) {
+  const target = getTarget(insert);
+
+  if (!target) {
+    throw new Error(
+      "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
+    );
+  }
+
+  target.appendChild(style);
+}
+
+module.exports = { insertBySelector, getTarget };
diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js
index a7676168..143458fa 100644
--- a/src/runtime/injectStylesIntoLinkTag.js
+++ b/src/runtime/injectStylesIntoLinkTag.js
@@ -21,7 +21,7 @@ module.exports = (url, options) => {
     link.setAttribute(key, options.attributes[key]);
   });
 
-  options.insert(link);
+  options.insert(link, options.insertTag);
 
   return (newUrl) => {
     if (typeof newUrl === "string") {
diff --git a/src/runtime/insertStyleElement.js b/src/runtime/insertStyleElement.js
index 62199710..944b17f0 100644
--- a/src/runtime/insertStyleElement.js
+++ b/src/runtime/insertStyleElement.js
@@ -4,7 +4,7 @@ function insertStyleElement(options) {
 
   options.setAttributes(style, options.attributes);
 
-  options.insert(style);
+  options.insert(style, options.insertTag);
 
   return style;
 }
diff --git a/src/utils.js b/src/utils.js
index 8e532fa7..922b2407 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -120,8 +120,8 @@ function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
     );
 
     return esModule
-      ? `import getTarget from ${modulePath};`
-      : `var getTarget = require(${modulePath});`;
+      ? `import {insertBySelector as insertFn} from ${modulePath};`
+      : `var insertFn = require(${modulePath}).insertBySelector;`;
   }
 
   if (insertType === "modulePath") {
@@ -135,6 +135,23 @@ function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
   return "";
 }
 
+function getInsertOptionCode(insertType, options, insertFn) {
+  if (insertType === "selector") {
+    const insert = options.insert ? JSON.stringify(options.insert) : '"head"';
+
+    return `
+      options.insert = insertFn;
+      options.insertTag = ${insert};
+    `;
+  }
+
+  if (insertType === "modulePath") {
+    return `options.insert = insertFn;`;
+  }
+
+  return `options.insert = ${insertFn};`;
+}
+
 function getImportInsertStyleElementCode(esModule, loaderContext) {
   const modulePath = stringifyRequest(
     loaderContext,
@@ -333,4 +350,5 @@ export {
   getExportStyleCode,
   getExportLazyStyleCode,
   getSetAttributesCode,
+  getInsertOptionCode,
 };
diff --git a/test/runtime/injectStylesIntoLinkTag.test.js b/test/runtime/injectStylesIntoLinkTag.test.js
index 57b6b6fc..95a31b2b 100644
--- a/test/runtime/injectStylesIntoLinkTag.test.js
+++ b/test/runtime/injectStylesIntoLinkTag.test.js
@@ -6,7 +6,7 @@
 
 import injectStylesIntoLinkTag from "../../src/runtime/injectStylesIntoLinkTag";
 
-import getTarget from "../../src/runtime/getTarget";
+import { getTarget } from "../../src/runtime/getTarget";
 
 const getInsertFn = (place) =>
   function insertFn(style) {
diff --git a/test/runtime/injectStylesIntoStyleTag.test.js b/test/runtime/injectStylesIntoStyleTag.test.js
index 3208fd72..95a061db 100644
--- a/test/runtime/injectStylesIntoStyleTag.test.js
+++ b/test/runtime/injectStylesIntoStyleTag.test.js
@@ -9,7 +9,7 @@ import injectStylesIntoStyleTag from "../../src/runtime/injectStylesIntoStyleTag
 import domAPI from "../../src/runtime/styleDomAPI";
 import singletonApi from "../../src/runtime/singletonStyleDomAPI";
 import insertStyleElement from "../../src/runtime/insertStyleElement";
-import getTarget from "../../src/runtime/getTarget";
+import { getTarget } from "../../src/runtime/getTarget";
 
 const getInsertFn = (place) =>
   function insertFn(style) {

From 5497bec28e1f9c06c7e0bb11ab4e2f336fbec4e2 Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 19:35:07 +0300
Subject: [PATCH 3/6] refactor: code

---
 src/index.js | 13 +++----------
 src/utils.js |  5 +++--
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/index.js b/src/index.js
index 3abba7aa..2ed2abbe 100644
--- a/src/index.js
+++ b/src/index.js
@@ -46,13 +46,6 @@ loaderAPI.pitch = function loader(request) {
       ? "modulePath"
       : "selector";
 
-  let insertFn;
-
-  // Todo remove "function" type for insert option in next major release, because code duplication occurs. Leave require.resolve()
-  if (insertType === "function") {
-    insertFn = options.insert.toString();
-  }
-
   const styleTagTransformFn =
     typeof styleTagTransform === "function"
       ? styleTagTransform.toString()
@@ -84,7 +77,7 @@ loaderAPI.pitch = function loader(request) {
 
 var options = ${JSON.stringify(runtimeOptions)};
 
-${getInsertOptionCode(insertType, options, insertFn)}
+${getInsertOptionCode(insertType, options)}
 
 var update = API(content, options);
 
@@ -129,7 +122,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-${getInsertOptionCode(insertType, options, insertFn)}
+${getInsertOptionCode(insertType, options)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
@@ -181,7 +174,7 @@ var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
 options.setAttributes = setAttributes;
-${getInsertOptionCode(insertType, options, insertFn)}
+${getInsertOptionCode(insertType, options)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
diff --git a/src/utils.js b/src/utils.js
index 922b2407..28c4e820 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -135,7 +135,7 @@ function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
   return "";
 }
 
-function getInsertOptionCode(insertType, options, insertFn) {
+function getInsertOptionCode(insertType, options) {
   if (insertType === "selector") {
     const insert = options.insert ? JSON.stringify(options.insert) : '"head"';
 
@@ -149,7 +149,8 @@ function getInsertOptionCode(insertType, options, insertFn) {
     return `options.insert = insertFn;`;
   }
 
-  return `options.insert = ${insertFn};`;
+  // Todo remove "function" type for insert option in next major release, because code duplication occurs. Leave require.resolve()
+  return `options.insert = ${options.insert.toString()};`;
 }
 
 function getImportInsertStyleElementCode(esModule, loaderContext) {

From dd33ad296a993b93c227a03a540494c4b788b925 Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 20:14:44 +0300
Subject: [PATCH 4/6] refactor: code

---
 src/index.js                           | 2 +-
 src/runtime/getTarget.js               | 2 +-
 src/runtime/injectStylesIntoLinkTag.js | 2 +-
 src/runtime/insertStyleElement.js      | 2 +-
 src/utils.js                           | 9 ++++-----
 5 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/index.js b/src/index.js
index 2ed2abbe..787ff1cc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,7 +43,7 @@ loaderAPI.pitch = function loader(request) {
     typeof options.insert === "function"
       ? "function"
       : options.insert && path.isAbsolute(options.insert)
-      ? "modulePath"
+      ? "module-path"
       : "selector";
 
   const styleTagTransformFn =
diff --git a/src/runtime/getTarget.js b/src/runtime/getTarget.js
index d8ea78aa..02d0501c 100644
--- a/src/runtime/getTarget.js
+++ b/src/runtime/getTarget.js
@@ -27,7 +27,7 @@ function getTarget(target) {
 }
 
 /* istanbul ignore next  */
-function insertBySelector(style, insert) {
+function insertBySelector(insert, style) {
   const target = getTarget(insert);
 
   if (!target) {
diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js
index 143458fa..a7676168 100644
--- a/src/runtime/injectStylesIntoLinkTag.js
+++ b/src/runtime/injectStylesIntoLinkTag.js
@@ -21,7 +21,7 @@ module.exports = (url, options) => {
     link.setAttribute(key, options.attributes[key]);
   });
 
-  options.insert(link, options.insertTag);
+  options.insert(link);
 
   return (newUrl) => {
     if (typeof newUrl === "string") {
diff --git a/src/runtime/insertStyleElement.js b/src/runtime/insertStyleElement.js
index 944b17f0..62199710 100644
--- a/src/runtime/insertStyleElement.js
+++ b/src/runtime/insertStyleElement.js
@@ -4,7 +4,7 @@ function insertStyleElement(options) {
 
   options.setAttributes(style, options.attributes);
 
-  options.insert(style, options.insertTag);
+  options.insert(style);
 
   return style;
 }
diff --git a/src/utils.js b/src/utils.js
index 28c4e820..dc20bf9c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -124,8 +124,8 @@ function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
       : `var insertFn = require(${modulePath}).insertBySelector;`;
   }
 
-  if (insertType === "modulePath") {
-    const modulePath = stringifyRequest(loaderContext, `!${options.insert}`);
+  if (insertType === "module-path") {
+    const modulePath = stringifyRequest(loaderContext, `${options.insert}`);
 
     return esModule
       ? `import insertFn from ${modulePath};`
@@ -140,12 +140,11 @@ function getInsertOptionCode(insertType, options) {
     const insert = options.insert ? JSON.stringify(options.insert) : '"head"';
 
     return `
-      options.insert = insertFn;
-      options.insertTag = ${insert};
+      options.insert = insertFn.bind(null, ${insert});
     `;
   }
 
-  if (insertType === "modulePath") {
+  if (insertType === "module-path") {
     return `options.insert = insertFn;`;
   }
 

From 2939d03a021f789d081ec16e46bf262fc7e822fa Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 20:30:58 +0300
Subject: [PATCH 5/6] refactor: code

---
 src/index.js                                      |  8 ++++----
 src/runtime/{getTarget.js => insertBySelector.js} |  2 +-
 src/utils.js                                      | 15 ++++++++++-----
 test/runtime/injectStylesIntoLinkTag.test.js      | 15 ++-------------
 test/runtime/injectStylesIntoStyleTag.test.js     | 15 ++-------------
 5 files changed, 19 insertions(+), 36 deletions(-)
 rename src/runtime/{getTarget.js => insertBySelector.js} (95%)

diff --git a/src/index.js b/src/index.js
index 787ff1cc..c6e60fda 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import path from "path";
 
 import {
   getImportInsertStyleElementCode,
-  getImportGetTargetCode,
+  getImportInsertBySelectorCode,
   getImportStyleContentCode,
   getImportStyleDomAPICode,
   getImportStyleAPICode,
@@ -67,7 +67,7 @@ loaderAPI.pitch = function loader(request) {
 
       return `
       ${getImportLinkAPICode(esModule, this)}
-      ${getImportGetTargetCode(esModule, this, insertType, options)}
+      ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
       ${getImportLinkContentCode(esModule, this, request)}
       ${
         esModule
@@ -100,7 +100,7 @@ ${esModule ? "export default {}" : ""}`;
 
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
-      ${getImportGetTargetCode(esModule, this, insertType, options)}
+      ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
@@ -159,7 +159,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
       return `
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
-      ${getImportGetTargetCode(esModule, this, insertType, options)}
+      ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
diff --git a/src/runtime/getTarget.js b/src/runtime/insertBySelector.js
similarity index 95%
rename from src/runtime/getTarget.js
rename to src/runtime/insertBySelector.js
index 02d0501c..5fff84c5 100644
--- a/src/runtime/getTarget.js
+++ b/src/runtime/insertBySelector.js
@@ -39,4 +39,4 @@ function insertBySelector(insert, style) {
   target.appendChild(style);
 }
 
-module.exports = { insertBySelector, getTarget };
+module.exports = insertBySelector;
diff --git a/src/utils.js b/src/utils.js
index dc20bf9c..a456c666 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -112,16 +112,21 @@ function getImportStyleContentCode(esModule, loaderContext, request) {
     : `var content = require(${modulePath});`;
 }
 
-function getImportGetTargetCode(esModule, loaderContext, insertType, options) {
+function getImportInsertBySelectorCode(
+  esModule,
+  loaderContext,
+  insertType,
+  options
+) {
   if (insertType === "selector") {
     const modulePath = stringifyRequest(
       loaderContext,
-      `!${path.join(__dirname, "runtime/getTarget.js")}`
+      `!${path.join(__dirname, "runtime/insertBySelector.js")}`
     );
 
     return esModule
-      ? `import {insertBySelector as insertFn} from ${modulePath};`
-      : `var insertFn = require(${modulePath}).insertBySelector;`;
+      ? `import insertFn from ${modulePath};`
+      : `var insertFn = require(${modulePath});`;
   }
 
   if (insertType === "module-path") {
@@ -336,7 +341,7 @@ function getSetAttributesCode(esModule, loaderContext, options) {
 export {
   stringifyRequest,
   getImportInsertStyleElementCode,
-  getImportGetTargetCode,
+  getImportInsertBySelectorCode,
   getImportStyleContentCode,
   getImportStyleDomAPICode,
   getImportStyleAPICode,
diff --git a/test/runtime/injectStylesIntoLinkTag.test.js b/test/runtime/injectStylesIntoLinkTag.test.js
index 95a31b2b..871e0f60 100644
--- a/test/runtime/injectStylesIntoLinkTag.test.js
+++ b/test/runtime/injectStylesIntoLinkTag.test.js
@@ -6,20 +6,9 @@
 
 import injectStylesIntoLinkTag from "../../src/runtime/injectStylesIntoLinkTag";
 
-import { getTarget } from "../../src/runtime/getTarget";
+import insertBySelector from "../../src/runtime/insertBySelector";
 
-const getInsertFn = (place) =>
-  function insertFn(style) {
-    const target = getTarget(place);
-
-    if (!target) {
-      throw new Error(
-        "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
-      );
-    }
-
-    target.appendChild(style);
-  };
+const getInsertFn = (place) => insertBySelector.bind(null, place);
 
 function insertAtTop(element) {
   const parent = document.querySelector("head");
diff --git a/test/runtime/injectStylesIntoStyleTag.test.js b/test/runtime/injectStylesIntoStyleTag.test.js
index 95a061db..f16ea707 100644
--- a/test/runtime/injectStylesIntoStyleTag.test.js
+++ b/test/runtime/injectStylesIntoStyleTag.test.js
@@ -9,20 +9,9 @@ import injectStylesIntoStyleTag from "../../src/runtime/injectStylesIntoStyleTag
 import domAPI from "../../src/runtime/styleDomAPI";
 import singletonApi from "../../src/runtime/singletonStyleDomAPI";
 import insertStyleElement from "../../src/runtime/insertStyleElement";
-import { getTarget } from "../../src/runtime/getTarget";
+import insertBySelector from "../../src/runtime/insertBySelector";
 
-const getInsertFn = (place) =>
-  function insertFn(style) {
-    const target = getTarget(place);
-
-    if (!target) {
-      throw new Error(
-        "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
-      );
-    }
-
-    target.appendChild(style);
-  };
+const getInsertFn = (place) => insertBySelector.bind(null, place);
 
 function styleTagTransform(css, style) {
   if (style.styleSheet) {

From 4ec713a8dc0c6100ad70365ec79e0ce70f0fade8 Mon Sep 17 00:00:00 2001
From: cap-Bernardito <cap-Bernardito@yandex.ru>
Date: Mon, 12 Jul 2021 20:37:19 +0300
Subject: [PATCH 6/6] docs: update

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2d158561..55fa1b3b 100644
--- a/README.md
+++ b/README.md
@@ -464,7 +464,7 @@ module.exports = {
 
 Allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.
 
-> ⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
+> ⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc. We recommend using [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for support latest ECMA features.
 > ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
 
 **webpack.config.js**