style-loader - npm Package Compare versions

Comparing version 0.18.2 to 0.19.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Change Log
 
+<a name="0.19.0"></a>
+# [0.19.0](https://github.com/webpack/style-loader/compare/v0.18.2...v0.19.0) (2017-10-03)
+
+
+### Features
+
+* add option to enable/disable HMR (`options.hmr`) ([#264](https://github.com/webpack/style-loader/issues/264)) ([378e906](https://github.com/webpack/style-loader/commit/378e906))
+* add support for iframes (`options.insertInto`) ([#248](https://github.com/webpack/style-loader/issues/248)) ([25e8e89](https://github.com/webpack/style-loader/commit/25e8e89))
+* support 'before' insertions (`options.insertAt`) ([#253](https://github.com/webpack/style-loader/issues/253)) ([67120f8](https://github.com/webpack/style-loader/commit/67120f8))
+
+
+
 <a name="0.18.2"></a>
@@ -7,0 +19,0 @@ ## [0.18.2](https://github.com/webpack/style-loader/compare/v0.18.1...v0.18.2) (2017-06-05)

index.js

@@ -20,2 +20,20 @@ /*
 
+	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+	var hmrCode = [
+		"// 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",
+		"	module.hot.dispose(function() { update(); });",
+		"}"
+	].join("\n");
+
 	return [
@@ -35,16 +53,4 @@ "// style-loader: Adds some css to the DOM by adding a <style> tag",
 		"if(content.locals) module.exports = content.locals;",
-		"// 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",
-		"	module.hot.dispose(function() { update(); });",
-		"}"
+		options.hmr ? hmrCode : ""
 	].join("\n");
 };

lib/addStyles.js

@@ -31,5 +31,15 @@ /*
 		if (typeof memo[selector] === "undefined") {
-			memo[selector] = fn.call(this, selector);
+			var styleTarget = fn.call(this, selector);
+			// Special case to return head of iframe instead of iframe itself
+			if (styleTarget instanceof window.HTMLIFrameElement) {
+				try {
+					// This will throw an exception if access to iframe is blocked
+					// due to cross-origin restrictions
+					styleTarget = styleTarget.contentDocument.head;
+				} catch(e) {
+					styleTarget = null;
+				}
+			}
+			memo[selector] = styleTarget;
 		}
-
 		return memo[selector]
@@ -164,4 +174,7 @@ };
 		target.appendChild(style);
+	} else if (typeof options.insertAt === "object" && options.insertAt.before) {
+		var nextSibling = getElement(options.insertInto + " " + options.insertAt.before);
+		target.insertBefore(style, nextSibling);
 	} else {
-		throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
+		throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
 	}
@@ -168,0 +181,0 @@ }

lib/addStyleUrl.js

@@ -21,2 +21,4 @@ /*
 
+	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
 	var link = document.createElement("link");
@@ -34,3 +36,3 @@
 
-	if (module.hot) {
+	if (options.hmr && module.hot) {
 		return function(url) {
@@ -44,2 +46,2 @@ if(typeof url === "string") {
 	}
-}
+}

options.json

@@ -5,2 +5,5 @@
   "properties": {
+    "hmr": {
+      "type": "boolean"
+    },
     "base": {
@@ -13,3 +16,3 @@ "type": "number"
     "insertAt": {
-      "type": "string"
+      "type": ["string", "object"]
     },
@@ -16,0 +19,0 @@ "insertInto": {

package.json

 {
   "name": "style-loader",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "author": "Tobias Koppers @sokra",
@@ -27,2 +27,3 @@ "description": "style loader module for webpack",
     "mocha": "^3.4.2",
+    "sinon": "^2.4.1",
     "standard-version": "^4.0.0",
@@ -29,0 +30,0 @@ "webpack": "^2.6.1"

README.md

@@ -17,3 +17,3 @@ [![npm][npm]][npm-url]
 
-```
+```bash
 npm install style-loader --save-dev
@@ -61,3 +61,3 @@ ```
 
-It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of a inlining the CSS `{String}` with `<style></style>` tag.
+It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of inlining the CSS `{String}` with `<style></style>` tag.
 
@@ -139,10 +139,26 @@ ```js
 |:--:|:--:|:-----:|:----------|
+|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
 |**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
 |**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
-|**`insertAt`**|`{String}`|`bottom`|Inserts `<style></style>` at the given position|
+|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
 |**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
-|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Coverts relative URLs to absolute urls, when source maps are enabled|
+|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
 
+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and production.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    hmr: false
+  }
+}
+```
+
 ### `base`
@@ -291,4 +307,19 @@
 
+A new `<style>` element can be inserted before a specific element by passing an object, e.g.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    insertAt: {
+        before: '#id'
+    }
+  }
+}
+```
+
 ### `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, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g
+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
 
@@ -300,3 +331,3 @@ **webpack.config.js**
   options: {
-    insertAt: '#host::shadow>#root'
+    insertInto: '#host::shadow>#root'
   }
@@ -303,0 +334,0 @@ }

url.js

@@ -19,7 +19,5 @@ /*
 
-	return [
-		"// style-loader: 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) + ")",
-		", " + JSON.stringify(options) + ");",
+	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+	var hmrCode = [
 		"// Hot Module Replacement",
@@ -33,2 +31,10 @@ "if(module.hot) {",
 	].join("\n");
+
+	return [
+		"// style-loader: 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) + ")",
+		", " + JSON.stringify(options) + ");",
+		options.hmr ? hmrCode : ""
+	].join("\n");
 };

useable.js

@@ -19,20 +19,6 @@ /*
 
-	return [
-		"var refs = 0;",
-		"var dispose;",
-		"var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
-		"if(typeof content === 'string') content = [[module.id, content, '']];",
-		"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;",
-		"	}",
-		"};",
+	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+	var hmrCode = [
+		"// Hot Module Replacement",
 		"if(module.hot) {",
@@ -57,2 +43,23 @@ "	var lastRefs = module.hot.data && module.hot.data.refs || 0;",
 	].join("\n");
+
+	return [
+		"var refs = 0;",
+		"var dispose;",
+		"var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+		"if(typeof content === 'string') content = [[module.id, content, '']];",
+		"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;",
+		"	}",
+		"};",
+		options.hmr ? hmrCode : ""
+	].join("\n");
 };

No alert changes

Improved metrics

Total package byte prevSize

37749

increased by8.26%

Lines of code

557

increased by6.1%

Number of lines in readme file

449

increased by7.42%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes