From 2d221cbfb4e53c5ea1027cca8e3fd6ffaddd404e Mon Sep 17 00:00:00 2001
From: cap-Bernardito
Date: Sat, 10 Oct 2020 20:51:31 +0300
Subject: [PATCH 1/4] feat: added `insert` option
---
README.md | 52 ++++
package-lock.json | 83 +++---
package.json | 1 +
src/index.js | 20 +-
src/plugin-options.json | 11 +
test/__snapshots__/insert-option.test.js.snap | 55 ++++
.../validate-plugin-options.test.js.snap | 30 ++
test/cases/insert-function/expected/1.css | 4 +
test/cases/insert-function/expected/1.js | 12 +
test/cases/insert-function/expected/main.js | 265 ++++++++++++++++++
test/cases/insert-function/src/index.js | 4 +
test/cases/insert-function/src/inject.css | 3 +
test/cases/insert-function/webpack.config.js | 33 +++
test/cases/insert-string/expected/1.css | 4 +
test/cases/insert-string/expected/1.js | 12 +
test/cases/insert-string/expected/main.js | 260 +++++++++++++++++
test/cases/insert-string/src/index.js | 4 +
test/cases/insert-string/src/inject.css | 3 +
test/cases/insert-string/webpack.config.js | 28 ++
test/cases/insert-undefined/expected/1.css | 4 +
test/cases/insert-undefined/expected/1.js | 12 +
test/cases/insert-undefined/expected/main.js | 259 +++++++++++++++++
test/cases/insert-undefined/src/index.js | 4 +
test/cases/insert-undefined/src/inject.css | 3 +
test/cases/insert-undefined/webpack.config.js | 27 ++
test/fixtures/insert.js | 2 +
test/helpers/getErrors.js | 5 +
test/helpers/getWarnings.js | 5 +
test/helpers/index.js | 14 +-
test/helpers/normalizeErrors.js | 19 ++
test/helpers/readAsset.js | 23 ++
test/helpers/runInJsDom.js | 44 +++
test/insert-option.test.js | 102 +++++++
test/validate-plugin-options.test.js | 4 +
34 files changed, 1362 insertions(+), 49 deletions(-)
create mode 100644 test/__snapshots__/insert-option.test.js.snap
create mode 100644 test/cases/insert-function/expected/1.css
create mode 100644 test/cases/insert-function/expected/1.js
create mode 100644 test/cases/insert-function/expected/main.js
create mode 100644 test/cases/insert-function/src/index.js
create mode 100644 test/cases/insert-function/src/inject.css
create mode 100644 test/cases/insert-function/webpack.config.js
create mode 100644 test/cases/insert-string/expected/1.css
create mode 100644 test/cases/insert-string/expected/1.js
create mode 100644 test/cases/insert-string/expected/main.js
create mode 100644 test/cases/insert-string/src/index.js
create mode 100644 test/cases/insert-string/src/inject.css
create mode 100644 test/cases/insert-string/webpack.config.js
create mode 100644 test/cases/insert-undefined/expected/1.css
create mode 100644 test/cases/insert-undefined/expected/1.js
create mode 100644 test/cases/insert-undefined/expected/main.js
create mode 100644 test/cases/insert-undefined/src/index.js
create mode 100644 test/cases/insert-undefined/src/inject.css
create mode 100644 test/cases/insert-undefined/webpack.config.js
create mode 100644 test/fixtures/insert.js
create mode 100644 test/helpers/getErrors.js
create mode 100644 test/helpers/getWarnings.js
create mode 100644 test/helpers/normalizeErrors.js
create mode 100644 test/helpers/readAsset.js
create mode 100644 test/helpers/runInJsDom.js
create mode 100644 test/insert-option.test.js
diff --git a/README.md b/README.md
index 162bfc90..f16aba9a 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ module.exports = {
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
+| **[`insert`](#insert)** | `{String\|Function}` | `undefined` | Inserts `` at the given position |
#### `filename`
@@ -109,6 +110,57 @@ Default: `false`
Remove Order Warnings.
See [examples](#remove-order-warnings) below for details.
+#### `insert`
+
+Type: `String|Function`
+Default: `undefined`
+
+By default, the `extract-css-chunks-plugin` appends styles (`` elements) to `document.head` of the current `window`.
+
+However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements instertion.
+For example this is the case when you asynchronously load styles for an application that runs inside of an iframe.
+In such cases `insert` can be configured to be a function or a custom selector.
+
+If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
+
+##### `String`
+
+Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
+A new `` element will be inserted after the found item.
+
+**webpack.config.js**
+
+```js
+new MiniCssExtractPlugin({
+ insert: '#some-element',
+});
+```
+
+A new `` element will be inserted after the element with id `some-element`.
+
+##### `Function`
+
+Allows to override default behavior and insert styles at any position.
+
+> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
+
+> > ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
+
+**webpack.config.js**
+
+```js
+new MiniCssExtractPlugin({
+ insert: function insert(linkTag) {
+ const reference = document.querySelector('#some-element');
+ if (reference) {
+ reference.parentNode.insertBefore(linkTag, reference);
+ }
+ },
+});
+```
+
+A new `` element will be inserted before the element with id `some-element`.
+
### Loader Options
| Name | Type | Default | Description |
diff --git a/package-lock.json b/package-lock.json
index dac0ee49..cf4bc122 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2289,9 +2289,9 @@
"dev": true
},
"@types/node": {
- "version": "14.11.5",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.5.tgz",
- "integrity": "sha512-jVFzDV6NTbrLMxm4xDSIW/gKnk8rQLF9wAzLWIOg+5nU6ACrIMndeBdXci0FGtqJbP9tQvm6V39eshc96TO2wQ==",
+ "version": "14.11.8",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.8.tgz",
+ "integrity": "sha512-KPcKqKm5UKDkaYPTuXSx8wEP7vE9GnuaXIZKijwRYcePpZFDVuy2a57LarFKiORbHOuTOOwYzxVxcUzsh2P2Pw==",
"dev": true
},
"@types/normalize-package-data": {
@@ -2307,9 +2307,9 @@
"dev": true
},
"@types/prettier": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.1.tgz",
- "integrity": "sha512-2zs+O+UkDsJ1Vcp667pd3f8xearMdopz/z54i99wtRDI5KLmngk7vlrYZD0ZjKHaROR03EznlBbVY9PfAEyJIQ==",
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.2.tgz",
+ "integrity": "sha512-IiPhNnenzkqdSdQH3ifk9LoX7oQe61ZlDdDO4+MUv6FyWdPGDPr26gCPVs3oguZEMq//nFZZpwUZcVuNJsG+DQ==",
"dev": true
},
"@types/stack-utils": {
@@ -2319,9 +2319,9 @@
"dev": true
},
"@types/yargs": {
- "version": "15.0.7",
- "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
- "integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
+ "version": "15.0.8",
+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.8.tgz",
+ "integrity": "sha512-b0BYzFUzBpOhPjpl1wtAHU994jBeKF4TKVlT7ssFv44T617XNcPdRoG4AzHLVshLzlrF7i3lTelH7UbuNYV58Q==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
@@ -2653,9 +2653,9 @@
}
},
"ajv": {
- "version": "6.12.5",
- "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
- "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
+ "version": "6.12.6",
+ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+ "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
@@ -5067,9 +5067,9 @@
},
"dependencies": {
"camelcase": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
- "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.1.0.tgz",
+ "integrity": "sha512-WCMml9ivU60+8rEJgELlFp1gxFcEGxwYleE3bziHEDeqsqAWGHdimB7beBFGjLzVNgPGyDsfgXLQEYMpmIFnVQ==",
"dev": true
},
"schema-utils": {
@@ -5902,9 +5902,9 @@
}
},
"eslint": {
- "version": "7.10.0",
- "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.10.0.tgz",
- "integrity": "sha512-BDVffmqWl7JJXqCjAK6lWtcQThZB/aP1HXSH1JKwGwv0LQEdvpR7qzNrUT487RM39B5goWuboFad5ovMBmD8yA==",
+ "version": "7.11.0",
+ "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.11.0.tgz",
+ "integrity": "sha512-G9+qtYVCHaDi1ZuWzBsOWo2wSwd70TXnU6UHA3cTYHp7gCTXZcpggWFoUVAMRarg68qtPoNfFbzPh+VdOgmwmw==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
@@ -5917,7 +5917,7 @@
"enquirer": "^2.3.5",
"eslint-scope": "^5.1.1",
"eslint-utils": "^2.1.0",
- "eslint-visitor-keys": "^1.3.0",
+ "eslint-visitor-keys": "^2.0.0",
"espree": "^7.3.0",
"esquery": "^1.2.0",
"esutils": "^2.0.2",
@@ -6000,6 +6000,12 @@
"ms": "2.1.2"
}
},
+ "eslint-visitor-keys": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
+ "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+ "dev": true
+ },
"glob-parent": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
@@ -6804,26 +6810,13 @@
}
},
"file-loader": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.0.tgz",
- "integrity": "sha512-26qPdHyTsArQ6gU4P1HJbAbnFTyT2r0pG7czh1GFAd9TZbj0n94wWbupgixZH/ET/meqi2/5+F7DhW4OAXD+Lg==",
+ "version": "6.1.1",
+ "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.1.tgz",
+ "integrity": "sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
- "schema-utils": "^2.7.1"
- },
- "dependencies": {
- "schema-utils": {
- "version": "2.7.1",
- "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
- "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
- "dev": true,
- "requires": {
- "@types/json-schema": "^7.0.5",
- "ajv": "^6.12.4",
- "ajv-keywords": "^3.5.2"
- }
- }
+ "schema-utils": "^3.0.0"
}
},
"file-uri-to-path": {
@@ -10007,9 +10000,9 @@
}
},
"camelcase": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
- "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.1.0.tgz",
+ "integrity": "sha512-WCMml9ivU60+8rEJgELlFp1gxFcEGxwYleE3bziHEDeqsqAWGHdimB7beBFGjLzVNgPGyDsfgXLQEYMpmIFnVQ==",
"dev": true
},
"chalk": {
@@ -14709,9 +14702,9 @@
}
},
"tslib": {
- "version": "1.14.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.0.tgz",
- "integrity": "sha512-+Zw5lu0D9tvBMjGP8LpvMb0u2WW2QV3y+D8mO6J+cNzCYIN4sVy43Bf9vl92nqFahutN0I8zHa7cc4vihIshnw==",
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"tty-browserify": {
@@ -15970,9 +15963,9 @@
"dev": true
},
"whatwg-url": {
- "version": "8.3.0",
- "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.3.0.tgz",
- "integrity": "sha512-BQRf/ej5Rp3+n7k0grQXZj9a1cHtsp4lqj01p59xBWFKdezR8sO37XnpafwNqiFac/v2Il12EIMjX/Y4VZtT8Q==",
+ "version": "8.4.0",
+ "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.4.0.tgz",
+ "integrity": "sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==",
"dev": true,
"requires": {
"lodash.sortby": "^4.7.0",
diff --git a/package.json b/package.json
index 28f631cd..36cb9806 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
"file-loader": "^6.1.0",
"husky": "^4.3.0",
"jest": "^26.5.2",
+ "jsdom": "^16.4.0",
"lint-staged": "^10.4.0",
"memfs": "^3.0.2",
"npm-run-all": "^4.1.5",
diff --git a/src/index.js b/src/index.js
index 1e85925e..b843c5be 100644
--- a/src/index.js
+++ b/src/index.js
@@ -36,12 +36,27 @@ class MiniCssExtractPlugin {
baseDataPath: 'options',
});
+ const insert =
+ typeof options.insert !== 'undefined'
+ ? typeof options.insert === 'function'
+ ? Template.asString([options.insert, 'insert(linkTag);'])
+ : Template.asString([
+ `var target = document.querySelector("${options.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.parentNode.insertBefore(linkTag, target.nextSibling);`,
+ ])
+ : Template.asString([
+ 'var head = document.getElementsByTagName("head")[0];',
+ 'head.appendChild(linkTag);',
+ ]);
+
this.options = Object.assign(
{
filename: DEFAULT_FILENAME,
ignoreOrder: false,
},
- options
+ options,
+ { insert }
);
if (!this.options.chunkFilename) {
@@ -392,8 +407,7 @@ class MiniCssExtractPlugin {
'}',
])
: '',
- 'var head = document.getElementsByTagName("head")[0];',
- 'head.appendChild(linkTag);',
+ this.options.insert,
]),
'}).then(function() {',
Template.indent(['installedCssChunks[chunkId] = 0;']),
diff --git a/src/plugin-options.json b/src/plugin-options.json
index 1c600656..132b73d8 100644
--- a/src/plugin-options.json
+++ b/src/plugin-options.json
@@ -24,6 +24,17 @@
},
"ignoreOrder": {
"type": "boolean"
+ },
+ "insert": {
+ "description": "Inserts `` at the given position (https://github.com/webpack-contrib/mini-css-extract-plugin#insert).",
+ "anyOf": [
+ {
+ "type": "string"
+ },
+ {
+ "instanceof": "Function"
+ }
+ ]
}
}
}
diff --git a/test/__snapshots__/insert-option.test.js.snap b/test/__snapshots__/insert-option.test.js.snap
new file mode 100644
index 00000000..1e8530eb
--- /dev/null
+++ b/test/__snapshots__/insert-option.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`insert option should work when insert option is function: DOM 1`] = `
+"
+ style-loader test
+
+
+
+
Body
+
+
+
+
+"
+`;
+
+exports[`insert option should work when insert option is function: errors 1`] = `Array []`;
+
+exports[`insert option should work when insert option is function: warnings 1`] = `Array []`;
+
+exports[`insert option should work when insert option is string: DOM 1`] = `
+"
+ style-loader test
+
+
+
+
Body
+
+
+
+
+"
+`;
+
+exports[`insert option should work when insert option is string: errors 1`] = `Array []`;
+
+exports[`insert option should work when insert option is string: warnings 1`] = `Array []`;
+
+exports[`insert option should work without insert option: DOM 1`] = `
+"
+ style-loader test
+
+
+
+
Body
+
+
+
+
+"
+`;
+
+exports[`insert option should work without insert option: errors 1`] = `Array []`;
+
+exports[`insert option should work without insert option: warnings 1`] = `Array []`;
diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap b/test/__snapshots__/validate-plugin-options.test.js.snap
index eb524205..40889270 100644
--- a/test/__snapshots__/validate-plugin-options.test.js.snap
+++ b/test/__snapshots__/validate-plugin-options.test.js.snap
@@ -22,3 +22,33 @@ exports[`validate options should throw an error on the "ignoreOrder" option with
"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
- options.ignoreOrder should be a boolean."
`;
+
+exports[`validate options should throw an error on the "insert" option with "{}" value 1`] = `
+"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
+ - options.insert should be one of these:
+ string | function
+ -> Inserts \`\` at the given position (https://github.com/webpack-contrib/mini-css-extract-plugin#insert).
+ Details:
+ * options.insert should be a string.
+ * options.insert should be an instance of function."
+`;
+
+exports[`validate options should throw an error on the "insert" option with "1" value 1`] = `
+"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
+ - options.insert should be one of these:
+ string | function
+ -> Inserts \`\` at the given position (https://github.com/webpack-contrib/mini-css-extract-plugin#insert).
+ Details:
+ * options.insert should be a string.
+ * options.insert should be an instance of function."
+`;
+
+exports[`validate options should throw an error on the "insert" option with "true" value 1`] = `
+"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
+ - options.insert should be one of these:
+ string | function
+ -> Inserts \`\` at the given position (https://github.com/webpack-contrib/mini-css-extract-plugin#insert).
+ Details:
+ * options.insert should be a string.
+ * options.insert should be an instance of function."
+`;
diff --git a/test/cases/insert-function/expected/1.css b/test/cases/insert-function/expected/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-function/expected/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-function/expected/1.js b/test/cases/insert-function/expected/1.js
new file mode 100644
index 00000000..4292040c
--- /dev/null
+++ b/test/cases/insert-function/expected/1.js
@@ -0,0 +1,12 @@
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-function/expected/main.js b/test/cases/insert-function/expected/main.js
new file mode 100644
index 00000000..3d8f123e
--- /dev/null
+++ b/test/cases/insert-function/expected/main.js
@@ -0,0 +1,265 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ // install a JSONP callback for chunk loading
+/******/ function webpackJsonpCallback(data) {
+/******/ var chunkIds = data[0];
+/******/ var moreModules = data[1];
+/******/
+/******/
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0, resolves = [];
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ resolves.push(installedChunks[chunkId][0]);
+/******/ }
+/******/ installedChunks[chunkId] = 0;
+/******/ }
+/******/ for(moduleId in moreModules) {
+/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
+/******/ modules[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
+/******/ while(resolves.length) {
+/******/ resolves.shift()();
+/******/ }
+/******/
+/******/ };
+/******/
+/******/
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // Promise = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/
+/******/
+/******/ // script path function
+/******/ function jsonpScriptSrc(chunkId) {
+/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
+/******/ }
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = function requireEnsure(chunkId) {
+/******/ var promises = [];
+/******/
+/******/
+/******/ // mini-css-extract-plugin CSS loading
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {
+/******/ var href = "" + chunkId + ".css";
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return resolve();
+/******/ }
+/******/ var linkTag = document.createElement("link");
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ linkTag.onload = resolve;
+/******/ linkTag.onerror = function(event) {
+/******/ var request = event && event.target && event.target.src || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + request + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.request = request;
+/******/ delete installedCssChunks[chunkId]
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ };
+/******/ linkTag.href = fullhref;
+/******/
+/******/ function insert(linkTag) {
+/******/ const reference = document.querySelector('.hot-reload');
+/******/
+/******/ if (reference) {
+/******/ reference.parentNode.insertBefore(linkTag, reference);
+/******/ }
+/******/ }
+/******/ insert(linkTag);
+/******/ }).then(function() {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }));
+/******/ }
+/******/
+/******/ // JSONP chunk loading for javascript
+/******/
+/******/ var installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise(function(resolve, reject) {
+/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
+/******/ });
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var script = document.createElement('script');
+/******/ var onScriptComplete;
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/ script.src = jsonpScriptSrc(chunkId);
+/******/
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ onScriptComplete = function (event) {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var chunk = installedChunks[chunkId];
+/******/ if(chunk !== 0) {
+/******/ if(chunk) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ chunk[1](error);
+/******/ }
+/******/ installedChunks[chunkId] = undefined;
+/******/ }
+/******/ };
+/******/ var timeout = setTimeout(function(){
+/******/ onScriptComplete({ type: 'timeout', target: script });
+/******/ }, 120000);
+/******/ script.onerror = script.onload = onScriptComplete;
+/******/ document.head.appendChild(script);
+/******/ }
+/******/ }
+/******/ return Promise.all(promises);
+/******/ };
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = __webpack_require__(value);
+/******/ if(mode & 8) return value;
+/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ return ns;
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/ // on error function for async loading
+/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
+/******/
+/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
+/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
+/******/ jsonpArray.push = webpackJsonpCallback;
+/******/ jsonpArray = jsonpArray.slice();
+/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
+/******/ var parentJsonpFunction = oldJsonpFunction;
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 1));
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/test/cases/insert-function/src/index.js b/test/cases/insert-function/src/index.js
new file mode 100644
index 00000000..49171c3c
--- /dev/null
+++ b/test/cases/insert-function/src/index.js
@@ -0,0 +1,4 @@
+/* eslint-env browser */
+
+// eslint-disable-next-line
+import('./inject.css');
diff --git a/test/cases/insert-function/src/inject.css b/test/cases/insert-function/src/inject.css
new file mode 100644
index 00000000..67ce83e4
--- /dev/null
+++ b/test/cases/insert-function/src/inject.css
@@ -0,0 +1,3 @@
+body {
+ background: red;
+}
diff --git a/test/cases/insert-function/webpack.config.js b/test/cases/insert-function/webpack.config.js
new file mode 100644
index 00000000..614611eb
--- /dev/null
+++ b/test/cases/insert-function/webpack.config.js
@@ -0,0 +1,33 @@
+/* global document */
+
+const Self = require('../../../src/cjs');
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: Self.loader,
+ },
+ {
+ loader: 'css-loader',
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new Self({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ insert: function insert(linkTag) {
+ const reference = document.querySelector('.hot-reload');
+ if (reference) {
+ reference.parentNode.insertBefore(linkTag, reference);
+ }
+ },
+ }),
+ ],
+};
diff --git a/test/cases/insert-string/expected/1.css b/test/cases/insert-string/expected/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-string/expected/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-string/expected/1.js b/test/cases/insert-string/expected/1.js
new file mode 100644
index 00000000..4292040c
--- /dev/null
+++ b/test/cases/insert-string/expected/1.js
@@ -0,0 +1,12 @@
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-string/expected/main.js b/test/cases/insert-string/expected/main.js
new file mode 100644
index 00000000..5cfb28ea
--- /dev/null
+++ b/test/cases/insert-string/expected/main.js
@@ -0,0 +1,260 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ // install a JSONP callback for chunk loading
+/******/ function webpackJsonpCallback(data) {
+/******/ var chunkIds = data[0];
+/******/ var moreModules = data[1];
+/******/
+/******/
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0, resolves = [];
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ resolves.push(installedChunks[chunkId][0]);
+/******/ }
+/******/ installedChunks[chunkId] = 0;
+/******/ }
+/******/ for(moduleId in moreModules) {
+/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
+/******/ modules[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
+/******/ while(resolves.length) {
+/******/ resolves.shift()();
+/******/ }
+/******/
+/******/ };
+/******/
+/******/
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // Promise = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/
+/******/
+/******/ // script path function
+/******/ function jsonpScriptSrc(chunkId) {
+/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
+/******/ }
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = function requireEnsure(chunkId) {
+/******/ var promises = [];
+/******/
+/******/
+/******/ // mini-css-extract-plugin CSS loading
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {
+/******/ var href = "" + chunkId + ".css";
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return resolve();
+/******/ }
+/******/ var linkTag = document.createElement("link");
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ linkTag.onload = resolve;
+/******/ linkTag.onerror = function(event) {
+/******/ var request = event && event.target && event.target.src || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + request + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.request = request;
+/******/ delete installedCssChunks[chunkId]
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ };
+/******/ linkTag.href = fullhref;
+/******/
+/******/ var target = document.querySelector("script[src='1.js']");
+/******/ if (!target) {throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.")}
+/******/ target.parentNode.insertBefore(linkTag, target.nextSibling);
+/******/ }).then(function() {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }));
+/******/ }
+/******/
+/******/ // JSONP chunk loading for javascript
+/******/
+/******/ var installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise(function(resolve, reject) {
+/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
+/******/ });
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var script = document.createElement('script');
+/******/ var onScriptComplete;
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/ script.src = jsonpScriptSrc(chunkId);
+/******/
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ onScriptComplete = function (event) {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var chunk = installedChunks[chunkId];
+/******/ if(chunk !== 0) {
+/******/ if(chunk) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ chunk[1](error);
+/******/ }
+/******/ installedChunks[chunkId] = undefined;
+/******/ }
+/******/ };
+/******/ var timeout = setTimeout(function(){
+/******/ onScriptComplete({ type: 'timeout', target: script });
+/******/ }, 120000);
+/******/ script.onerror = script.onload = onScriptComplete;
+/******/ document.head.appendChild(script);
+/******/ }
+/******/ }
+/******/ return Promise.all(promises);
+/******/ };
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = __webpack_require__(value);
+/******/ if(mode & 8) return value;
+/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ return ns;
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/ // on error function for async loading
+/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
+/******/
+/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
+/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
+/******/ jsonpArray.push = webpackJsonpCallback;
+/******/ jsonpArray = jsonpArray.slice();
+/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
+/******/ var parentJsonpFunction = oldJsonpFunction;
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 1));
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/test/cases/insert-string/src/index.js b/test/cases/insert-string/src/index.js
new file mode 100644
index 00000000..49171c3c
--- /dev/null
+++ b/test/cases/insert-string/src/index.js
@@ -0,0 +1,4 @@
+/* eslint-env browser */
+
+// eslint-disable-next-line
+import('./inject.css');
diff --git a/test/cases/insert-string/src/inject.css b/test/cases/insert-string/src/inject.css
new file mode 100644
index 00000000..67ce83e4
--- /dev/null
+++ b/test/cases/insert-string/src/inject.css
@@ -0,0 +1,3 @@
+body {
+ background: red;
+}
diff --git a/test/cases/insert-string/webpack.config.js b/test/cases/insert-string/webpack.config.js
new file mode 100644
index 00000000..85943cd1
--- /dev/null
+++ b/test/cases/insert-string/webpack.config.js
@@ -0,0 +1,28 @@
+/* global document */
+
+const Self = require('../../../src/cjs');
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: Self.loader,
+ },
+ {
+ loader: 'css-loader',
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new Self({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ insert: "script[src='1.js']",
+ }),
+ ],
+};
diff --git a/test/cases/insert-undefined/expected/1.css b/test/cases/insert-undefined/expected/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-undefined/expected/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-undefined/expected/1.js b/test/cases/insert-undefined/expected/1.js
new file mode 100644
index 00000000..4292040c
--- /dev/null
+++ b/test/cases/insert-undefined/expected/1.js
@@ -0,0 +1,12 @@
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-undefined/expected/main.js b/test/cases/insert-undefined/expected/main.js
new file mode 100644
index 00000000..91e86288
--- /dev/null
+++ b/test/cases/insert-undefined/expected/main.js
@@ -0,0 +1,259 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ // install a JSONP callback for chunk loading
+/******/ function webpackJsonpCallback(data) {
+/******/ var chunkIds = data[0];
+/******/ var moreModules = data[1];
+/******/
+/******/
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0, resolves = [];
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ resolves.push(installedChunks[chunkId][0]);
+/******/ }
+/******/ installedChunks[chunkId] = 0;
+/******/ }
+/******/ for(moduleId in moreModules) {
+/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
+/******/ modules[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
+/******/ while(resolves.length) {
+/******/ resolves.shift()();
+/******/ }
+/******/
+/******/ };
+/******/
+/******/
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // Promise = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/
+/******/
+/******/ // script path function
+/******/ function jsonpScriptSrc(chunkId) {
+/******/ return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
+/******/ }
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = function requireEnsure(chunkId) {
+/******/ var promises = [];
+/******/
+/******/
+/******/ // mini-css-extract-plugin CSS loading
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {
+/******/ var href = "" + chunkId + ".css";
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return resolve();
+/******/ }
+/******/ var linkTag = document.createElement("link");
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ linkTag.onload = resolve;
+/******/ linkTag.onerror = function(event) {
+/******/ var request = event && event.target && event.target.src || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + request + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.request = request;
+/******/ delete installedCssChunks[chunkId]
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ };
+/******/ linkTag.href = fullhref;
+/******/
+/******/ var head = document.getElementsByTagName("head")[0];
+/******/ head.appendChild(linkTag);
+/******/ }).then(function() {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }));
+/******/ }
+/******/
+/******/ // JSONP chunk loading for javascript
+/******/
+/******/ var installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise(function(resolve, reject) {
+/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
+/******/ });
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var script = document.createElement('script');
+/******/ var onScriptComplete;
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/ script.src = jsonpScriptSrc(chunkId);
+/******/
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ onScriptComplete = function (event) {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var chunk = installedChunks[chunkId];
+/******/ if(chunk !== 0) {
+/******/ if(chunk) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ chunk[1](error);
+/******/ }
+/******/ installedChunks[chunkId] = undefined;
+/******/ }
+/******/ };
+/******/ var timeout = setTimeout(function(){
+/******/ onScriptComplete({ type: 'timeout', target: script });
+/******/ }, 120000);
+/******/ script.onerror = script.onload = onScriptComplete;
+/******/ document.head.appendChild(script);
+/******/ }
+/******/ }
+/******/ return Promise.all(promises);
+/******/ };
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = __webpack_require__(value);
+/******/ if(mode & 8) return value;
+/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ return ns;
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/ // on error function for async loading
+/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
+/******/
+/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
+/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
+/******/ jsonpArray.push = webpackJsonpCallback;
+/******/ jsonpArray = jsonpArray.slice();
+/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
+/******/ var parentJsonpFunction = oldJsonpFunction;
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 1));
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/test/cases/insert-undefined/src/index.js b/test/cases/insert-undefined/src/index.js
new file mode 100644
index 00000000..49171c3c
--- /dev/null
+++ b/test/cases/insert-undefined/src/index.js
@@ -0,0 +1,4 @@
+/* eslint-env browser */
+
+// eslint-disable-next-line
+import('./inject.css');
diff --git a/test/cases/insert-undefined/src/inject.css b/test/cases/insert-undefined/src/inject.css
new file mode 100644
index 00000000..67ce83e4
--- /dev/null
+++ b/test/cases/insert-undefined/src/inject.css
@@ -0,0 +1,3 @@
+body {
+ background: red;
+}
diff --git a/test/cases/insert-undefined/webpack.config.js b/test/cases/insert-undefined/webpack.config.js
new file mode 100644
index 00000000..cff5a5fb
--- /dev/null
+++ b/test/cases/insert-undefined/webpack.config.js
@@ -0,0 +1,27 @@
+/* global document */
+
+const Self = require('../../../src/cjs.js');
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: Self.loader,
+ },
+ {
+ loader: 'css-loader',
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new Self({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+};
diff --git a/test/fixtures/insert.js b/test/fixtures/insert.js
new file mode 100644
index 00000000..1b9d3ae6
--- /dev/null
+++ b/test/fixtures/insert.js
@@ -0,0 +1,2 @@
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "simple" */ './simple.css');
diff --git a/test/helpers/getErrors.js b/test/helpers/getErrors.js
new file mode 100644
index 00000000..716fbbb4
--- /dev/null
+++ b/test/helpers/getErrors.js
@@ -0,0 +1,5 @@
+import normalizeErrors from './normalizeErrors';
+
+export default (stats) => {
+ return normalizeErrors(stats.compilation.errors);
+};
diff --git a/test/helpers/getWarnings.js b/test/helpers/getWarnings.js
new file mode 100644
index 00000000..c8a09d6d
--- /dev/null
+++ b/test/helpers/getWarnings.js
@@ -0,0 +1,5 @@
+import normalizeErrors from './normalizeErrors';
+
+export default (stats) => {
+ return normalizeErrors(stats.compilation.warnings);
+};
diff --git a/test/helpers/index.js b/test/helpers/index.js
index 1446ee47..bb004e01 100644
--- a/test/helpers/index.js
+++ b/test/helpers/index.js
@@ -1,5 +1,17 @@
import compile from './compile';
import getCompiler from './getCompiler';
import source from './source';
+import readAsset from './readAsset';
+import runInJsDom from './runInJsDom';
+import getErrors from './getErrors';
+import getWarnings from './getWarnings';
-export { source, compile, getCompiler };
+export {
+ source,
+ compile,
+ getCompiler,
+ readAsset,
+ runInJsDom,
+ getErrors,
+ getWarnings,
+};
diff --git a/test/helpers/normalizeErrors.js b/test/helpers/normalizeErrors.js
new file mode 100644
index 00000000..c6d0f160
--- /dev/null
+++ b/test/helpers/normalizeErrors.js
@@ -0,0 +1,19 @@
+function removeCWD(str) {
+ const isWin = process.platform === 'win32';
+ let cwd = process.cwd();
+
+ if (isWin) {
+ // eslint-disable-next-line no-param-reassign
+ str = str.replace(/\\/g, '/');
+ // eslint-disable-next-line no-param-reassign
+ cwd = cwd.replace(/\\/g, '/');
+ }
+
+ return str.replace(new RegExp(cwd, 'g'), '');
+}
+
+export default (errors) => {
+ return errors.map((error) =>
+ removeCWD(error.toString().split('\n').slice(0, 2).join('\n'))
+ );
+};
diff --git a/test/helpers/readAsset.js b/test/helpers/readAsset.js
new file mode 100644
index 00000000..8f4699f0
--- /dev/null
+++ b/test/helpers/readAsset.js
@@ -0,0 +1,23 @@
+import path from 'path';
+
+export default (asset, compiler, stats) => {
+ const usedFs = compiler.outputFileSystem;
+ const outputPath = stats.compilation.outputOptions.path;
+
+ let data = '';
+ let targetFile = asset;
+
+ const queryStringIdx = targetFile.indexOf('?');
+
+ if (queryStringIdx >= 0) {
+ targetFile = targetFile.substr(0, queryStringIdx);
+ }
+
+ try {
+ data = usedFs.readFileSync(path.join(outputPath, targetFile)).toString();
+ } catch (error) {
+ data = error.toString();
+ }
+
+ return data;
+};
diff --git a/test/helpers/runInJsDom.js b/test/helpers/runInJsDom.js
new file mode 100644
index 00000000..343a06cc
--- /dev/null
+++ b/test/helpers/runInJsDom.js
@@ -0,0 +1,44 @@
+import jsdom from 'jsdom';
+
+import { readAsset } from './index';
+
+function runInJsDom(assetName, compiler, stats, testFn) {
+ const bundle = readAsset(assetName, compiler, stats);
+ const virtualConsole = new jsdom.VirtualConsole();
+
+ virtualConsole.sendTo(console);
+
+ try {
+ const dom = new jsdom.JSDOM(
+ `
+
+
+ style-loader test
+
+
+
+