feat: Set custom attributes for tag in url mode (#198)

* Add ability to set custom attributes for tag in url mode
master
Konstantin Kai 2017-03-22 15:43:24 +02:00 committed by Joshua Wiens
parent 1f68495a17
commit 2c4f4278b0
4 changed files with 47 additions and 3 deletions

View File

@ -84,10 +84,16 @@ If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be
If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
Usage:
```javascript
require('style-loader?{attrs:{id: "style-tag-id"}}!style.scss');
require('style-loader?{attrs:{id: "style-tag-id"}}!style.css');
// will create style tag <style id="style-tag-id">
```
Usage in `url` mode:
```javascript
require('style-loader/url?{attrs:{prop: "value"}}!file-loader!style.css')
// will create link tag <link rel="stylesheet" type="text/css" href="[path]/style.css" prop="value">
```
### Recommended configuration

View File

@ -2,14 +2,28 @@
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = function addStyleUrl(cssUrl) {
function attachTagAttrs(element, attrs) {
Object.keys(attrs).forEach(function (key) {
element.setAttribute(key, attrs[key]);
});
}
module.exports = function addStyleUrl(cssUrl, options) {
if(typeof DEBUG !== "undefined" && DEBUG) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
options.attrs = typeof options.attrs === "object" ? options.attrs : {};
var styleElement = document.createElement("link");
styleElement.rel = "stylesheet";
styleElement.type = "text/css";
styleElement.href = cssUrl;
attachTagAttrs(styleElement, options.attrs);
var head = document.getElementsByTagName("head")[0];
head.appendChild(styleElement);
if(module.hot) {

View File

@ -155,6 +155,29 @@ describe("basic tests", function() {
runCompilerTest(expected, done);
}); // it url
it("url with attrs", function (done) {
cssRule.use = [
{
loader: "style-loader/url",
options: {
attrs: {
'data-attr-1': 'attr-value-1',
'data-attr-2': 'attr-value-2'
}
}
},
"file-loader"
];
// Run
let expected = [
existingStyle,
'<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css" data-attr-1="attr-value-1" data-attr-2="attr-value-2">'
].join("\n");
runCompilerTest(expected, done);
}); // it url with attrs
it("useable", function(done) {
cssRule.use = [
{

3
url.js
View File

@ -7,11 +7,12 @@ var loaderUtils = require("loader-utils"),
module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
this.cacheable && this.cacheable();
var query = loaderUtils.getOptions(this) || {};
return [
"// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
"var update = require(" + JSON.stringify("!" + path.join(__dirname, "addStyleUrl.js")) + ")(",
"\trequire(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ")",
");",
", " + JSON.stringify(query) + ");",
"// Hot Module Replacement",
"if(module.hot) {",
"\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ", function() {",