refactor: code (#541)

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);
     }
   };
 };

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);
       }
     }
 

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;

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]);
   });
 }
 

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]);
   });
 }
 

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);
   }
 }
 

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,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);
     },
   };
 }

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);
     },
   };
 }

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));
   }
 }
 

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);