single-file-core 1.0.22 → 1.0.24

package/modules/css-matched-rules.js

@@ -36,7 +36,9 @@ class MatchedRules {
 		this.mediaAllInfo = createMediaInfo(MEDIA_ALL);
 		const matchedElementsCache = new Map();
 		let sheetIndex = 0;
-		const workStyleElement = doc.createElement("style");
+		const workStyleSheet = doc.createElement("style");
+		doc.body.appendChild(workStyleSheet);
+		const workStyleElement = doc.createElement("span");
 		doc.body.appendChild(workStyleElement);
 		stylesheets.forEach(stylesheetInfo => {
 			if (!stylesheetInfo.scoped) {
@@ -45,9 +47,9 @@ class MatchedRules {
 					if (stylesheetInfo.mediaText && stylesheetInfo.mediaText != MEDIA_ALL) {
 						const mediaInfo = createMediaInfo(stylesheetInfo.mediaText);
 						this.mediaAllInfo.medias.set("style-" + sheetIndex + "-" + stylesheetInfo.mediaText, mediaInfo);
-						getMatchedElementsRules(doc, cssRules, mediaInfo, sheetIndex, styles, matchedElementsCache, workStyleElement);
+						getMatchedElementsRules(doc, cssRules, mediaInfo, sheetIndex, styles, matchedElementsCache, workStyleSheet);
 					} else {
-						getMatchedElementsRules(doc, cssRules, this.mediaAllInfo, sheetIndex, styles, matchedElementsCache, workStyleElement);
+						getMatchedElementsRules(doc, cssRules, this.mediaAllInfo, sheetIndex, styles, matchedElementsCache, workStyleSheet);
 					}
 				}
 			}
@@ -64,7 +66,8 @@ class MatchedRules {
 			startTime = Date.now();
 			log("  -- STARTED computeCascade");
 		}
-		computeCascade(this.mediaAllInfo, [], this.mediaAllInfo, workStyleElement);
+		computeCascade(this.mediaAllInfo, [], this.mediaAllInfo, workStyleSheet, workStyleElement);
+		workStyleSheet.remove();
 		workStyleElement.remove();
 		if (DEBUG) {
 			log("  -- ENDED computeCascade", Date.now() - startTime);
@@ -222,9 +225,9 @@ function addRule(element, selectorInfo, styles) {
 	elementInfo.push(selectorInfo);
 }
 
-function computeCascade(mediaInfo, parentMediaInfo, mediaAllInfo, workStylesheet) {
+function computeCascade(mediaInfo, parentMediaInfo, mediaAllInfo, workStylesheet, workStyleElement) {
 	mediaInfo.elements.forEach((elementInfo/*, element*/) =>
-		getDeclarationsInfo(elementInfo, workStylesheet/*, element*/).forEach((declarationsInfo, property) => {
+		getDeclarationsInfo(elementInfo, workStylesheet, workStyleElement/*, element*/).forEach((declarationsInfo, property) => {
 			if (declarationsInfo.selectorInfo.ruleInfo || mediaInfo == mediaAllInfo) {
 				let info;
 				if (declarationsInfo.selectorInfo.ruleInfo) {
@@ -249,10 +252,10 @@ function computeCascade(mediaInfo, parentMediaInfo, mediaAllInfo, workStylesheet
 			}
 		}));
 	delete mediaInfo.elements;
-	mediaInfo.medias.forEach(childMediaInfo => computeCascade(childMediaInfo, [mediaInfo, ...parentMediaInfo], mediaAllInfo, workStylesheet));
+	mediaInfo.medias.forEach(childMediaInfo => computeCascade(childMediaInfo, [mediaInfo, ...parentMediaInfo], mediaAllInfo, workStylesheet, workStyleElement));
 }
 
-function getDeclarationsInfo(elementInfo, workStylesheet/*, element*/) {
+function getDeclarationsInfo(elementInfo, workStylesheet, workStyleElement/*, element*/) {
 	const declarationsInfo = new Map();
 	const processedProperties = new Set();
 	elementInfo.forEach(selectorInfo => {
@@ -262,17 +265,17 @@ function getDeclarationsInfo(elementInfo, workStylesheet/*, element*/) {
 		} else {
 			declarations = selectorInfo.ruleInfo.ruleData.block.children;
 		}
-		processDeclarations(declarationsInfo, declarations, selectorInfo, processedProperties, workStylesheet);
+		processDeclarations(declarationsInfo, declarations, selectorInfo, processedProperties, workStylesheet, workStyleElement);
 	});
 	return declarationsInfo;
 }
 
-function processDeclarations(declarationsInfo, declarations, selectorInfo, processedProperties, workStylesheet) {
+function processDeclarations(declarationsInfo, declarations, selectorInfo, processedProperties, workStylesheet, workStyleElement) {
 	for (let declaration = declarations.tail; declaration; declaration = declaration.prev) {
 		const declarationData = declaration.data;
 		const declarationText = cssTree.generate(declarationData);
 		if (declarationData.type == "Declaration" &&
-			(declarationText.match(REGEXP_VENDOR_IDENTIFIER) || !processedProperties.has(declarationData.property) || declarationData.important) && !invalidDeclaration(declarationText, workStylesheet)) {
+			(declarationText.match(REGEXP_VENDOR_IDENTIFIER) || !processedProperties.has(declarationData.property) || declarationData.important) && !invalidDeclaration(declarationText, workStyleElement)) {
 			const declarationInfo = declarationsInfo.get(declarationData);
 			if (!declarationInfo || (declarationData.important && !declarationInfo.important)) {
 				declarationsInfo.set(declarationData, { selectorInfo, important: declarationData.important });
@@ -284,10 +287,10 @@ function processDeclarations(declarationsInfo, declarations, selectorInfo, proce
 	}
 }
 
-function invalidDeclaration(declarationText, workStylesheet) {
+function invalidDeclaration(declarationText, workStyleElement) {
 	let invalidDeclaration;
-	workStylesheet.textContent = "single-file-declaration { " + declarationText + "}";
-	if (workStylesheet.sheet && !workStylesheet.sheet.cssRules[0].style.length) {
+	workStyleElement.style = declarationText;
+	if (!workStyleElement.style.length) {
 		if (!declarationText.match(REGEXP_VENDOR_IDENTIFIER)) {
 			invalidDeclaration = true;
 		}

package/modules/html-images-alt-minifier.js

@@ -101,9 +101,13 @@ function setSrc(srcData, imgElement, pictureElement) {
 
 function getSourceSrc(sourceSrcSet) {
 	if (sourceSrcSet) {
-		const srcset = srcsetParser.process(sourceSrcSet);
-		if (srcset.length) {
-			return (srcset.find(srcset => srcset.url)).url;
+		try {
+			const srcset = srcsetParser.process(sourceSrcSet);
+			if (srcset.length) {
+				return (srcset.find(srcset => srcset.url)).url;
+			}
+		} catch (error) {
+			// ignored
 		}
 	}
 }

package/modules/html-serializer.js

@@ -145,7 +145,7 @@ function serializeAttribute(attribute, element, compressHTML) {
 				simpleQuotesValue = true;
 			}
 		}
-		const invalidUnquotedValue = !compressHTML || !value.match(/^[^ \t\n\f\r'"`=<>]+$/);
+		const invalidUnquotedValue = !compressHTML || value.match(/[ \t\n\f\r'"`=<>]/);
 		content += " ";
 		if (!attribute.namespace) {
 			content += name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "single-file-core",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",

package/single-file-core.js

@@ -1854,10 +1854,6 @@ class ProcessorHelper {
 							if (testValidURL(resourceURL)) {
 								let { content, indexResource, duplicate } = await batchRequest.addURL(resourceURL,
 									{ asBinary: true, expectedType, groupDuplicates: options.groupDuplicateImages && resourceElement.tagName == "IMG" && attributeName == "src" });
-								if (resourceURL.includes("openbenchmarking.org/embed.php")) {
-									debugger
-								}
-
 								if (originURL) {
 									if (content == util.EMPTY_RESOURCE) {
 										try {

package/single-file-helper.js

@@ -148,7 +148,7 @@ function preProcessDoc(doc, win, options) {
 		elementsInfo = getElementsInfo(win, doc, doc.documentElement, options);
 		if (options.moveStylesInHead) {
 			doc.querySelectorAll("body style, body ~ style").forEach(element => {
-				const computedStyle = win.getComputedStyle(element);
+				const computedStyle = getComputedStyle(win, element);
 				if (computedStyle && testHiddenElement(element, computedStyle)) {
 					element.setAttribute(STYLE_ATTRIBUTE_NAME, "");
 					elementsInfo.markedElements.push(element);
@@ -186,7 +186,7 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 	elements.forEach(element => {
 		let elementHidden, elementKept, computedStyle;
 		if (!options.autoSaveExternalSave && (options.removeHiddenElements || options.removeUnusedFonts || options.compressHTML)) {
-			computedStyle = win.getComputedStyle(element);
+			computedStyle = getComputedStyle(win, element);
 			if (element instanceof win.HTMLElement) {
 				if (options.removeHiddenElements) {
 					elementKept = ((ascendantHidden || element.closest("html > head")) && KEPT_TAG_NAMES.includes(element.tagName)) || element.closest("details");
@@ -209,9 +209,9 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 				}
 				if (options.removeUnusedFonts) {
 					getUsedFont(computedStyle, options, data.usedFonts);
-					getUsedFont(win.getComputedStyle(element, ":first-letter"), options, data.usedFonts);
-					getUsedFont(win.getComputedStyle(element, ":before"), options, data.usedFonts);
-					getUsedFont(win.getComputedStyle(element, ":after"), options, data.usedFonts);
+					getUsedFont(getComputedStyle(win, element, ":first-letter"), options, data.usedFonts);
+					getUsedFont(getComputedStyle(win, element, ":before"), options, data.usedFonts);
+					getUsedFont(getComputedStyle(win, element, ":after"), options, data.usedFonts);
 				}
 			}
 		}
@@ -269,11 +269,7 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 		element.setAttribute(IMAGE_ATTRIBUTE_NAME, data.images.length - 1);
 		data.markedElements.push(element);
 		element.removeAttribute(LAZY_SRC_ATTRIBUTE_NAME);
-		try {
-			computedStyle = computedStyle || win.getComputedStyle(element);
-		} catch (error) {
-			// ignored
-		}
+		computedStyle = computedStyle || getComputedStyle(win, element);
 		if (computedStyle) {
 			imageData.size = getSize(win, element, computedStyle);
 			const boxShadow = computedStyle.getPropertyValue("box-shadow");
@@ -292,9 +288,9 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 	if (element.tagName == "VIDEO") {
 		const src = element.currentSrc;
 		if (src && !src.startsWith("blob:") && !src.startsWith("data:")) {
-			const positionParent = win.getComputedStyle(element.parentNode).getPropertyValue("position");
+			const computedStyle = getComputedStyle(win, element.parentNode);
 			data.videos.push({
-				positionParent,
+				positionParent: computedStyle && computedStyle.getPropertyValue("position"),
 				src,
 				size: {
 					pxWidth: element.clientWidth,
@@ -469,37 +465,39 @@ function getSize(win, imageElement, computedStyle) {
 	let pxHeight = imageElement.naturalHeight;
 	if (!pxWidth && !pxHeight) {
 		const noStyleAttribute = imageElement.getAttribute("style") == null;
-		computedStyle = computedStyle || win.getComputedStyle(imageElement);
-		let removeBorderWidth = false;
-		if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
-			const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
-			const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
-			const clientWidth = imageElement.clientWidth;
-			imageElement.style.setProperty("box-sizing", "border-box", "important");
-			removeBorderWidth = imageElement.clientWidth != clientWidth;
-			if (boxSizingValue) {
-				imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
+		computedStyle = computedStyle || getComputedStyle(win, imageElement);
+		if (computedStyle) {
+			let removeBorderWidth = false;
+			if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
+				const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
+				const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
+				const clientWidth = imageElement.clientWidth;
+				imageElement.style.setProperty("box-sizing", "border-box", "important");
+				removeBorderWidth = imageElement.clientWidth != clientWidth;
+				if (boxSizingValue) {
+					imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
+				} else {
+					imageElement.style.removeProperty("box-sizing");
+				}
+			}
+			let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
+			paddingLeft = getWidth("padding-left", computedStyle);
+			paddingRight = getWidth("padding-right", computedStyle);
+			paddingTop = getWidth("padding-top", computedStyle);
+			paddingBottom = getWidth("padding-bottom", computedStyle);
+			if (removeBorderWidth) {
+				borderLeft = getWidth("border-left-width", computedStyle);
+				borderRight = getWidth("border-right-width", computedStyle);
+				borderTop = getWidth("border-top-width", computedStyle);
+				borderBottom = getWidth("border-bottom-width", computedStyle);
 			} else {
-				imageElement.style.removeProperty("box-sizing");
+				borderLeft = borderRight = borderTop = borderBottom = 0;
+			}
+			pxWidth = Math.max(0, imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight);
+			pxHeight = Math.max(0, imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom);
+			if (noStyleAttribute) {
+				imageElement.removeAttribute("style");
 			}
-		}
-		let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
-		paddingLeft = getWidth("padding-left", computedStyle);
-		paddingRight = getWidth("padding-right", computedStyle);
-		paddingTop = getWidth("padding-top", computedStyle);
-		paddingBottom = getWidth("padding-bottom", computedStyle);
-		if (removeBorderWidth) {
-			borderLeft = getWidth("border-left-width", computedStyle);
-			borderRight = getWidth("border-right-width", computedStyle);
-			borderTop = getWidth("border-top-width", computedStyle);
-			borderBottom = getWidth("border-bottom-width", computedStyle);
-		} else {
-			borderLeft = borderRight = borderTop = borderBottom = 0;
-		}
-		pxWidth = Math.max(0, imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight);
-		pxHeight = Math.max(0, imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom);
-		if (noStyleAttribute) {
-			imageElement.removeAttribute("style");
 		}
 	}
 	return { pxWidth, pxHeight };
@@ -550,4 +548,12 @@ function getFontWeight(weight) {
 
 function flatten(array) {
 	return array.flat ? array.flat() : array.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
+}
+
+function getComputedStyle(win, element, pseudoElement) {
+	try {
+		return win.getComputedStyle(element, pseudoElement);
+	} catch (error) {
+		// ignored
+	}
 }