vitalif-js
/
newer-universal-style-loader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(tag-attribute): Add support for custom tag attribute

master
Felix Mosheev 2017-03-06 23:35:13 +02:00 committed by Joshua Wiens
parent 2a2f261ef9
commit 995f3de4d3
3 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -72,6 +72,16 @@ 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`).
#### `attrs`
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');
// will create style tag <style id="style-tag-id">
```
### 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`).
@ -92,7 +102,7 @@ So the recommended configuration for webpack is:
{
test: /\.useable\.css$/,
use: [
{
{
loader: "style-loader",
options: {
useable: true

18
addStyles.js
View File

@ -26,6 +26,8 @@ module.exports = function(list, options) {
}
options = options || {};
options.attrs = typeof options.attrs === "object" ? options.attrs : {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
@ -128,19 +130,29 @@ function removeStyleElement(styleElement) {
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
options.attrs.type = "text/css";
attachTagAttrs(styleElement, options.attrs);
insertStyleElement(options, styleElement);
return styleElement;
}
function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.type = "text/css";
options.attrs.type = "text/css";
options.attrs.rel = "stylesheet";
attachTagAttrs(linkElement, options.attrs);
insertStyleElement(options, linkElement);
return linkElement;
}
function attachTagAttrs(element, attrs) {
Object.keys(attrs).forEach(function (key) {
element.setAttribute(key, attrs[key]);
});
}
function addStyle(obj, options) {
var styleElement, update, remove;

22
test/basicTest.js
View File

@ -45,7 +45,7 @@ describe("basic tests", function() {
},
module: {
rules: [cssRule]
}
}
};
beforeEach(function() {
@ -102,6 +102,26 @@ describe("basic tests", function() {
runCompilerTest(expected, done);
}); // it singleton
it("attrs", function(done) {
// Setup
styleLoaderOptions.attrs = {id: 'style-tag-id'};
fs.writeFileSync(
rootDir + "main.js",
[
"var a = require('./style.css');"
].join("\n")
);
// Run
let expected = [
existingStyle,
`<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
].join("\n");
runCompilerTest(expected, done);
}); // it attrs
it("url", function(done) {
cssRule.use = [
{