finalized insertAt=top
parent
8699f48b13
commit
4a13ce9590
|
@ -47,7 +47,7 @@ Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`
|
||||||
|
|
||||||
#### `insertAt`
|
#### `insertAt`
|
||||||
|
|
||||||
By default, the style-loader appends `<style>` elements to the end of the `<head>` tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'bottom', e.g. `require('../style.css?insertAt=bottom')`.
|
By default, the style-loader appends `<style>` elements to the end of the `<head>` tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'top', e.g. `require('../style.css?insertAt=top')`.
|
||||||
|
|
||||||
#### `singleton`
|
#### `singleton`
|
||||||
|
|
||||||
|
|
35
addStyles.js
35
addStyles.js
|
@ -99,16 +99,16 @@ function listToStyles(list) {
|
||||||
return styles;
|
return styles;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createStyleElement(options) {
|
function insertStyleElement(options, styleElement) {
|
||||||
var styleElement = document.createElement("style");
|
|
||||||
var head = getHeadElement();
|
var head = getHeadElement();
|
||||||
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
|
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
|
||||||
styleElement.type = "text/css";
|
|
||||||
if (options.insertAt === "top") {
|
if (options.insertAt === "top") {
|
||||||
if(lastStyleElementInsertedAtTop) {
|
if(!lastStyleElementInsertedAtTop) {
|
||||||
|
head.insertBefore(styleElement, head.firstChild);
|
||||||
|
} else if(lastStyleElementInsertedAtTop.nextSibling) {
|
||||||
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
|
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
|
||||||
} else {
|
} else {
|
||||||
head.insertBefore(styleElement, head.firstChild);
|
head.appendChild(styleElement);
|
||||||
}
|
}
|
||||||
styleElementsInsertedAtTop.push(styleElement);
|
styleElementsInsertedAtTop.push(styleElement);
|
||||||
} else if (options.insertAt === "bottom") {
|
} else if (options.insertAt === "bottom") {
|
||||||
|
@ -116,14 +116,27 @@ function createStyleElement(options) {
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
|
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeStyleElement(styleElement) {
|
||||||
|
styleElement.parentNode.removeChild(styleElement);
|
||||||
|
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
|
||||||
|
if(idx >= 0) {
|
||||||
|
styleElementsInsertedAtTop.splice(idx, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createStyleElement(options) {
|
||||||
|
var styleElement = document.createElement("style");
|
||||||
|
styleElement.type = "text/css";
|
||||||
|
insertStyleElement(options, styleElement);
|
||||||
return styleElement;
|
return styleElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createLinkElement() {
|
function createLinkElement(options) {
|
||||||
var linkElement = document.createElement("link");
|
var linkElement = document.createElement("link");
|
||||||
var head = getHeadElement();
|
|
||||||
linkElement.rel = "stylesheet";
|
linkElement.rel = "stylesheet";
|
||||||
head.appendChild(linkElement);
|
insertStyleElement(options, linkElement);
|
||||||
return linkElement;
|
return linkElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -141,10 +154,10 @@ function addStyle(obj, options) {
|
||||||
typeof URL.revokeObjectURL === "function" &&
|
typeof URL.revokeObjectURL === "function" &&
|
||||||
typeof Blob === "function" &&
|
typeof Blob === "function" &&
|
||||||
typeof btoa === "function") {
|
typeof btoa === "function") {
|
||||||
styleElement = createLinkElement();
|
styleElement = createLinkElement(options);
|
||||||
update = updateLink.bind(null, styleElement);
|
update = updateLink.bind(null, styleElement);
|
||||||
remove = function() {
|
remove = function() {
|
||||||
styleElement.parentNode.removeChild(styleElement);
|
removeStyleElement(styleElement);
|
||||||
if(styleElement.href)
|
if(styleElement.href)
|
||||||
URL.revokeObjectURL(styleElement.href);
|
URL.revokeObjectURL(styleElement.href);
|
||||||
};
|
};
|
||||||
|
@ -152,7 +165,7 @@ function addStyle(obj, options) {
|
||||||
styleElement = createStyleElement(options);
|
styleElement = createStyleElement(options);
|
||||||
update = applyToTag.bind(null, styleElement);
|
update = applyToTag.bind(null, styleElement);
|
||||||
remove = function() {
|
remove = function() {
|
||||||
styleElement.parentNode.removeChild(styleElement);
|
removeStyleElement(styleElement);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
border: 3px solid blue;
|
||||||
|
}
|
|
@ -1,2 +1,3 @@
|
||||||
require("./b.css");
|
require("./b.css");
|
||||||
require("./a.css");
|
require("./a.css");
|
||||||
|
require("./c.css");
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [
|
||||||
{ test: /\.css$/, loader: "style!css?sourceMap" }
|
{ test: /\.css$/, loader: "style?insertAt=top!css?sourceMap" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue