From 7122cdec2d2e69f70bf6a0edeab91e2661444b95 Mon Sep 17 00:00:00 2001
From: "alexander.akait" <sheo13666q@gmail.com>
Date: Mon, 8 Apr 2024 19:11:59 +0300
Subject: [PATCH] refactor!: the `insert` option can only be a `selector` or
 the path to the module

---
 README.md                                     | 181 ++++++++++--------
 src/index.js                                  |   8 +-
 src/options.json                              |  18 +-
 src/utils.js                                  |  33 ++--
 .../validate-options.test.js.snap             |  24 +--
 test/fixtures/insert-options.js               |   5 +
 test/fixtures/insert-test-shadow.js           |   6 +
 test/fixtures/insert-to-existing-style.js     |  20 ++
 test/fixtures/insert-top.js                   |  19 ++
 test/insert-option.test.js                    |  41 +---
 test/lazyStyleTag-options.test.js             |   8 +-
 test/validate-options.test.js                 |   2 +-
 12 files changed, 180 insertions(+), 185 deletions(-)
 create mode 100644 test/fixtures/insert-options.js
 create mode 100644 test/fixtures/insert-test-shadow.js
 create mode 100644 test/fixtures/insert-to-existing-style.js
 create mode 100644 test/fixtures/insert-top.js

diff --git a/README.md b/README.md
index 79fb2999..0ddd5580 100644
--- a/README.md
+++ b/README.md
@@ -450,9 +450,7 @@ module.exports = {
 Type:
 
 ```ts
-type insert =
-  | string
-  | ((htmlElement: HTMLElement, options: Record<string, any>) => void);
+type insert = string;
 ```
 
 Default: `head`
@@ -462,9 +460,7 @@ This will cause CSS created by the loader to take priority over CSS already pres
 You can use other values if the standard behavior is not suitable for you, but we do not recommend doing this.
 If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
 
-#### `string`
-
-##### `Selector`
+#### `Selector`
 
 Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) where styles inject into the DOM.
 
