From b7e4ca8d5f85d62b5fbe6ecf0029646392509228 Mon Sep 17 00:00:00 2001
From: Anton Kudryavtsev <boblobl4@gmail.com>
Date: Fri, 13 Mar 2020 19:52:16 +0300
Subject: [PATCH] feat(styles): add singleTag option for CSS injection

Allows to select between single/multiple <style> tags mode
---
 README.md                             |    2 +-
 docs/globals.html                     |    2 +-
 docs/index.html                       |    2 +-
 docs/interfaces/options.html          |   32 +-
 package.json                          |    1 -
 src/loaders/postcss/index.ts          |    6 +-
 src/runtime/.eslintrc.js              |    7 +
 src/runtime/inject-css.js             |   61 +
 src/types.ts                          |   23 +-
 test/__snapshots__/index.test.ts.snap | 1904 +++++++++++++------------
 yarn.lock                             |    5 -
 11 files changed, 1092 insertions(+), 953 deletions(-)
 create mode 100644 src/runtime/.eslintrc.js
 create mode 100644 src/runtime/inject-css.js
diff --git a/README.md b/README.md
index 2d596f3e..18d42162 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ After that you can import CSS files in your code:
 import "./style.css";
 ```
 
-Note that, by default, generated CSS will be injected into `<head>` using [insert-css](https://github.com/substack/insert-css#api), with CSS also available as default export unless `extract: true`:
+Note that, by default, generated CSS will be injected into `<head>`, with CSS also available as default export unless `extract: true`:
 
 ```js
 // Inject into `<head>`, also available as `style` object in this example
diff --git a/docs/globals.html b/docs/globals.html
index 05b6d23d..a37cb03c 100644
--- a/docs/globals.html
+++ b/docs/globals.html
@@ -2585,7 +2585,7 @@ <h2>Usage</h2>
 };</code></pre>
 			<p>After that you can import CSS files in your code:</p>
 			<pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-string">"./style.css"</span>;</code></pre>
-			<p>Note that, by default, generated CSS will be injected into <code>&lt;head&gt;</code> using <a href="https://github.com/substack/insert-css#api">insert-css</a>, with CSS also available as default export unless <code>extract: true</code>:</p>
+			<p>Note that, by default, generated CSS will be injected into <code>&lt;head&gt;</code>, with CSS also available as default export unless <code>extract: true</code>:</p>
 			<pre><code class="language-js"><span class="hljs-comment">// Inject into `&lt;head&gt;`, also available as `style` object in this example</span>
 <span class="hljs-keyword">import</span> style <span class="hljs-keyword">from</span> <span class="hljs-string">"./style.css"</span>;</code></pre>
 			<p>This plugin will also automatically detect and use local PostCSS config files.</p>
diff --git a/docs/index.html b/docs/index.html
index 9665810f..8daf2b52 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2585,7 +2585,7 @@ <h2>Usage</h2>
 };</code></pre>
 			<p>After that you can import CSS files in your code:</p>
 			<pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-string">"./style.css"</span>;</code></pre>
-			<p>Note that, by default, generated CSS will be injected into <code>&lt;head&gt;</code> using <a href="https://github.com/substack/insert-css#api">insert-css</a>, with CSS also available as default export unless <code>extract: true</code>:</p>
+			<p>Note that, by default, generated CSS will be injected into <code>&lt;head&gt;</code>, with CSS also available as default export unless <code>extract: true</code>:</p>
 			<pre><code class="language-js"><span class="hljs-comment">// Inject into `&lt;head&gt;`, also available as `style` object in this example</span>
 <span class="hljs-keyword">import</span> style <span class="hljs-keyword">from</span> <span class="hljs-string">"./style.css"</span>;</code></pre>
 			<p>This plugin will also automatically detect and use local PostCSS config files.</p>
diff --git a/docs/interfaces/options.html b/docs/interfaces/options.html
index cbd7b694..8b901fa9 100644
--- a/docs/interfaces/options.html
+++ b/docs/interfaces/options.html
@@ -2485,7 +2485,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> auto<wbr>Modules</h3>
 				<div class="tsd-signature tsd-kind-icon">auto<wbr>Modules<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L245">src/types.ts:245</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L264">src/types.ts:264</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2510,7 +2510,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> config</h3>
 				<div class="tsd-signature tsd-kind-icon">config<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="postcssloadconfigoptions.html" class="tsd-signature-type">PostCSSLoadConfigOptions</a></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L288">src/types.ts:288</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L307">src/types.ts:307</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2570,7 +2570,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> extract</h3>
 				<div class="tsd-signature tsd-kind-icon">extract<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L229">src/types.ts:229</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L248">src/types.ts:248</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2608,7 +2608,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> include</h3>
 			<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
 				<a name="inject" class="tsd-anchor"></a>
 				<h3><span class="tsd-flag ts-flagOptional">Optional</span> inject</h3>
