feat: Set custom attributes for tag in url mode (#198)
* Add ability to set custom attributes for tag in url modemaster
parent
1f68495a17
commit
2c4f4278b0
|
@ -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.
|
If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
|
||||||
Usage:
|
Usage:
|
||||||
```javascript
|
```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">
|
// 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
|
### Recommended configuration
|
||||||
|
|
||||||
|
|
|
@ -2,14 +2,28 @@
|
||||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||||
Author Tobias Koppers @sokra
|
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 DEBUG !== "undefined" && DEBUG) {
|
||||||
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
|
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");
|
var styleElement = document.createElement("link");
|
||||||
styleElement.rel = "stylesheet";
|
styleElement.rel = "stylesheet";
|
||||||
styleElement.type = "text/css";
|
styleElement.type = "text/css";
|
||||||
styleElement.href = cssUrl;
|
styleElement.href = cssUrl;
|
||||||
|
|
||||||
|
attachTagAttrs(styleElement, options.attrs);
|
||||||
|
|
||||||
var head = document.getElementsByTagName("head")[0];
|
var head = document.getElementsByTagName("head")[0];
|
||||||
head.appendChild(styleElement);
|
head.appendChild(styleElement);
|
||||||
if(module.hot) {
|
if(module.hot) {
|
||||||
|
|
|
@ -155,6 +155,29 @@ describe("basic tests", function() {
|
||||||
runCompilerTest(expected, done);
|
runCompilerTest(expected, done);
|
||||||
}); // it url
|
}); // 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) {
|
it("useable", function(done) {
|
||||||
cssRule.use = [
|
cssRule.use = [
|
||||||
{
|
{
|
||||||
|
|
3
url.js
3
url.js
|
@ -7,11 +7,12 @@ var loaderUtils = require("loader-utils"),
|
||||||
module.exports = function() {};
|
module.exports = function() {};
|
||||||
module.exports.pitch = function(remainingRequest) {
|
module.exports.pitch = function(remainingRequest) {
|
||||||
this.cacheable && this.cacheable();
|
this.cacheable && this.cacheable();
|
||||||
|
var query = loaderUtils.getOptions(this) || {};
|
||||||
return [
|
return [
|
||||||
"// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
|
"// 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")) + ")(",
|
"var update = require(" + JSON.stringify("!" + path.join(__dirname, "addStyleUrl.js")) + ")(",
|
||||||
"\trequire(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ")",
|
"\trequire(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ")",
|
||||||
");",
|
", " + JSON.stringify(query) + ");",
|
||||||
"// Hot Module Replacement",
|
"// Hot Module Replacement",
|
||||||
"if(module.hot) {",
|
"if(module.hot) {",
|
||||||
"\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ", function() {",
|
"\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ", function() {",
|
||||||
|
|
Loading…
Reference in New Issue