feat: support passing a {Function} (options.insertInto) (#279)

webpack-contrib · Jan 26, 2018 · 0eb8fe7 · 0eb8fe7
1 parent 3a4cb53
commit 0eb8fe7
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -139,7 +139,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
 |**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
-|**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
+|**`insertInto`**|`{String|Function}`|`<head>`|Inserts `<style></style>` into the given position|
 |**`singleton`**|`{Boolean}`|`undefined`|Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module.|
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
@@ -318,14 +318,27 @@ A new `<style>` element can be inserted before a specific element by passing an
 
 ### `insertInto`
 By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an [IFrame](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
-You can also insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
+
+You can also pass function to override default behavior and insert styles in your container, e.g
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader',
+  options: {
+    insertInto: () => document.querySelector("#root"),
+  }
+}
+```
+
+Using function you can insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
 
 **webpack.config.js**
 ```js
 {
   loader: 'style-loader',
   options: {
-    insertInto: '#host::shadow>#root'
+    insertInto: () => document.querySelector("#root").shadowRoot,
   }
 }
 ```

diff --git a/index.js b/index.js
@@ -17,7 +17,19 @@ module.exports.pitch = function (request) {
 
 	validateOptions(require('./options.json'), options, 'Style Loader')
 
-	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+        options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+        // need to use this variable, because function should be inlined
+        // if just store it in options, then after JSON.stringify
+        // function will be quoted and then in runtime will be just string
+        var insertInto;
+        if (typeof options.insertInto === "function") {
+            insertInto = options.insertInto.toString();
+        }
+        // we need to check if it string, or variable will be "undefined" and loader crash then
+        if (typeof options.insertInto === "string") {
+            insertInto = '"' + options.insertInto + '"';
+        }
 
 	var hmrCode = [
 		"// Hot Module Replacement",
@@ -52,9 +64,12 @@ module.exports.pitch = function (request) {
 		"if(typeof content === 'string') content = [[module.id, content, '']];",
 		"// Prepare cssTransformation",
 		"var transform;",
-		options.transform ? "transform = require(" + loaderUtils.stringifyRequest(this, "!" + path.resolve(options.transform)) + ");" : "",
-		"var options = " + JSON.stringify(options),
-		"options.transform = transform",
+                "var insertInto;",
+	        options.transform ? "transform = require(" + loaderUtils.stringifyRequest(this, "!" + path.resolve(options.transform)) + ");" : "",
+                "insertInto = " + insertInto + ";" ,
+                "var options = " + JSON.stringify(options),
+	        "options.transform = transform",
+                "options.insertInto = insertInto;",
 		"// add the styles to the DOM",
 		"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, options);",
 		"if(content.locals) module.exports = content.locals;",

diff --git a/lib/addStyles.js b/lib/addStyles.js
@@ -23,12 +23,24 @@ var isOldIE = memoize(function () {
 	return window && document && document.all && !window.atob;
 });
 
+var getTarget = function (target) {
+  return document.querySelector(target);
+};
+
 var getElement = (function (fn) {
 	var memo = {};
 
-	return function(selector) {
-		if (typeof memo[selector] === "undefined") {
-			var styleTarget = fn.call(this, selector);
+	return function(target) {
+                // If passing function in options, then use it for resolve "head" element.
+                // Useful for Shadow Root style i.e
+                // {
+                //   insertInto: function () { return document.querySelector("#foo").shadowRoot }
+                // }
+                if (typeof target === 'function') {
+                        return target();
+                }
+                if (typeof memo[target] === "undefined") {
+			var styleTarget = getTarget.call(this, target);
 			// Special case to return head of iframe instead of iframe itself
 			if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
 				try {
@@ -39,13 +51,11 @@ var getElement = (function (fn) {
 					styleTarget = null;
 				}
 			}
-			memo[selector] = styleTarget;
+			memo[target] = styleTarget;
 		}
-		return memo[selector]
+		return memo[target]
 	};
-})(function (target) {
-	return document.querySelector(target)
-});
+})();
 
 var singleton = null;
 var	singletonCounter = 0;
@@ -67,7 +77,7 @@ module.exports = function(list, options) {
 	if (!options.singleton && typeof options.singleton !== "boolean") options.singleton = isOldIE();
 
 	// By default, add <style> tags to the <head> element
-	if (!options.insertInto) options.insertInto = "head";
+        if (!options.insertInto) options.insertInto = "head";
 
 	// By default, add <style> tags to the bottom of the target
 	if (!options.insertAt) options.insertAt = "bottom";

diff --git a/options.json b/options.json
@@ -14,9 +14,6 @@
     "insertAt": {
       "type": ["string", "object"]
     },
-    "insertInto": {
-      "type": "string"
-    },
     "singleton": {
       "type": "boolean"
     },

diff --git a/test/basicTest.js b/test/basicTest.js
@@ -35,6 +35,13 @@ describe("basic tests", function() {
       "<iframe class='iframeTarget'/>",
       "</body>",
       "</html>"
+    ].join("\n"),
+    requiredJS = [
+      "var el = document.createElement('div');",
+      "el.id = \"test-shadow\";",
+      // "var shadow = el.attachShadow({ mode: 'open' })", // sadly shadow dom not working in jsdom
+      "document.body.appendChild(el)",
+      "var css = require('./style.css');",
     ].join("\n");
 
   var styleLoaderOptions = {};
@@ -66,7 +73,7 @@ describe("basic tests", function() {
 
     // Create a tiny file system. rootDir is used because loaders are referring to absolute paths.
     fs.mkdirpSync(rootDir);
-    fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
+    fs.writeFileSync(rootDir + "main.js", requiredJS);
     fs.writeFileSync(rootDir + "style.css", requiredCss);
     fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
     fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
@@ -140,6 +147,17 @@ describe("basic tests", function() {
     }, selector);
   }); // it insert into
 
+  it("insert into custom element by function", function(done) {
+    const selector = "#test-shadow";
+    styleLoaderOptions.insertInto = () => document.querySelector("#test-shadow");
+
+    let expected = requiredStyle;
+
+    runCompilerTest(expected, done, function() {
+      return this.document.querySelector(selector).innerHTML;
+    }, selector);
+  });
+
   it("singleton (true)", function(done) {
     // Setup
     styleLoaderOptions.singleton = true;

diff --git a/test/insert/into.js b/test/insert/into.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return document.querySelector("#test-shadow");
+};