-				<div class="tsd-signature tsd-kind-icon">inject<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>container<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">; </span>prepend<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>varname<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span></div>
+				<div class="tsd-signature tsd-kind-icon">inject<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>container<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">; </span>prepend<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span><span class="tsd-signature-symbol">; </span>singleTag<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">true</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>varname<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span></div>
 				<aside class="tsd-sources">
 					<ul>
 						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L219">src/types.ts:219</a></li>
@@ -2617,7 +2617,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> inject</h3>
 				<div class="tsd-comment tsd-typography">
 					<div class="lead">
 						<p>Inject CSS into <code>&lt;head&gt;</code>, it&#39;s always false when <code>extract: true</code>.
-							You can also use it as options for <a href="https://github.com/substack/insert-css#api">insert-css</a>.
+							You can also use it as options for CSS insertion.
 						It can also be a <code>function</code>, returning a <code>string</code> with js code.</p>
 					</div>
 					<dl class="tsd-comment-tags">
@@ -2633,7 +2633,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> loaders</h3>
 				<div class="tsd-signature tsd-kind-icon">loaders<span class="tsd-signature-symbol">:</span> <a href="loader.html" class="tsd-signature-type">Loader</a><span class="tsd-signature-symbol">[]</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L310">src/types.ts:310</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L329">src/types.ts:329</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2653,7 +2653,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> minimize</h3>
 				<div class="tsd-signature tsd-kind-icon">minimize<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">CssNanoOptions</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L258">src/types.ts:258</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L277">src/types.ts:277</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2674,7 +2674,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> modules</h3>
 				<div class="tsd-signature tsd-kind-icon">modules<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="../globals.html#modulesoptions" class="tsd-signature-type">ModulesOptions</a></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L236">src/types.ts:236</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L255">src/types.ts:255</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2695,7 +2695,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> named<wbr>Exports</h3
 				<div class="tsd-signature tsd-kind-icon">named<wbr>Exports<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L252">src/types.ts:252</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L271">src/types.ts:271</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2716,7 +2716,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> on<wbr>Extract</h3>
 				<div class="tsd-signature tsd-kind-icon">on<wbr>Extract<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>fn<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="extracteddata.html" class="tsd-signature-type">ExtractedData</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L323">src/types.ts:323</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L342">src/types.ts:342</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2737,7 +2737,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> on<wbr>Import</h3>
 				<div class="tsd-signature tsd-kind-icon">on<wbr>Import<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>code<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L316">src/types.ts:316</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L335">src/types.ts:335</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2757,7 +2757,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> parser</h3>
 				<div class="tsd-signature tsd-kind-icon">parser<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PostCSSParser</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L270">src/types.ts:270</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L289">src/types.ts:289</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2797,7 +2797,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> source<wbr>Map</h3>
 				<div class="tsd-signature tsd-kind-icon">source<wbr>Map<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"inline"</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L264">src/types.ts:264</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L283">src/types.ts:283</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2817,7 +2817,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> stringifier</h3>
 				<div class="tsd-signature tsd-kind-icon">stringifier<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PostCSSStringifier</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L276">src/types.ts:276</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L295">src/types.ts:295</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2837,7 +2837,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> syntax</h3>
 				<div class="tsd-signature tsd-kind-icon">syntax<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PostCSSSyntax</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L282">src/types.ts:282</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L301">src/types.ts:301</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
@@ -2857,7 +2857,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> use</h3>
 				<div class="tsd-signature tsd-kind-icon">use<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">{}</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>less<span class="tsd-signature-symbol">?: </span><a href="../globals.html#objectwithunknownprops" class="tsd-signature-type">ObjectWithUnknownProps</a><span class="tsd-signature-symbol">; </span>sass<span class="tsd-signature-symbol">?: </span><a href="../globals.html#sassloaderoptions" class="tsd-signature-type">SASSLoaderOptions</a><span class="tsd-signature-symbol"> &amp; </span><a href="../globals.html#objectwithunknownprops" class="tsd-signature-type">ObjectWithUnknownProps</a><span class="tsd-signature-symbol">; </span>stylus<span class="tsd-signature-symbol">?: </span><a href="../globals.html#objectwithunknownprops" class="tsd-signature-type">ObjectWithUnknownProps</a><span class="tsd-signature-symbol"> }</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L298">src/types.ts:298</a></li>