@@ -491,7 +487,7 @@ module.exports = {
 };
 ```
 
-##### `Absolute path to function`
+#### `Absolute path to function`
 
 Allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.
 
@@ -515,7 +511,7 @@ module.exports = {
           {
             loader: "style-loader",
             options: {
-              insert: require.resolve("modulePath"),
+              insert: require.resolve("./path-to-insert-module"),
             },
           },
           "css-loader",
@@ -528,17 +524,32 @@ module.exports = {
 
 A new `<style>`/`<link>` elements will be inserted into at bottom of `body` tag.
 
-#### `function`
+Examples:
 
-Allows to override default behavior and insert styles at any position.
+Insert styles at top of `head` tag:
 
-> **Warning**
->
-> 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
+**insert-function.js**
 
-> **Warning**
->
-> 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
+```js
+function insertAtTop(element) {
+  var parent = document.querySelector("head");
+  // eslint-disable-next-line no-underscore-dangle
+  var lastInsertedElement = 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 = insertAtTop;
+```
 
 **webpack.config.js**
 
@@ -552,23 +563,7 @@ module.exports = {
           {
             loader: "style-loader",
             options: {
-              insert: function insertAtTop(element) {
-                var parent = document.querySelector("head");
-                // eslint-disable-next-line no-underscore-dangle
-                var lastInsertedElement =
-                  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;
-              },
+              insert: require.resolve("./insert-function"),
             },
           },
           "css-loader",
@@ -579,10 +574,20 @@ module.exports = {
 };
 ```
 
-Insert styles at top of `head` tag.
-
 You can pass any parameters to `style.use(options)` and this value will be passed to `insert` and `styleTagTransform` functions.
 
+**insert-function.js**
+
+```js
+function insertIntoTarget(element, options) {
+  var parent = options.target || document.head;
+
+  parent.appendChild(element);
+}
+
+module.exports = insertIntoTarget;
+```
+
 **webpack.config.js**
 
 ```js
@@ -599,12 +604,8 @@ module.exports = {
               // 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
-              insert: function insertIntoTarget(element, options) {
-                var parent = options.target || document.head;
-
-                parent.appendChild(element);
-              },
+              // but it depends what browsers you want to support
+              insert: require.resolve("./insert-function.js"),
             },
           },
           "css-loader",
@@ -1031,7 +1032,28 @@ The loader generate:
 
 #### Insert styles at top
 
-Inserts styles at top of `head` tag.
+Insert styles at top of `head` tag.
+
+**insert-function.js**
+
+```js
+function insertAtTop(element) {
+  var parent = document.querySelector("head");
+  var lastInsertedElement = window._lastElementInsertedByStyleLoader;
+
+  if (!lastInsertedElement) {
+    parent.insertBefore(element, parent.firstChild);
+  } else if (lastInsertedElement.nextSibling) {
+    parent.insertBefore(element, lastInsertedElement.nextSibling);
+  } else {
+    parent.appendChild(element);
+  }
+
+  window._lastElementInsertedByStyleLoader = element;
+}
+
+module.exports = insertAtTop;
+```
 
 **webpack.config.js**
 
@@ -1045,21 +1067,7 @@ module.exports = {
           {
             loader: "style-loader",
             options: {
-              insert: function insertAtTop(element) {
-                var parent = document.querySelector("head");
-                var lastInsertedElement =
-                  window._lastElementInsertedByStyleLoader;
-
-                if (!lastInsertedElement) {
-                  parent.insertBefore(element, parent.firstChild);
-                } else if (lastInsertedElement.nextSibling) {
-                  parent.insertBefore(element, lastInsertedElement.nextSibling);
-                } else {
-                  parent.appendChild(element);
-                }
-
-                window._lastElementInsertedByStyleLoader = element;
-              },
+              insert: require.resolve("./insert-function.js"),
             },
           },
           "css-loader",
@@ -1074,6 +1082,29 @@ module.exports = {
 
 Inserts styles before `#id` element.
 
+**insert-function.js**
+
+```js
+function insertBeforeAt(element) {
+  const parent = document.querySelector("head");
+  const target = document.querySelector("#id");
+
+  const lastInsertedElement = window._lastElementInsertedByStyleLoader;
+
+  if (!lastInsertedElement) {
+    parent.insertBefore(element, target);
+  } else if (lastInsertedElement.nextSibling) {
+    parent.insertBefore(element, lastInsertedElement.nextSibling);
+  } else {
+    parent.appendChild(element);
+  }
+
+  window._lastElementInsertedByStyleLoader = element;
+}
+
+module.exports = insertBeforeAt;
+```
+
 **webpack.config.js**
 
 ```js
@@ -1086,23 +1117,7 @@ module.exports = {
           {
             loader: "style-loader",
             options: {
-              insert: function insertBeforeAt(element) {
-                const parent = document.querySelector("head");
-                const target = document.querySelector("#id");
-
-                const lastInsertedElement =
-                  window._lastElementInsertedByStyleLoader;
-
-                if (!lastInsertedElement) {
-                  parent.insertBefore(element, target);
-                } else if (lastInsertedElement.nextSibling) {
-                  parent.insertBefore(element, lastInsertedElement.nextSibling);
-                } else {
-                  parent.appendChild(element);
-                }
-
-                window._lastElementInsertedByStyleLoader = element;
-              },
+              insert: require.resolve("./insert-function.js"),
             },
           },
           "css-loader",
@@ -1117,6 +1132,18 @@ module.exports = {
 
 You can define custom target for your styles for the `lazyStyleTag` type.
 
+**insert-function.js**
+
+```js
+function insertIntoTarget(element, options) {
+  var parent = options.target || document.head;
+
+  parent.appendChild(element);
+}
+
+module.exports = insertIntoTarget;
+```
+
 **webpack.config.js**
 
 ```js
@@ -1134,11 +1161,7 @@ module.exports = {
               // 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
-              insert: function insertIntoTarget(element, options) {
-                var parent = options.target || document.head;
-
-                parent.appendChild(element);
-              },
+              insert: require.resolve("./insert-function.js"),
             },
           },
           "css-loader",
diff --git a/src/index.js b/src/index.js
index da8a10e8..157ef7e9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -74,11 +74,9 @@ loader.pitch = function pitch(request) {
   }
 
   const insertType =
-    typeof options.insert === "function"
-      ? "function"
-      : options.insert && path.isAbsolute(options.insert)
-        ? "module-path"
-        : "selector";
+    options.insert && path.isAbsolute(options.insert)
+      ? "module-path"
+      : "selector";
 
   switch (injectType) {
     case "linkTag": {
diff --git a/src/options.json b/src/options.json
index aa637a04..1ecd6866 100644
--- a/src/options.json
+++ b/src/options.json
@@ -23,14 +23,7 @@
     "insert": {
       "description": "Inserts `<style>`/`<link>` at the given position.",
       "link": "https://github.com/webpack-contrib/style-loader#insert",
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "instanceof": "Function"
-        }
-      ]
+      "type": "string"
     },
     "base": {
       "description": "Sets module ID base for DLLPlugin.",
@@ -45,14 +38,7 @@
     "styleTagTransform": {
       "description": "Transform tag and css when insert 'style' tag into the DOM",
       "link": "https://github.com/webpack-contrib/style-loader#styleTagTransform",
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "instanceof": "Function"
-        }
-      ]
+      "type": "string"
     }
   },
   "additionalProperties": false
