be4a7636f1
For the useable API, we always need to get a function back so that `unuse()` works correctly. Moved variable definitions to the top for cleanliness and better uglification. All modern browsers support `document.head`. Use it and fallback to querying. |
||
|---|---|---|
| README.md | ||
| addStyle.js | ||
| addStyleUrl.js | ||
| index.js | ||
| package.json | ||
| url.js | ||
| useable.js | ||
README.md
style loader for webpack
Usage
Simple API
require("style!raw!./file.css");
// => add rules in file.css to document
It's recommended to combine it with the css-loader: require("style!css!./file.css").
It also possible to add a URL instead of a css string:
require("style/url!file!./file.css");
// => add a <link rel="stlyesheet"> to file.css to document
Reference-counted API
var style = require("style/useable!css!./file.css");
style.use(); // = style.ref();
style.unuse(); // = style.unref();
Styles are not added on require, but instead on call to use/ref. Styles are removed from page if unuse/unref is called exactly as often as use/ref.
Note: Behavior is undefined when unuse/unref is called more often than use/ref. Don't do that.
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).
So the recommended configuration for webpack is:
{
module: {
loaders: [
{ test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
{ test: /\.useable\.css$/, loader: "style/useable!css" }
]
}
}