+						<li>Defined in <a href="https://github.com/Anidetrix/rollup-plugin-styles/blob/master/src/types.ts#L317">src/types.ts:317</a></li>
 					</ul>
 				</aside>
 				<div class="tsd-comment tsd-typography">
diff --git a/package.json b/package.json
index 70db072b..48f3f548 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,6 @@
     "hash.js": "^1",
     "icss-utils": "^4",
     "import-cwd": "^3",
-    "insert-css": "^2",
     "p-queue": "^6",
     "postcss": "^7",
     "postcss-load-config": "^2",
diff --git a/src/loaders/postcss/index.ts b/src/loaders/postcss/index.ts
index 0226c1ac..73d4485b 100644
--- a/src/loaders/postcss/index.ts
+++ b/src/loaders/postcss/index.ts
@@ -193,7 +193,11 @@ const loader: Loader<PostCSSLoaderOptions> = {
         output += options.inject(cssVarName, this.id);
       } else {
         const injectorName = safeId("injector");
-        const injectorPath = normalizePath(await resolveAsync("insert-css"));
+        const injectorPath = normalizePath(
+          await resolveAsync("./inject-css", {
+            basedir: path.join(__dirname, "..", "..", "runtime"),
+          }),
+        );
         const injectorData =
           typeof options.inject === "object" ? `,${JSON.stringify(options.inject)}` : "";
         output += `\n${[
diff --git a/src/runtime/.eslintrc.js b/src/runtime/.eslintrc.js
new file mode 100644
index 00000000..82e026eb
--- /dev/null
+++ b/src/runtime/.eslintrc.js
@@ -0,0 +1,7 @@
+const path = require("path");
+module.exports = {
+  root: true,
+  extends: [path.resolve(__dirname, "..", "..", ".eslintrc.js")],
+  env: { node: false, browser: true },
+  rules: { "prefer-const": "error" },
+};
diff --git a/src/runtime/inject-css.js b/src/runtime/inject-css.js
new file mode 100644
index 00000000..6b8cc267
--- /dev/null
+++ b/src/runtime/inject-css.js
@@ -0,0 +1,61 @@
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+export default (css, options = {}) => {
+  if (!css || typeof document === "undefined") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement("style");
+    styleTag.type = "text/css";
+    if (position === "prepend" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
+    }
+    return styleTag;
+  };
+
+  const singleTag = typeof options.singeTag !== "undefined" ? options.singleTag : false;
+  const container = typeof options.container !== "undefined" ? options.container : document.head;
+  const position = options.prepend === true ? "prepend" : "append";
+
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
+
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
+    }
+
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
+    } else {
+      styleTag = styleTags[id][position] = createStyleTag();
+    }
+  } else {
+    styleTag = createStyleTag();
+  }
+
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
+
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
diff --git a/src/types.ts b/src/types.ts
index 876e387d..471abebd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -211,14 +211,33 @@ export interface Options {
   plugins?: PostCSSPlugin<unknown>[];
   /**
    * Inject CSS into `<head>`, it's always false when `extract: true`.
-   * You can also use it as options for [insert-css](https://github.com/substack/insert-css#api).
+   * You can also use it as options for CSS insertion.
    * It can also be a `function`, returning a `string` with js code.
    *
    * @default true
    * */
   inject?:
     | boolean
-    | { prepend?: boolean; container?: HTMLElement }
+    | {
+        /**
+         * Insert `<style>` tag into container as a first child
+         *
+         * @default false
+         * */
+        prepend?: boolean;
+        /**
+         * Inject CSS into single `<style>` tag only
+         *
+         * @default false
+         * */
+        singleTag?: boolean;
+        /**
+         * Container for `<style>` tag(s) injection
+         *
+         * @default document.head
+         */
+        container?: HTMLElement;
+      }
     | ((varname: string, id: string) => string);
   /**
    * Extract CSS to the same location where JS file is generated but with .css extension.
diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
index a8257136..3074d818 100644
--- a/test/__snapshots__/index.test.ts.snap
+++ b/test/__snapshots__/index.test.ts.snap
@@ -3,134 +3,140 @@
 exports[`basic postcss-config: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\"a {\\\\n  width: 30%;\\\\n  color: red\\\\n}\\\\n\\\\n.multiline,\\\\n.selector {\\\\n  box-shadow: inset 0 2px 0px #dcffa6,\\\\n              0 2px 5px #000\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
 exports[`basic postcss-options: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".prefixed {\\\\n  display: -webkit-box;\\\\n  display: -webkit-flex;\\\\n  display: -moz-box;\\\\n  display: -ms-flexbox;\\\\n  display: flex;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
@@ -158,82 +164,85 @@ exports[`basic postcss-resolvers: map 1`] = `"{\\"version\\":3,\\"sources\\":[\\
 exports[`basic simple: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".foo {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 var css_2f84417a$3 = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$3);
+injector_14187a73(css_2f84417a$3);
 
 var css_2f84417a$4 = \\".sass {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\";
-insertCss_1(css_2f84417a$4);
+injector_14187a73(css_2f84417a$4);
 
 var css_2f84417a$5 = \\".less {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$5);
+injector_14187a73(css_2f84417a$5);
 
 console.log(css_2f84417a, css_2f84417a$1);
 "
@@ -242,67 +251,70 @@ console.log(css_2f84417a, css_2f84417a$1);
 exports[`basic skip-loader: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
@@ -492,82 +504,85 @@ console.log(css_2f84417a, css_2f84417a$1);
 exports[`inject top: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".foo {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a,{\\"prepend\\":true});
 
 var css_2f84417a$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$1,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a$1,{\\"prepend\\":true});
 
 var css_2f84417a$2 = \\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$2,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a$2,{\\"prepend\\":true});
 
 var css_2f84417a$3 = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$3,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a$3,{\\"prepend\\":true});
 
 var css_2f84417a$4 = \\".sass {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\";
-insertCss_1(css_2f84417a$4,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a$4,{\\"prepend\\":true});
 
 var css_2f84417a$5 = \\".less {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a$5,{\\"prepend\\":true});
+injector_14187a73(css_2f84417a$5,{\\"prepend\\":true});
 
 console.log(css_2f84417a, css_2f84417a$1);
 "
@@ -611,82 +626,85 @@ exports[`minimize extract-sourcemap-true: map 1`] = `"{\\"version\\":3,\\"source
 exports[`minimize inject: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".foo{color:red}\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\".bar{color:red}\\";
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".stylus{color:red;background:red}\\";
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 var css_2f84417a$3 = \\".pcss{color:red}\\";
-insertCss_1(css_2f84417a$3);
+injector_14187a73(css_2f84417a$3);
 
 var css_2f84417a$4 = \\".sass{width:30%;color:red}\\";
-insertCss_1(css_2f84417a$4);
+injector_14187a73(css_2f84417a$4);
 
 var css_2f84417a$5 = \\".less{color:#6c94be}\\";
-insertCss_1(css_2f84417a$5);
+injector_14187a73(css_2f84417a$5);
 
 console.log(css_2f84417a, css_2f84417a$1);
 "
@@ -695,83 +713,86 @@ console.log(css_2f84417a, css_2f84417a$1);
 exports[`modules auto-modules: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".global {\\\\n  color: red;\\\\n}\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\".a_module_a {\\\\n  color: red;\\\\n}\\\\n\\";
 var a = {\\"a\\":\\"a_module_a\\"};
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".b_module_b {\\\\n  color: red; }\\\\n\\";
 var b = {\\"b\\":\\"b_module_b\\"};
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 var css_2f84417a$3 = \\".c_module_c {\\\\n  color: red;\\\\n}\\\\n\\";
 var c = {\\"c\\":\\"c_module_c\\"};
-insertCss_1(css_2f84417a$3);
+injector_14187a73(css_2f84417a$3);
 
 var css_2f84417a$4 = \\".d_module_d {\\\\n  color: #f00;\\\\n}\\\\n\\";
 var d = {\\"d\\":\\"d_module_d\\"};
-insertCss_1(css_2f84417a$4);
+injector_14187a73(css_2f84417a$4);
 
 console.log(a, b, c, d);
 "
@@ -930,76 +951,79 @@ exports[`modules extract-sourcemap-true: map 1`] = `"{\\"version\\":3,\\"sources
 exports[`modules inject: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style_module {\\\\n  color: #1F4F7F;\\\\n}\\\\n\\\\n.style_module2 {\\\\n}\\\\n\\";
 var style = {\\"primary\\":\\"#BF4040\\",\\"secondary\\":\\"#1F4F7F\\",\\"module\\":\\"style_module\\",\\"module2\\":\\"style_module2 composed_composition composition2_compositioned\\"};
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\"@media screen and (min-width: 900px) {\\\\n  .composed_composition {\\\\n    background-color: aqua;\\\\n  }\\\\n}\\\\n\\\\n.composed_composition {\\\\n  background-color: #BF4040;\\\\n}\\\\n\\";
 var composed = {\\"primary\\":\\"#BF4040\\",\\"composition\\":\\"composed_composition composition2_compositioned\\"};
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".composition2_compositioned {\\\\n  width: 30%;\\\\n}\\\\n\\";
 var composition2 = {\\"compositioned\\":\\"composition2_compositioned\\"};
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 console.log(style.module, composed.composition, composition2.compositioned);
 "
@@ -1008,76 +1032,79 @@ console.log(style.module, composed.composition, composition2.compositioned);
 exports[`modules inject-object: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
-    }
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
-
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style_module {\\\\n  color: #1F4F7F;\\\\n}\\\\n\\\\n.style_module2 {\\\\n}\\\\n\\";
 var style = {\\"primary\\":\\"#BF4040\\",\\"secondary\\":\\"#1F4F7F\\",\\"module\\":\\"style_module\\",\\"module2\\":\\"style_module2 composed_composition composition2_compositioned\\"};
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\"@media screen and (min-width: 900px) {\\\\n  .composed_composition {\\\\n    background-color: aqua;\\\\n  }\\\\n}\\\\n\\\\n.composed_composition {\\\\n  background-color: #BF4040;\\\\n}\\\\n\\";
 var composed = {\\"primary\\":\\"#BF4040\\",\\"composition\\":\\"composed_composition composition2_compositioned\\"};
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".composition2_compositioned {\\\\n  width: 30%;\\\\n}\\\\n\\";
 var composition2 = {\\"compositioned\\":\\"composition2_compositioned\\"};
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 console.log(style.module, composed.composition, composition2.compositioned);
 "
@@ -1086,78 +1113,81 @@ console.log(style.module, composed.composition, composition2.compositioned);
 exports[`modules named-exports: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 const valid = \\"style_valid\\";
 const _new = \\"style_new\\";
 var css_2f84417a = \\".style_valid {\\\\n  color: red;\\\\n}\\\\n\\\\n.style_new {\\\\n  color: blue;\\\\n}\\\\n\\";
 const stylesheet = \\".style_valid {\\\\n  color: red;\\\\n}\\\\n\\\\n.style_new {\\\\n  color: blue;\\\\n}\\\\n\\";
 var style = {\\"valid\\":\\"style_valid\\",\\"new\\":\\"style_new\\",\\"_new\\":\\"style_new\\"};
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var style$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    valid: valid,
-    _new: _new,
-    stylesheet: stylesheet,
-    'default': style
+  __proto__: null,
+  valid: valid,
+  _new: _new,
+  stylesheet: stylesheet,
+  'default': style
 });
 
 console.log(style$1);
@@ -1167,78 +1197,81 @@ console.log(style$1);
 exports[`modules named-exports-custom-class-name: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 const validhacked = \\"style_valid\\";
 const newhacked = \\"style_new\\";
 var css_2f84417a = \\".style_valid {\\\\n  color: red;\\\\n}\\\\n\\\\n.style_new {\\\\n  color: blue;\\\\n}\\\\n\\";
 const stylesheet = \\".style_valid {\\\\n  color: red;\\\\n}\\\\n\\\\n.style_new {\\\\n  color: blue;\\\\n}\\\\n\\";
 var style = {\\"valid\\":\\"style_valid\\",\\"new\\":\\"style_new\\",\\"validhacked\\":\\"style_valid\\",\\"newhacked\\":\\"style_new\\"};
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var style$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    validhacked: validhacked,
-    newhacked: newhacked,
-    stylesheet: stylesheet,
-    'default': style
+  __proto__: null,
+  validhacked: validhacked,
+  newhacked: newhacked,
+  stylesheet: stylesheet,
+  'default': style
 });
 
 console.log(style$1);
@@ -1255,269 +1288,281 @@ console.log(undefined, undefined);
 exports[`sass data: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".data {\\\\n  color: red; }\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
 exports[`sass default: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
 exports[`sass import: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".a {\\\\n  color: red; }\\\\n\\\\n.b {\\\\n  color: red; }\\\\n\\\\n.c {\\\\n  color: red; }\\\\n\\\\n.foo {\\\\n  color: red; }\\\\n\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
 exports[`sass modules: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style_someStyle {\\\\n  color: red; }\\\\n\\";
 var style = {\\"some-style\\":\\"style_someStyle\\"};
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 console.log(style);
 "
@@ -1526,149 +1571,155 @@ console.log(style);
 exports[`sass sourcemap: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".style {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2Fzcy9zdHlsZS5zYXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsVUFBVTtFQUNWLFVBQVUsRUFBQSIsInNvdXJjZXNDb250ZW50IjpbIi5zdHlsZSB7XG4gIHdpZHRoOiAzMCU7XG4gIGNvbG9yOiByZWQ7IH1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 "
 `;
 
 exports[`sourcemap inline: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
-    }
-
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".foo {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL2Zvby5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9vIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL2Jhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIuYmFyIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFPO0VBQ1AsZ0JBQVk7QUFDZCIsInNvdXJjZXNDb250ZW50IjpbIi5zdHlsdXMge1xuICBjb2xvcjogI2YwMDtcbiAgYmFja2dyb3VuZDogI2YwMDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 var css_2f84417a$3 = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnBjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIucGNzcyB7XG4gIGNvbG9yOiByZWQ7XG59XG4iXX0= */\\";
-insertCss_1(css_2f84417a$3);
+injector_14187a73(css_2f84417a$3);
 
 var css_2f84417a$4 = \\".sass {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnNhc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0VBQ1YsVUFBVSxFQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLnNhc3Mge1xuICB3aWR0aDogMzAlO1xuICBjb2xvcjogcmVkOyB9XG4iXX0= */\\";
-insertCss_1(css_2f84417a$4);
+injector_14187a73(css_2f84417a$4);
 
 var css_2f84417a$5 = \\".less {\\\\n  color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxjQUFBO0FBRkYiLCJzb3VyY2VzQ29udGVudCI6WyJAbmljZS1ibHVlOiAjNWI4M2FkO1xuQGxpZ2h0LWJsdWU6IEBuaWNlLWJsdWUgKyAjMTExO1xuXG4ubGVzcyB7XG4gIGNvbG9yOiBAbGlnaHQtYmx1ZTtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$5);
+injector_14187a73(css_2f84417a$5);
 
 console.log(css_2f84417a, css_2f84417a$1);
 "
@@ -1677,82 +1728,85 @@ console.log(css_2f84417a, css_2f84417a$1);
 exports[`sourcemap true: js 1`] = `
 "'use strict';
 
-var containers = []; // will store container HTMLElement references
-var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
-
-var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
-
-function insertCss(css, options) {
-    options = options || {};
-
-    if (css === undefined) {
-        throw new Error(usage);
+/** @type {HTMLElement[]} */
+const containers = [];
+/** @type {{prepend:HTMLStyleElement,append:HTMLStyleElement}[]} */
+const styleTags = [];
+
+/**
+ * @param {string|undefined} css
+ * @param {object} [options={}]
+ * @param {boolean} [options.prepend]
+ * @param {boolean} [options.singleTag]
+ * @param {HTMLElement} [options.container]
+ * @returns {void}
+ */
+var injector_14187a73 = (css, options = {}) => {
+  if (!css || typeof document === \\"undefined\\") return;
+
+  const createStyleTag = () => {
+    const styleTag = document.createElement(\\"style\\");
+    styleTag.type = \\"text/css\\";
+    if (position === \\"prepend\\" && container.firstChild) {
+      container.insertBefore(styleTag, container.firstChild);
+    } else {
+      container.append(styleTag);
     }
+    return styleTag;
+  };
 
-    var position = options.prepend === true ? 'prepend' : 'append';
-    var container = options.container !== undefined ? options.container : document.querySelector('head');
-    var containerId = containers.indexOf(container);
-
-    // first time we see this container, create the necessary entries
-    if (containerId === -1) {
-        containerId = containers.push(container) - 1;
-        styleElements[containerId] = {};
-    }
+  const singleTag = typeof options.singeTag !== \\"undefined\\" ? options.singleTag : false;
+  const container = typeof options.container !== \\"undefined\\" ? options.container : document.head;
+  const position = options.prepend === true ? \\"prepend\\" : \\"append\\";
 
-    // try to get the correponding container + position styleElement, create it otherwise
-    var styleElement;
+  /** @type {HTMLStyleElement} */
+  let styleTag;
+  let id = containers.indexOf(container);
 
-    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
-        styleElement = styleElements[containerId][position];
-    } else {
-        styleElement = styleElements[containerId][position] = createStyleElement();
-
-        if (position === 'prepend') {
-            container.insertBefore(styleElement, container.childNodes[0]);
-        } else {
-            container.appendChild(styleElement);
-        }
+  if (singleTag) {
+    if (id === -1) {
+      id = containers.push(container) - 1;
+      styleTags[id] = {};
     }
 
-    // strip potential UTF-8 BOM if css was read from a file
-    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
-
-    // actually add the stylesheet
-    if (styleElement.styleSheet) {
-        styleElement.styleSheet.cssText += css;
+    if (styleTags[id] && styleTags[id][position]) {
+      styleTag = styleTags[id][position];
     } else {
-        styleElement.textContent += css;
+      styleTag = styleTags[id][position] = createStyleTag();
     }
+  } else {
+    styleTag = createStyleTag();
+  }
 
-    return styleElement;
-}
-function createStyleElement() {
-    var styleElement = document.createElement('style');
-    styleElement.setAttribute('type', 'text/css');
-    return styleElement;
-}
+  // strip potential UTF-8 BOM if css was read from a file
+  if (css.charCodeAt(0) === 0xfeff) {
+    css = css.slice(1, 1 + css.length);
+  }
 
-var insertCss_1 = insertCss;
-var insertCss_2 = insertCss;
-insertCss_1.insertCss = insertCss_2;
+  if (styleTag.styleSheet) {
+    styleTag.styleSheet.cssText += css;
+  } else {
+    styleTag.textContent += css;
+  }
+};
 
 var css_2f84417a = \\".foo {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL2Zvby5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9vIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a);
+injector_14187a73(css_2f84417a);
 
 var css_2f84417a$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL2Jhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIuYmFyIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$1);
+injector_14187a73(css_2f84417a$1);
 
 var css_2f84417a$2 = \\".stylus {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFPO0VBQ1AsZ0JBQVk7QUFDZCIsInNvdXJjZXNDb250ZW50IjpbIi5zdHlsdXMge1xuICBjb2xvcjogI2YwMDtcbiAgYmFja2dyb3VuZDogI2YwMDtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$2);
+injector_14187a73(css_2f84417a$2);
 
 var css_2f84417a$3 = \\".pcss {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnBjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0FBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyIucGNzcyB7XG4gIGNvbG9yOiByZWQ7XG59XG4iXX0= */\\";
-insertCss_1(css_2f84417a$3);
+injector_14187a73(css_2f84417a$3);
 
 var css_2f84417a$4 = \\".sass {\\\\n  width: 30%;\\\\n  color: red; }\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnNhc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0VBQ1YsVUFBVSxFQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLnNhc3Mge1xuICB3aWR0aDogMzAlO1xuICBjb2xvcjogcmVkOyB9XG4iXX0= */\\";
-insertCss_1(css_2f84417a$4);
+injector_14187a73(css_2f84417a$4);
 
 var css_2f84417a$5 = \\".less {\\\\n  color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxjQUFBO0FBRkYiLCJzb3VyY2VzQ29udGVudCI6WyJAbmljZS1ibHVlOiAjNWI4M2FkO1xuQGxpZ2h0LWJsdWU6IEBuaWNlLWJsdWUgKyAjMTExO1xuXG4ubGVzcyB7XG4gIGNvbG9yOiBAbGlnaHQtYmx1ZTtcbn1cbiJdfQ== */\\";
-insertCss_1(css_2f84417a$5);
+injector_14187a73(css_2f84417a$5);
 
 console.log(css_2f84417a, css_2f84417a$1);
 "
diff --git a/yarn.lock b/yarn.lock
index 140d57e5..c975f967 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3857,11 +3857,6 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
-insert-css@^2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
-  integrity sha1-610Ql7dUL0x56jBg067gfQU4gPQ=
-
 interpret@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