diff --git a/src/utils.js b/src/utils.js
index 7921439d..105cefce 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -80,17 +80,6 @@ function getImportInsertBySelectorCode(
   insertType,
   options,
 ) {
-  if (insertType === "selector") {
-    const modulePath = stringifyRequest(
-      loaderContext,
-      `!${path.join(__dirname, "runtime/insertBySelector.js")}`,
-    );
-
-    return esModule
-      ? `import insertFn from ${modulePath};`
-      : `var insertFn = require(${modulePath});`;
-  }
-
   if (insertType === "module-path") {
     const modulePath = stringifyRequest(loaderContext, `${options.insert}`);
 
@@ -101,24 +90,24 @@ function getImportInsertBySelectorCode(
       : `var insertFn = require(${modulePath});`;
   }
 
-  return "";
+  const modulePath = stringifyRequest(
+    loaderContext,
+    `!${path.join(__dirname, "runtime/insertBySelector.js")}`,
+  );
+
+  return esModule
+    ? `import insertFn from ${modulePath};`
+    : `var insertFn = require(${modulePath});`;
 }
 
 function getInsertOptionCode(insertType, options) {
-  if (insertType === "selector") {
-    const insert = options.insert ? JSON.stringify(options.insert) : '"head"';
-
-    return `
-      options.insert = insertFn.bind(null, ${insert});
-    `;
-  }
-
   if (insertType === "module-path") {
     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()};`;
+  const insert = options.insert ? JSON.stringify(options.insert) : '"head"';
+
+  return `options.insert = insertFn.bind(null, ${insert});`;
 }
 
 function getImportInsertStyleElementCode(esModule, loaderContext) {
diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap
index 1107ea4e..4f0f86ce 100644
--- a/test/__snapshots__/validate-options.test.js.snap
+++ b/test/__snapshots__/validate-options.test.js.snap
@@ -25,35 +25,23 @@ exports[`validate options should throw an error on the "injectType" option with
 
 exports[`validate options should throw an error on the "insert" option with "true" value 1`] = `
 "Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- - options.insert should be one of these:
-   string | function
+ - options.insert should be a string.
    -> Inserts \`<style>\`/\`<link>\` at the given position.
-   -> Read more at https://github.com/webpack-contrib/style-loader#insert
-   Details:
-    * options.insert should be a string.
-    * options.insert should be an instance of function."
+   -> Read more at https://github.com/webpack-contrib/style-loader#insert"
 `;
 
 exports[`validate options should throw an error on the "styleTagTransform" option with "[]" value 1`] = `
 "Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- - options.styleTagTransform should be one of these:
-   string | function
+ - options.styleTagTransform should be a string.
    -> Transform tag and css when insert 'style' tag into the DOM
-   -> Read more at https://github.com/webpack-contrib/style-loader#styleTagTransform
-   Details:
-    * options.styleTagTransform should be a string.
-    * options.styleTagTransform should be an instance of function."
+   -> Read more at https://github.com/webpack-contrib/style-loader#styleTagTransform"
 `;
 
 exports[`validate options should throw an error on the "styleTagTransform" option with "true" value 1`] = `
 "Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- - options.styleTagTransform should be one of these:
-   string | function
+ - options.styleTagTransform should be a string.
    -> Transform tag and css when insert 'style' tag into the DOM
-   -> Read more at https://github.com/webpack-contrib/style-loader#styleTagTransform
-   Details:
-    * options.styleTagTransform should be a string.
-    * options.styleTagTransform should be an instance of function."
+   -> Read more at https://github.com/webpack-contrib/style-loader#styleTagTransform"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
diff --git a/test/fixtures/insert-options.js b/test/fixtures/insert-options.js
new file mode 100644
index 00000000..42fb95b3
--- /dev/null
+++ b/test/fixtures/insert-options.js
@@ -0,0 +1,5 @@
+function insert(styleTag, options) {
+  options.insertInto.appendChild(styleTag);
+}
+
+module.exports = insert;
diff --git a/test/fixtures/insert-test-shadow.js b/test/fixtures/insert-test-shadow.js
new file mode 100644
index 00000000..6eaf1da8
--- /dev/null
+++ b/test/fixtures/insert-test-shadow.js
@@ -0,0 +1,6 @@
+function insert(element) {
+  document.querySelector("#test-shadow").appendChild(element);
+}
+
+
+module.exports = insert;
diff --git a/test/fixtures/insert-to-existing-style.js b/test/fixtures/insert-to-existing-style.js
new file mode 100644
index 00000000..74212b5e
--- /dev/null
+++ b/test/fixtures/insert-to-existing-style.js
@@ -0,0 +1,20 @@
+function insert(element) {
+  const parent = document.querySelector("head");
+  const target = document.querySelector("#existing-style");
+
+  const lastInsertedElement =
+    // eslint-disable-next-line no-underscore-dangle
+    window._lastElementInsertedByStyleLoader;
+
+  if (!lastInsertedElement) {
+    parent.insertBefore(element, target);
+  } else if (lastInsertedElement.nextSibling) {
+    parent.insertBefore(element, lastInsertedElement.nextSibling);
+  } else {
+    parent.appendChild(element);
+  }
+
+  window._lastElementInsertedByStyleLoader = element;
+}
+
+module.exports = insert;
diff --git a/test/fixtures/insert-top.js b/test/fixtures/insert-top.js
new file mode 100644
index 00000000..f78c7d14
--- /dev/null
+++ b/test/fixtures/insert-top.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 92e62f81..56f1ce5b 100644
--- a/test/insert-option.test.js
+++ b/test/insert-option.test.js
@@ -89,8 +89,7 @@ describe('"insert" option', () => {
       const entry = getEntryByInjectType("element.js", injectType);
       const compiler = getCompiler(entry, {
         injectType,
-        insert: (element) =>
-          document.querySelector("#test-shadow").appendChild(element),
+        insert: require.resolve("./fixtures/insert-test-shadow.js"),
       });
       const stats = await compile(compiler);
 
@@ -108,23 +107,7 @@ describe('"insert" option', () => {
       const entry = getEntryByInjectType("simple.js", injectType);
       const compiler = getCompiler(entry, {
         injectType,
-        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;
-        },
+        insert: require.resolve("./fixtures/insert-top.js"),
       });
       const stats = await compile(compiler);
 
@@ -181,25 +164,7 @@ describe('"insert" option', () => {
       const entry = getEntryByInjectType("simple.js", injectType);
       const compiler = getCompiler(entry, {
         injectType,
-        insert: (element) => {
-          const parent = document.querySelector("head");
-          const target = document.querySelector("#existing-style");
-
-          const lastInsertedElement =
-            // eslint-disable-next-line no-underscore-dangle
-            window._lastElementInsertedByStyleLoader;
-
-          if (!lastInsertedElement) {
-            parent.insertBefore(element, target);
-          } else if (lastInsertedElement.nextSibling) {
-            parent.insertBefore(element, lastInsertedElement.nextSibling);
-          } else {
-            parent.appendChild(element);
-          }
-
-          // eslint-disable-next-line no-underscore-dangle
-          window._lastElementInsertedByStyleLoader = element;
-        },
+        insert: require.resolve("./fixtures/insert-to-existing-style"),
       });
       const stats = await compile(compiler);
 
diff --git a/test/lazyStyleTag-options.test.js b/test/lazyStyleTag-options.test.js
index c0b1fafa..fda929a8 100644
--- a/test/lazyStyleTag-options.test.js
+++ b/test/lazyStyleTag-options.test.js
@@ -16,9 +16,7 @@ describe("lazyStyleTag options", () => {
     const entry = getEntryByInjectType("options.js", "lazyStyleTag");
     const compiler = getCompiler(entry, {
       injectType: "lazyStyleTag",
-      insert: (styleTag, options) => {
-        options.insertInto.appendChild(styleTag);
-      },
+      insert: require.resolve("./fixtures/insert-options.js"),
     });
     const stats = await compile(compiler);
 
@@ -36,9 +34,7 @@ describe("lazyStyleTag options", () => {
     const entry = getEntryByInjectType("options-use-unuse.js", "lazyStyleTag");
     const compiler = getCompiler(entry, {
       injectType: "lazyStyleTag",
-      insert: (styleTag, options) => {
-        options.insertInto.appendChild(styleTag);
-      },
+      insert: require.resolve("./fixtures/insert-options.js"),
     });
     const stats = await compile(compiler);
 
diff --git a/test/validate-options.test.js b/test/validate-options.test.js
index c8a401c8..96b8cb8d 100644
--- a/test/validate-options.test.js
+++ b/test/validate-options.test.js
@@ -19,7 +19,7 @@ describe("validate options", () => {
       failure: [true],
     },
     insert: {
-      success: ["selector", () => {}],
+      success: ["selector", require.resolve("./fixtures/insertFn.js")],
       failure: [true],
     },
     esModule: {