Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
style-loader
Advanced tools
style-loader - npm Package Compare versions
Comparing version 0.18.2 to 0.19.0
@@ -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) |
32
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"); | ||
| }; |
@@ -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 @@ } |
@@ -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") { | ||
| } | ||
| } | ||
| } |
@@ -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": { |
| { | ||
| "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" |
@@ -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 @@ } |
16
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"); | ||
| }; |
@@ -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"); | ||
| }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.26%
37749
- Lines of code
- increased by6.1%
557
- Number of lines in readme file
- increased by7.42%
449
Worsened metrics
- Dev dependency count
- increased by14.29%
8
No dependency changes