From 43bede4415c5ccb4680d558725e0066f715aa175 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Tue, 21 Sep 2021 20:19:48 +0300 Subject: [PATCH] refactor: code (#541) --- src/runtime/injectStylesIntoLinkTag.js | 14 ++++---- src/runtime/injectStylesIntoStyleTag.js | 36 +++++++++++-------- src/runtime/insertStyleElement.js | 8 ++--- src/runtime/setAttributesWithAttributes.js | 4 +-- .../setAttributesWithAttributesAndNonce.js | 4 +-- src/runtime/setAttributesWithoutAttributes.js | 4 +-- src/runtime/singletonStyleDomAPI.js | 20 +++++------ src/runtime/styleDomAPI.js | 16 ++++----- src/runtime/styleTagTransform.js | 12 +++---- test/manual/src/middle.css | 1 + 10 files changed, 63 insertions(+), 56 deletions(-) diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js index a7676168..975bba33 100644 --- a/src/runtime/injectStylesIntoLinkTag.js +++ b/src/runtime/injectStylesIntoLinkTag.js @@ -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); } }; }; diff --git a/src/runtime/injectStylesIntoStyleTag.js b/src/runtime/injectStylesIntoStyleTag.js index 4addaf95..15648e5b 100644 --- a/src/runtime/injectStylesIntoStyleTag.js +++ b/src/runtime/injectStylesIntoStyleTag.js @@ -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; } @@ -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], @@ -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, }); } @@ -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 && @@ -73,6 +77,8 @@ function addStyle(obj, options) { api.remove(); } }; + + return updater; } module.exports = (list, options) => { @@ -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); @@ -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); } } diff --git a/src/runtime/insertStyleElement.js b/src/runtime/insertStyleElement.js index abd68176..d1c0037f 100644 --- a/src/runtime/insertStyleElement.js +++ b/src/runtime/insertStyleElement.js @@ -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; diff --git a/src/runtime/setAttributesWithAttributes.js b/src/runtime/setAttributesWithAttributes.js index 0aeb153b..44290da6 100644 --- a/src/runtime/setAttributesWithAttributes.js +++ b/src/runtime/setAttributesWithAttributes.js @@ -1,5 +1,5 @@ /* istanbul ignore next */ -function setAttributesWithoutAttributes(style, attributes) { +function setAttributesWithoutAttributes(styleElement, attributes) { const nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null; @@ -8,7 +8,7 @@ function setAttributesWithoutAttributes(style, attributes) { } Object.keys(attributes).forEach((key) => { - style.setAttribute(key, attributes[key]); + styleElement.setAttribute(key, attributes[key]); }); } diff --git a/src/runtime/setAttributesWithAttributesAndNonce.js b/src/runtime/setAttributesWithAttributesAndNonce.js index 63e90e3a..2a760cdd 100644 --- a/src/runtime/setAttributesWithAttributesAndNonce.js +++ b/src/runtime/setAttributesWithAttributesAndNonce.js @@ -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]); }); } diff --git a/src/runtime/setAttributesWithoutAttributes.js b/src/runtime/setAttributesWithoutAttributes.js index 7a829fb0..edda5bbf 100644 --- a/src/runtime/setAttributesWithoutAttributes.js +++ b/src/runtime/setAttributesWithoutAttributes.js @@ -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); } } diff --git a/src/runtime/singletonStyleDomAPI.js b/src/runtime/singletonStyleDomAPI.js index e7360b28..54058a28 100644 --- a/src/runtime/singletonStyleDomAPI.js +++ b/src/runtime/singletonStyleDomAPI.js @@ -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) { @@ -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); } } } @@ -76,7 +76,7 @@ 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 @@ -84,10 +84,10 @@ function domAPI(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); }, }; } diff --git a/src/runtime/styleDomAPI.js b/src/runtime/styleDomAPI.js index 8f0ee4e9..3cbf7609 100644 --- a/src/runtime/styleDomAPI.js +++ b/src/runtime/styleDomAPI.js @@ -1,5 +1,5 @@ /* istanbul ignore next */ -function apply(style, options, obj) { +function apply(styleElement, options, obj) { let css = ""; if (obj.supports) { @@ -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); }, }; } diff --git a/src/runtime/styleTagTransform.js b/src/runtime/styleTagTransform.js index 8098d895..5293132e 100644 --- a/src/runtime/styleTagTransform.js +++ b/src/runtime/styleTagTransform.js @@ -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)); } } diff --git a/test/manual/src/middle.css b/test/manual/src/middle.css index 106d8aee..0987760d 100644 --- a/test/manual/src/middle.css +++ b/test/manual/src/middle.css @@ -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);