Refactor: setAttributes function moved in module

src/index.js

@@ -13,6 +13,7 @@ import {
   getStyleTagTransformFn,
   getExportStyleCode,
   getExportLazyStyleCode,
+  getSetAttributesCode,
 } from "./utils";
 
 import schema from "./options.json";
@@ -37,39 +38,6 @@ loaderAPI.pitch = function loader(request) {
     base: options.base,
   };
 
-  let setAttributesFn;
-
-  if (typeof options.attributes !== "undefined") {
-    setAttributesFn =
-      typeof options.attributes.nonce === "undefined"
-        ? `function(style, attributes) {
-        var nonce =
-          typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
-
-        if (nonce) {
-          attributes.nonce = nonce;
-        }
-
-        Object.keys(attributes).forEach((key) => {
-          style.setAttribute(key, attributes[key]);
-        });
-      }`
-        : `function(style, attributes) {
-        Object.keys(attributes).forEach((key) => {
-          style.setAttribute(key, attributes[key]);
-        });
-      }`;
-  } else {
-    setAttributesFn = `function(style) {
-        var nonce =
-          typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
-
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
-        }
-      }`;
-  }
-
   const insertFn = insertIsFunction
     ? options.insert.toString()
     : `function(style){
@@ -139,6 +107,7 @@ ${esModule ? "export default {}" : ""}`;
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
       ${getImportGetTargetCode(esModule, this, insertIsFunction)}
+      ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
       ${isAuto ? getImportIsOldIECode(esModule, this) : ""}
@@ -158,7 +127,7 @@ var update;
 var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
-options.setAttributes = ${setAttributesFn};
+options.setAttributes = setAttributes;
 options.insert = ${insertFn};
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
@@ -197,6 +166,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
       ${getImportGetTargetCode(esModule, this, insertIsFunction)}
+      ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
       ${getImportStyleContentCode(esModule, this, request)}
       ${isAuto ? getImportIsOldIECode(esModule, this) : ""}
@@ -209,7 +179,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
 var options = ${JSON.stringify(runtimeOptions)};
 
 ${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
-options.setAttributes = ${setAttributesFn};
+options.setAttributes = setAttributes;
 options.insert = ${insertFn};
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;

src/runtime/setAttributesWithAttributes.js

@@ -0,0 +1,15 @@
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(style, attributes) {
+  const nonce =
+    typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+
+  if (nonce) {
+    attributes.nonce = nonce;
+  }
+
+  Object.keys(attributes).forEach((key) => {
+    style.setAttribute(key, attributes[key]);
+  });
+}
+
+module.exports = setAttributesWithoutAttributes;

src/runtime/setAttributesWithAttributesAndNonce.js

@@ -0,0 +1,8 @@
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(style, attributes) {
+  Object.keys(attributes).forEach((key) => {
+    style.setAttribute(key, attributes[key]);
+  });
+}
+
+module.exports = setAttributesWithoutAttributes;

src/runtime/setAttributesWithoutAttributes.js

@@ -0,0 +1,11 @@
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(style) {
+  const nonce =
+    typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+
+  if (nonce) {
+    style.setAttribute("nonce", nonce);
+  }
+}
+
+module.exports = setAttributesWithoutAttributes;

src/utils.js

@@ -274,6 +274,35 @@ function getExportLazyStyleCode(esModule, loaderContext, request) {
     : "module.exports = exported;";
 }
 
+function getSetAttributesCode(esModule, loaderContext, options) {
+  let modulePath;
+
+  if (typeof options.attributes !== "undefined") {
+    modulePath =
+      options.attributes.nonce !== "undefined"
+        ? stringifyRequest(
+            loaderContext,
+            `!${path.join(
+              __dirname,
+              "runtime/setAttributesWithAttributesAndNonce.js"
+            )}`
+          )
+        : stringifyRequest(
+            loaderContext,
+            `!${path.join(__dirname, "runtime/setAttributesWithAttributes.js")}`
+          );
+  } else {
+    modulePath = stringifyRequest(
+      loaderContext,
+      `!${path.join(__dirname, "runtime/setAttributesWithoutAttributes.js")}`
+    );
+  }
+
+  return esModule
+    ? `import setAttributes from ${modulePath};`
+    : `var setAttributes = require(${modulePath});`;
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export {
   stringifyRequest,
@@ -291,4 +320,5 @@ export {
   getStyleTagTransformFn,
   getExportStyleCode,
   getExportLazyStyleCode,
+  getSetAttributesCode,
 };