From 6f28f5f6b904490e79b768b8158f69aa0d825012 Mon Sep 17 00:00:00 2001 From: cap-Bernardito Date: Mon, 12 Jul 2021 14:28:11 +0300 Subject: [PATCH] refactor: move setattributes function in module --- package-lock.json | 3 +- src/index.js | 40 +++---------------- src/runtime/setAttributesWithAttributes.js | 15 +++++++ .../setAttributesWithAttributesAndNonce.js | 8 ++++ src/runtime/setAttributesWithoutAttributes.js | 11 +++++ src/utils.js | 30 ++++++++++++++ 6 files changed, 71 insertions(+), 36 deletions(-) create mode 100644 src/runtime/setAttributesWithAttributes.js create mode 100644 src/runtime/setAttributesWithAttributesAndNonce.js create mode 100644 src/runtime/setAttributesWithoutAttributes.js diff --git a/package-lock.json b/package-lock.json index 57617517..681b1fff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,8 @@ "requires": true, "packages": { "": { - "version": "2.0.0", + "name": "style-loader", + "version": "3.0.0", "license": "MIT", "devDependencies": { "@babel/cli": "^7.14.5", diff --git a/src/index.js b/src/index.js index e6739c18..6f1a7949 100644 --- a/src/index.js +++ b/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; diff --git a/src/runtime/setAttributesWithAttributes.js b/src/runtime/setAttributesWithAttributes.js new file mode 100644 index 00000000..0aeb153b --- /dev/null +++ b/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; diff --git a/src/runtime/setAttributesWithAttributesAndNonce.js b/src/runtime/setAttributesWithAttributesAndNonce.js new file mode 100644 index 00000000..63e90e3a --- /dev/null +++ b/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; diff --git a/src/runtime/setAttributesWithoutAttributes.js b/src/runtime/setAttributesWithoutAttributes.js new file mode 100644 index 00000000..7a829fb0 --- /dev/null +++ b/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; diff --git a/src/utils.js b/src/utils.js index 5a011435..26255cd7 100644 --- a/src/utils.js +++ b/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 !== "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, };