webpack-contrib · Jan 3, 2018 · Jan 26, 2018 · Jan 26, 2018 · Jan 26, 2018 · Jan 26, 2018
diff --git a/.travis.yml b/.travis.yml
@@ -7,27 +7,27 @@ matrix:
   fast_finish: true
   include:
     # - os: linux
-    #   node_js: '7'
+    #   node_js: '8'
     #   env: WEBPACK_VERSION="2.2.0" BITHOUND_CHECK=true JOB_PART=lint
     - os: linux
-      node_js: '7'
+      node_js: '8'
       env: WEBPACK_VERSION="2.2.0" JOB_PART=test
     - os: linux
-      node_js: '4.3'
+      node_js: '4.8'
       env: WEBPACK_VERSION="2.2.0" JOB_PART=test
     - os: linux
       node_js: '6'
       env: WEBPACK_VERSION="2.2.0" JOB_PART=test
     # - os: linux
-    #   node_js: '7'
+    #   node_js: '8'
     #   env: WEBPACK_VERSION="2.2.0" JOB_PART=coverage
 before_install:
   - nvm --version
   - node --version
 before_script:
-  - if [ "$WEBPACK_VERSION" ]; then yarn add webpack@^$WEBPACK_VERSION; fi
+  - if [ "$WEBPACK_VERSION" ]; then npm i webpack@^$WEBPACK_VERSION; fi
   # - if [ "$BITHOUND_CHECK" ]; then npm install -g bithound; bithound check git@github.com:$TRAVIS_REPO_SLUG.git; fi
 script:
