Skip to content

Commit

Permalink
refactor: code (#541)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-akait authored Sep 21, 2021
1 parent b9a600c commit 43bede4
Show file tree
Hide file tree
Showing 10 changed files with 63 additions and 56 deletions.
14 changes: 7 additions & 7 deletions src/runtime/injectStylesIntoLinkTag.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@ module.exports = (url, options) => {
}
}

const link = document.createElement("link");
const linkElement = document.createElement("link");

link.rel = "stylesheet";
link.href = url;
linkElement.rel = "stylesheet";
linkElement.href = url;

Object.keys(options.attributes).forEach((key) => {
link.setAttribute(key, options.attributes[key]);
linkElement.setAttribute(key, options.attributes[key]);
});

options.insert(link);
options.insert(linkElement);

return (newUrl) => {
if (typeof newUrl === "string") {
link.href = newUrl;
linkElement.href = newUrl;
} else {
link.parentNode.removeChild(link);
linkElement.parentNode.removeChild(linkElement);
}
};
};
36 changes: 21 additions & 15 deletions src/runtime/injectStylesIntoStyleTag.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
const stylesInDom = [];
const stylesInDOM = [];

function getIndexByIdentifier(identifier) {
let result = -1;

for (let i = 0; i < stylesInDom.length; i++) {
if (stylesInDom[i].identifier === identifier) {
for (let i = 0; i < stylesInDOM.length; i++) {
if (stylesInDOM[i].identifier === identifier) {
result = i;
break;
}
Expand All @@ -25,7 +25,7 @@ function modulesToDom(list, options) {

idCountMap[id] = count + 1;

const index = getIndexByIdentifier(identifier);
const indexByIdentifier = getIndexByIdentifier(identifier);
const obj = {
css: item[1],
media: item[2],
Expand All @@ -34,13 +34,17 @@ function modulesToDom(list, options) {
layer: item[5],
};

if (index !== -1) {
stylesInDom[index].references++;
stylesInDom[index].updater(obj);
if (indexByIdentifier !== -1) {
stylesInDOM[indexByIdentifier].references++;
stylesInDOM[indexByIdentifier].updater(obj);
} else {
stylesInDom.push({
const updater = addElementStyle(obj, options);

options.byIndex = i;

stylesInDOM.splice(i, 0, {
identifier,
updater: addStyle(obj, options),
updater,
references: 1,
});
}
Expand All @@ -51,12 +55,12 @@ function modulesToDom(list, options) {
return identifiers;
}

function addStyle(obj, options) {
function addElementStyle(obj, options) {
const api = options.domAPI(options);

api.update(obj);

return function updateStyle(newObj) {
const updater = (newObj) => {
if (newObj) {
if (
newObj.css === obj.css &&
Expand All @@ -73,6 +77,8 @@ function addStyle(obj, options) {
api.remove();
}
};

return updater;
}

module.exports = (list, options) => {
Expand All @@ -89,7 +95,7 @@ module.exports = (list, options) => {
const identifier = lastIdentifiers[i];
const index = getIndexByIdentifier(identifier);

stylesInDom[index].references--;
stylesInDOM[index].references--;
}

const newLastIdentifiers = modulesToDom(newList, options);
Expand All @@ -98,9 +104,9 @@ module.exports = (list, options) => {
const identifier = lastIdentifiers[i];
const index = getIndexByIdentifier(identifier);

if (stylesInDom[index].references === 0) {
stylesInDom[index].updater();
stylesInDom.splice(index, 1);
if (stylesInDOM[index].references === 0) {
stylesInDOM[index].updater();
stylesInDOM.splice(index, 1);
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/runtime/insertStyleElement.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/* istanbul ignore next */
function insertStyleElement(options) {
const style = document.createElement("style");
const element = document.createElement("style");

options.setAttributes(style, options.attributes);
options.insert(style, options.options);
options.setAttributes(element, options.attributes);
options.insert(element, options.options);

return style;
return element;
}

module.exports = insertStyleElement;
4 changes: 2 additions & 2 deletions src/runtime/setAttributesWithAttributes.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* istanbul ignore next */
function setAttributesWithoutAttributes(style, attributes) {
function setAttributesWithoutAttributes(styleElement, attributes) {
const nonce =
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;

Expand All @@ -8,7 +8,7 @@ function setAttributesWithoutAttributes(style, attributes) {
}

Object.keys(attributes).forEach((key) => {
style.setAttribute(key, attributes[key]);
styleElement.setAttribute(key, attributes[key]);
});
}

Expand Down
4 changes: 2 additions & 2 deletions src/runtime/setAttributesWithAttributesAndNonce.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* istanbul ignore next */
function setAttributesWithoutAttributes(style, attributes) {
function setAttributesWithoutAttributes(styleElement, attributes) {
Object.keys(attributes).forEach((key) => {
style.setAttribute(key, attributes[key]);
styleElement.setAttribute(key, attributes[key]);
});
}

Expand Down
4 changes: 2 additions & 2 deletions src/runtime/setAttributesWithoutAttributes.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/* istanbul ignore next */
function setAttributesWithoutAttributes(style) {
function setAttributesWithoutAttributes(styleElement) {
const nonce =
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;

if (nonce) {
style.setAttribute("nonce", nonce);
styleElement.setAttribute("nonce", nonce);
}
}

Expand Down
20 changes: 10 additions & 10 deletions src/runtime/singletonStyleDomAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const replaceText = (function replaceText() {
})();

/* istanbul ignore next */
function apply(style, index, remove, obj) {
function apply(styleElement, index, remove, obj) {
let css;

if (remove) {
Expand Down Expand Up @@ -49,20 +49,20 @@ function apply(style, index, remove, obj) {

// For old IE
/* istanbul ignore if */
if (style.styleSheet) {
style.styleSheet.cssText = replaceText(index, css);
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
const cssNode = document.createTextNode(css);
const childNodes = style.childNodes;
const childNodes = styleElement.childNodes;

if (childNodes[index]) {
style.removeChild(childNodes[index]);
styleElement.removeChild(childNodes[index]);
}

if (childNodes.length) {
style.insertBefore(cssNode, childNodes[index]);
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
style.appendChild(cssNode);
styleElement.appendChild(cssNode);
}
}
}
Expand All @@ -76,18 +76,18 @@ const singletonData = {
function domAPI(options) {
// eslint-disable-next-line no-undef,no-use-before-define
const styleIndex = singletonData.singletonCounter++;
const style =
const styleElement =
// eslint-disable-next-line no-undef,no-use-before-define
singletonData.singleton ||
// eslint-disable-next-line no-undef,no-use-before-define
(singletonData.singleton = options.insertStyleElement(options));

return {
update: (obj) => {
apply(style, styleIndex, false, obj);
apply(styleElement, styleIndex, false, obj);
},
remove: (obj) => {
apply(style, styleIndex, true, obj);
apply(styleElement, styleIndex, true, obj);
},
};
}
Expand Down
16 changes: 8 additions & 8 deletions src/runtime/styleDomAPI.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* istanbul ignore next */
function apply(style, options, obj) {
function apply(styleElement, options, obj) {
let css = "";

if (obj.supports) {
Expand Down Expand Up @@ -40,28 +40,28 @@ function apply(style, options, obj) {

// For old IE
/* istanbul ignore if */
options.styleTagTransform(css, style, options.options);
options.styleTagTransform(css, styleElement, options.options);
}

function removeStyleElement(style) {
function removeStyleElement(styleElement) {
// istanbul ignore if
if (style.parentNode === null) {
if (styleElement.parentNode === null) {
return false;
}

style.parentNode.removeChild(style);
styleElement.parentNode.removeChild(styleElement);
}

/* istanbul ignore next */
function domAPI(options) {
const style = options.insertStyleElement(options);
const styleElement = options.insertStyleElement(options);

return {
update: (obj) => {
apply(style, options, obj);
apply(styleElement, options, obj);
},
remove: () => {
removeStyleElement(style);
removeStyleElement(styleElement);
},
};
}
Expand Down
12 changes: 6 additions & 6 deletions src/runtime/styleTagTransform.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* istanbul ignore next */
function styleTagTransform(css, style) {
if (style.styleSheet) {
style.styleSheet.cssText = css;
function styleTagTransform(css, styleElement) {
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while (style.firstChild) {
style.removeChild(style.firstChild);
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}

style.appendChild(document.createTextNode(css));
styleElement.appendChild(document.createTextNode(css));
}
}

Expand Down
1 change: 1 addition & 0 deletions test/manual/src/middle.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("./bottom.css") supports(display: grid) screen and
(max-width: 2400px);

Expand Down

0 comments on commit 43bede4

Please sign in to comment.