Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: modifying source map support to also support relative urls in stylesheets #165

Closed
wants to merge 12 commits into from
Closed

refactor: modifying source map support to also support relative urls in stylesheets #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5a1a0f8
Merge pull request #160 from blainekasten/UpdateReadme
TheLarkInn Jan 11, 2017
700dd55
chore(readme): Update to webpack standard format
joshwiens Jan 11, 2017
b05a7c6
Fixing broken relative and protocol-relative url() use in stylesheets…
Jan 16, 2017
cb3c0b6
Merge pull request #162 from d3viant0ne/d3viant0ne-UpdateDocsForFinal
joshwiens Jan 20, 2017
79b2846
Remove license link
simon04 Feb 4, 2017
d99f992
Merge pull request #169 from simon04/master
bebraw Feb 5, 2017
fc9ef25
Fixed link to local scope
Feb 18, 2017
8ab1c5f
Merge pull request #172 from joeshub/patch-1
bebraw Feb 20, 2017
da2bc5a
fix deprecated warning
ryantd Feb 24, 2017
13aa381
Merge pull request #174 from ryani33/fix-deprecated-warning
bebraw Feb 24, 2017
11c54f2
chore(release): style-loader v0.13.2
joshwiens Feb 24, 2017
54e91b5
Merge branch 'master' into master
john-bai Feb 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 56 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
# style loader for webpack
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![chat][chat]][chat-url]

<div align="center">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>Style Loader</h1>
</div>

Adds CSS to the DOM by injecting a `<style>` tag

## Install
<h2 align="center">Install</h2>

```
npm install style-loader --save-dev
```

## Usage
<h2 align="center">Usage</h2>

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)

Expand All @@ -32,7 +43,7 @@ require("style-loader/url!file-loader!./file.css");

(experimental)

When using [local scope CSS](https://github.com/webpack/css-loader#local-scope) the module exports the generated identifiers:
When using [local scope CSS](https://github.com/webpack/css-loader#css-scope) the module exports the generated identifiers:

``` javascript
var style = require("style-loader!css-loader!./file.css");
Expand Down Expand Up @@ -61,7 +72,7 @@ By default, the style-loader appends `<style>` elements to the end of the `<head

If defined, the style-loader will re-use a single `<style>` element, instead of adding/removing individual elements for each required module. **Note:** this option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (`?singleton` or `?-singleton`).

## Recommended configuration
### Recommended configuration

By convention the reference-counted API should be bound to `.useable.css` and the simple API to `.css` (similar to other file types, i.e. `.useable.less` and `.less`).

Expand Down Expand Up @@ -95,8 +106,45 @@ So the recommended configuration for webpack is:
}
```

**Note** about source maps support and assets referenced with `url`: when style loader is used with ?sourceMap option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated.

## License
<h2 align="center">Contributing</h2>

MIT (http://www.opensource.org/licenses/mit-license.php)
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.

<h2 align="center">Maintainers</h2>

<table>
<tbody>
<tr>
<td align="center">
<img width="150 height="150"
src="https://avatars.githubusercontent.com/sokra?v=3">
<br />
<a href="https://github.com/">Tobias Koppers</a>
</td>
<td align="center">
<img width="150 height="150"
src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
<br />
<a href="https://github.com/">Kees Kluskens</a>
</td>
<tr>
<tbody>
</table>


<h2 align="center">LICENSE</h2>

MIT

[npm]: https://img.shields.io/npm/v/style-loader.svg
[npm-url]: https://npmjs.com/package/style-loader

[node]: https://img.shields.io/node/v/style-loader.svg
[node-url]: https://nodejs.org

[deps]: https://david-dm.org/webpack/style-loader.svg
[deps-url]: https://david-dm.org/webpack/file-loader

[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
44 changes: 5 additions & 39 deletions addStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,6 @@ function createStyleElement(options) {
return styleElement;
}

function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
insertStyleElement(options, linkElement);
return linkElement;
}

function addStyle(obj, options) {
var styleElement, update, remove;

Expand All @@ -148,19 +141,6 @@ function addStyle(obj, options) {
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement(options);
update = updateLink.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
Expand Down Expand Up @@ -211,6 +191,11 @@ function applyToSingletonTag(styleElement, index, remove, obj) {
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;

if(sourceMap) {
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}

if(media) {
styleElement.setAttribute("media", media)
Expand All @@ -225,22 +210,3 @@ function applyToTag(styleElement, obj) {
styleElement.appendChild(document.createTextNode(css));
}
}

function updateLink(linkElement, obj) {
var css = obj.css;
var sourceMap = obj.sourceMap;

if(sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}

var blob = new Blob([css], { type: "text/css" });

var oldSrc = linkElement.href;

linkElement.href = URL.createObjectURL(blob);

if(oldSrc)
URL.revokeObjectURL(oldSrc);
}
2 changes: 1 addition & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ var loaderUtils = require("loader-utils"),
module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
if(this.cacheable) this.cacheable();
var query = loaderUtils.parseQuery(this.query);
var query = loaderUtils.getOptions(this) || {};
return [
"// style-loader: Adds some css to the DOM by adding a <style> tag",
"",
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "style-loader",
"version": "0.13.1",
"version": "0.13.2",
"author": "Tobias Koppers @sokra",
"description": "style loader module for webpack",
"devDependencies": {
Expand All @@ -12,6 +12,6 @@
},
"license": "MIT",
"dependencies": {
"loader-utils": "^0.2.7"
"loader-utils": "^1.0.2"
}
}
2 changes: 1 addition & 1 deletion useable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ var loaderUtils = require("loader-utils"),
module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
if(this.cacheable) this.cacheable();
var query = loaderUtils.parseQuery(this.query);
var query = loaderUtils.getOptions(this) || {};
return [
"var refs = 0;",
"var dispose;",
Expand Down