-  - yarn run travis:$JOB_PART
+  - npm run travis:$JOB_PART
 after_success:
   - bash <(curl -s https://codecov.io/bash)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.20.0"></a>
+# [0.20.0](https://github.com/webpack-contrib/style-loader/compare/v0.19.1...v0.20.0) (2018-01-26)
+
+
+### Bug Fixes
+
+* **addStyles:** check if `HTMLIFrameElement` exist ([#296](https://github.com/webpack-contrib/style-loader/issues/296)) ([9b46128](https://github.com/webpack-contrib/style-loader/commit/9b46128))
+* **index:** enable HMR in case `locals` (`css-modules`) are unchanged ([#298](https://github.com/webpack-contrib/style-loader/issues/298)) ([3a4cb53](https://github.com/webpack-contrib/style-loader/commit/3a4cb53))
+* **options:** add `transform` option validation (`{String}`) ([23c3567](https://github.com/webpack-contrib/style-loader/commit/23c3567))
+* **options:** support passing a `{Function}` (`options.insertInto`) ([e0c4b19](https://github.com/webpack-contrib/style-loader/commit/e0c4b19))
+
+
+### Features
+
+* support passing a `{Function}` (`options.insertInto`) ([#279](https://github.com/webpack-contrib/style-loader/issues/279)) ([0eb8fe7](https://github.com/webpack-contrib/style-loader/commit/0eb8fe7))
+
+
+
 <a name="0.19.1"></a>
 ## [0.19.1](https://github.com/webpack/style-loader/compare/v0.19.0...v0.19.1) (2017-12-14)
 

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
@@ -2,7 +2,6 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
-
 var path = require("path");
 
 var loaderUtils = require("loader-utils");
@@ -16,39 +15,82 @@ module.exports.pitch = function (request) {
 	var options = loaderUtils.getOptions(this) || {};
 
 	validateOptions(require('./options.json'), options, 'Style Loader')
-
+	
 	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
 
-	var hmrCode = [
-		"// Hot Module Replacement",
+  // The variable is needed, because the function should be inlined.
+	// If is just stored it in options, JSON.stringify will quote
+	// the function and it would be just a string at runtime
+	var insertInto;
+
+  if (typeof options.insertInto === "function") {
+    insertInto = options.insertInto.toString();
+	}
+
+	// We need to check if it a string, or variable will be "undefined" 
+	// and the loader crashes
+  if (typeof options.insertInto === "string") {
+    insertInto = '"' + options.insertInto + '"';
+	}
+
+	var hmr = [
+		// Hot Module Replacement,
 		"if(module.hot) {",
-		"	// When the styles change, update the <style> tags",
-		"	if(!content.locals) {",
-		"		module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
-		"			var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
-		"			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
-		"			update(newContent);",
-		"		});",
-		"	}",
-		"	// When the module is disposed, remove the <style> tags",
+		// When the styles change, update the <style> tags
+		"	module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
+		"		var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+		"",
+		"		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
+		"",
+		"		var locals = (function(a, b) {",
+		"			var key, idx = 0;",
+		"",
+		"			for(key in a) {",
+		"				if(!b || a[key] !== b[key]) return false;",
+		"				idx++;",
+		"			}",
+		"",
+		"			for(key in b) idx--;",
+		"",
+		"			return idx === 0;",
+		"		}(content.locals, newContent.locals));",
+		"",
+		// This error is caught and not shown and causes a full reload
+		"		if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');",
+		"",
+		"		update(newContent);",
+		"	});",
+		"",
+		// When the module is disposed, remove the <style> tags
 		"	module.hot.dispose(function() { update(); });",
 		"}"
 	].join("\n");
 
 	return [
-		"// style-loader: Adds some css to the DOM by adding a <style> tag",
+		// Style Loader
+		// Adds CSS to the DOM by adding a <style> tag
 		"",
-		"// load the styles",
+		// Load styles
 		"var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+		"",
 		"if(typeof content === 'string') content = [[module.id, content, '']];",
-		"// Prepare cssTransformation",
+		"",
+		// Transform styles",
 		"var transform;",
-		options.transform ? "transform = require(" + loaderUtils.stringifyRequest(this, "!" + path.resolve(options.transform)) + ");" : "",
+		"var insertInto;",
+		"",
+	  options.transform ? "transform = require(" + loaderUtils.stringifyRequest(this, "!" + path.resolve(options.transform)) + ");" : "",
+    "",
 		"var options = " + JSON.stringify(options),
-		"options.transform = transform",
-		"// add the styles to the DOM",
+		"",
+	  "options.transform = transform",
+		"options.insertInto = " + insertInto + ";",
+		"",
+		// Add 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;",
-		options.hmr ? hmrCode : ""
+		"",
+		options.hmr ? hmr : ""
 	].join("\n");
 };
diff --git a/lib/addStyles.js b/lib/addStyles.js
@@ -23,14 +23,26 @@ 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 (styleTarget instanceof window.HTMLIFrameElement) {
+			if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
 				try {
 					// This will throw an exception if access to iframe is blocked
 					// due to cross-origin restrictions
@@ -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
@@ -15,6 +15,12 @@
       "type": ["string", "object"]
     },
     "insertInto": {
+      "anyOf": [
+        { "type": "string" },
+        { "instanceof": "Function" }
+      ]
+    },
+    "transform": {
       "type": "string"
     },
     "singleton": {
@@ -27,5 +33,5 @@
       "type": "boolean"
     }
   },
-  "additionalProperties": true
+  "additionalProperties": false
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "style-loader",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "author": "Tobias Koppers @sokra",
   "description": "style loader module for webpack",
   "engines": {
@@ -15,27 +15,26 @@
     "options.json"
   ],
   "dependencies": {
-    "loader-utils": "^1.0.2",
-    "schema-utils": "^0.3.0"
+    "loader-utils": "^1.1.0",
+    "schema-utils": "^0.4.3"
   },
   "devDependencies": {
-    "css-loader": "^0.28.3",
-    "file-loader": "^0.11.1",
-    "jsdom": "^9.12.0",
-    "memory-fs": "^0.4.1",
-    "mocha": "^3.4.2",
-    "sinon": "^2.4.1",
+    "css-loader": "^0.28.0",
+    "file-loader": "^1.0.0",
+    "jsdom": "^9.0.0",
+    "memory-fs": "^0.4.0",
+    "mocha": "^4.0.0",
+    "sinon": "^4.0.0",
     "standard-version": "^4.0.0",
-    "webpack": "^2.6.1"
+    "webpack": "^2.0.0"
   },
   "scripts": {
     "test": "mocha",
-    "travis:test": "yarn run test",
-    "release": "yarn run standard-version"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:webpack/style-loader.git"
+    "travis:test": "npm t",
+    "release": "standard-version"
   },
+  "repository": "https://github.com/webpack-contrib/style-loader.git",
+  "bugs": "https://github.com/webpack-contrib/style-loader/issues",
+  "homepage": "https://github.com/webpack-contrib/style-loader#readme",
   "license": "MIT"
 }
diff --git a/test/basicTest.js → test/basic.test.js b/test/basicTest.js → test/basic.test.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;
@@ -433,24 +451,23 @@ describe("basic tests", function() {
     });
   });
 
-  describe("hmr option", function() {
-
+  describe("HMR", function() {
     it("should output HMR code block by default", function(done) {
-      runSourceTest(/Hot Module Replacement/g, null, done);
+      runSourceTest(/module\.hot/g, null, done);
     });
 
     it("should output HMR code block when options.hmr is true", function(done) {
       styleLoaderOptions.hmr = true;
       setupWebpackConfig();
-      runSourceTest(/Hot Module Replacement/g, null, done);
+      runSourceTest(/module\.hot/g, null, done);
     });
 
     it("should not output HMR code block when options.hmr is false", function(done) {
       styleLoaderOptions.hmr = false;
       setupWebpackConfig();
-      runSourceTest(null, /Hot Module Replacement/g, done);
+      runSourceTest(null, /module\.hot/g, done);
     });
 
   });
 
-}); // describe
+});
diff --git a/test/fixUrlsTest.js → test/fixUrls.test.js b/test/fixUrlsTest.js → test/fixUrls.test.js
diff --git a/test/insert/into.js b/test/insert/into.js
@@ -0,0 +1,3 @@
+module.exports = function() {
+  return document.querySelector("#test-shadow");
+};
diff --git a/test/urlTest.js → test/url.test.js b/test/urlTest.js → test/url.test.js
@@ -21,17 +21,17 @@ describe("url tests", function () {
   });
 
   it("should output HMR code by default", function () {
-    assert.equal(/Hot Module Replacement/g.test(url.pitch()), true);
+    assert.equal(/(module\.hot)/g.test(url.pitch()), true);
   });
 
   it("should NOT output HMR code when options.hmr is false", function () {
     getOptions.returns({hmr: false});
-    assert.equal(/Hot Module Replacement/g.test(url.pitch()), false);
+    assert.equal(/(module\.hot)/g.test(url.pitch()), false);
   });
 
   it("should output HMR code when options.hmr is true", function () {
     getOptions.returns({hmr: true});
-    assert.equal(/Hot Module Replacement/g.test(url.pitch()), true);
+    assert.equal(/(module\.hot)/g.test(url.pitch()), true);
   });
 
 });
diff --git a/test/useableTest.js → test/useable.test.js b/test/useableTest.js → test/useable.test.js
@@ -21,17 +21,17 @@ describe("useable tests", function () {
   });
 
   it("should output HMR code by default", function () {
-    assert.equal(/Hot Module Replacement/g.test(useable.pitch()), true);
+    assert.equal(/(module\.hot)/g.test(useable.pitch()), true);
   });
 
   it("should NOT output HMR code when options.hmr is false", function () {
     getOptions.returns({hmr: false});
-    assert.equal(/Hot Module Replacement/g.test(useable.pitch()), false);
+    assert.equal(/(module\.hot)/g.test(useable.pitch()), false);
   });
 
   it("should output HMR code when options.hmr is true", function () {
     getOptions.returns({hmr: true});
-    assert.equal(/Hot Module Replacement/g.test(useable.pitch()), true);
+    assert.equal(/(module\.hot)/g.test(useable.pitch()), true);
   });
 
 });
diff --git a/test/utils.js b/test/utils.js
@@ -85,25 +85,27 @@ module.exports = {
     });
   },
 
-  /*
-   * Runs the test against Webpack compiled source code.
-   *  @param {regex} regexToMatch - regex to match the source code
-   *  @param {regex} regexToNotMatch - regex to NOT match the source code
-   *  @param {function} done - Async callback from Mocha.
+  /**
+   * Runs the test against Webpack compiled source code
+   * 
+   * @param {RegExp} match - regex to match the source code
+   * @param {RegExp} noMatch - regex to NOT match the source code
+   * @param {Function} done - Async callback (mocha)
    */
-  runSourceTest: function(regexToMatch, regexToNotMatch, done) {
+  runSourceTest: function(match, noMatch, done) {
     compiler.run(function(err, stats) {
       if (stats.compilation.errors.length) {
         throw new Error(stats.compilation.errors);
       }
 
-      const bundleJs = stats.compilation.assets["bundle.js"].source();
-      if (regexToMatch) {
-        assert.equal(regexToMatch.test(bundleJs), true);
+      const source = stats.compilation.assets["bundle.js"].source();
+
+      if (match) {
+        assert.equal(match.test(source), true);
       }
 
-      if (regexToNotMatch) {
-        assert.equal(regexToNotMatch.test(bundleJs), false);
+      if (noMatch) {
+        assert.equal(noMatch.test(source), false);
       }
 
       done();

diff --git a/url.js b/url.js
@@ -18,21 +18,22 @@ module.exports.pitch = function (request) {
 
 	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
 
-	var hmrCode = [
-		"// Hot Module Replacement",
+	var hmr = [
+		// Hot Module Replacement
 		"if(module.hot) {",
-		"\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
-		"\t\tupdate(require(" + loaderUtils.stringifyRequest(this, "!!" + request) + "));",
-		"\t});",
-		"\tmodule.hot.dispose(function() { update(); });",
+		"  module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
+		"    update(require(" + loaderUtils.stringifyRequest(this, "!!" + request) + "));",
+		"  });",
+		"",
+		"  module.hot.dispose(function() { update(); });",
 		"}"
 	].join("\n");
 
 	return [
-		"// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
+		// Adds some reference to a CSS file to the DOM by adding a <link> tag
 		"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyleUrl.js")) + ")(",
-		"\trequire(" + loaderUtils.stringifyRequest(this, "!!" + request) + ")",
+		"  require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ")",
 		", " + JSON.stringify(options) + ");",
-		options.hmr ? hmrCode : ""
+		options.hmr ? hmr : ""
 	].join("\n");
 };
diff --git a/useable.js b/useable.js
@@ -18,21 +18,25 @@ module.exports.pitch = function (request) {
 
 	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
 
-	var hmrCode = [
-		"// Hot Module Replacement",
+	var hmr = [
+		// Hot Module Replacement
 		"if(module.hot) {",
 		"	var lastRefs = module.hot.data && module.hot.data.refs || 0;",
+		"",
 		"	if(lastRefs) {",
 		"		exports.ref();",
 		"		if(!content.locals) {",
 		"			refs = lastRefs;",
 		"		}",
 		"	}",
+		"",
 		"	if(!content.locals) {",
 		"		module.hot.accept();",
 		"	}",
+		"",
 		"	module.hot.dispose(function(data) {",
 		"		data.refs = content.locals ? 0 : refs;",
+		"",
 		"		if(dispose) {",
 		"			dispose();",
 		"		}",
@@ -44,20 +48,25 @@ module.exports.pitch = function (request) {
 		"var refs = 0;",
 		"var dispose;",
 		"var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+		"",
 		"if(typeof content === 'string') content = [[module.id, content, '']];",
+		// Export CSS Modules
 		"if(content.locals) exports.locals = content.locals;",
+		"",
 		"exports.use = exports.ref = function() {",
 		"	if(!(refs++)) {",
 		"		dispose = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, " + JSON.stringify(options) + ");",
 		"	}",
+		"",
 		"	return exports;",
 		"};",
+		"",
 		"exports.unuse = exports.unref = function() {",
-		"       if(refs > 0 && !(--refs)) {",
-		"		dispose();",
-		"		dispose = null;",
-		"	}",
+		"  if(refs > 0 && !(--refs)) {",
+		"	   dispose();",
+		"		 dispose = null;",
+		"  }",
 		"};",
-		options.hmr ? hmrCode : ""
+		options.hmr ? hmr : ""
 	].join("\n");
 };
diff --git a/yarn.lock b/yarn.lock