single-file-core 1.5.71 → 1.5.72

package/core/index.js

@@ -1223,17 +1223,20 @@ class Processor {
 	}
 
 	async resolveStylesheetsURLs() {
-		const scriptContents = [];
+		const stylesContents = [];
 		this.options.inlineStylesheets = new Map();
 		this.options.inlineStylesheetsRefs = new Map();
-		this.doc.querySelectorAll("style").forEach(element => {
-			if (element.textContent) {
-				const indexContent = scriptContents.indexOf(element.textContent);
+		this.doc.querySelectorAll("style").forEach(styleElement => {
+			if (styleElement.textContent) {
+				const indexContent = stylesContents.indexOf(styleElement.textContent);
 				if (indexContent == -1) {
-					this.options.inlineStylesheets.set(scriptContents.length, element.textContent);
-					scriptContents.push(element.textContent);
+					this.options.inlineStylesheets.set(stylesContents.length, {
+						styleElement,
+						content: styleElement.textContent
+					});
+					stylesContents.push(styleElement.textContent);
 				} else {
-					this.options.inlineStylesheetsRefs.set(element, indexContent);
+					this.options.inlineStylesheetsRefs.set(styleElement, indexContent);
 				}
 			}
 		});

package/core/lib/processor-helper-common.js

@@ -61,6 +61,8 @@ const FONT_STRETCHES = {
 };
 const Blob = globalThis.Blob;
 const FileReader = globalThis.FileReader;
+const Image = globalThis.Image;
+const OffscreenCanvas = globalThis.OffscreenCanvas;
 
 let util, cssTree;
 
@@ -77,6 +79,7 @@ export {
 	testIgnoredPath,
 	testValidPath,
 	testValidURL,
+	resizeImage,
 	toDataURI
 };
 
@@ -105,7 +108,8 @@ class ProcessorHelperCommon {
 			this.processAttribute(doc.querySelectorAll(selector), attributeName, baseURI, options, "image", resources, removeElementIfMissing, batchRequest, styles, processDuplicates)
 		);
 		resourcePromises = resourcePromises.concat([
-			this.processXLinks(doc.querySelectorAll("use"), doc, baseURI, options, batchRequest),
+			this.processXLinks(doc.querySelectorAll("use"), doc, baseURI, options, batchRequest, "xlink:href"),
+			this.processXLinks(doc.querySelectorAll("use"), doc, baseURI, options, batchRequest, "href"),
 			this.processSrcset(doc.querySelectorAll("img[srcset], source[srcset]"), baseURI, options, resources, batchRequest)
 		]);
 		resourcePromises.push(this.processAttribute(doc.querySelectorAll("object[data*=\".pdf\"]"), "data", baseURI, options, null, resources, false, batchRequest, styles));
@@ -120,8 +124,7 @@ class ProcessorHelperCommon {
 		}
 	}
 
-	async processXLinks(resourceElements, doc, baseURI, options, batchRequest) {
-		let attributeName = "xlink:href";
+	async processXLinks(resourceElements, doc, baseURI, options, batchRequest, attributeName) {
 		await Promise.all(Array.from(resourceElements).map(async resourceElement => {
 			let originalResourceURL = resourceElement.getAttribute(attributeName);
 			if (originalResourceURL == null) {
@@ -330,7 +333,7 @@ class ProcessorHelperCommon {
 
 	replacePseudoClassDefined(stylesheet) {
 		cssTree.walk(stylesheet, {
-			enter: function(node, item, list) {
+			enter: function (node, item, list) {
 				if (node.type == "PseudoClassSelector" && node.name == "defined") {
 					if (item.prev == null || item.prev.data.type == "Combinator" || item.prev.data.type == "WhiteSpace") {
 						list.replace(item, cssTree.parse("*", { context: "selector" }).children.head);
@@ -659,11 +662,42 @@ function getFontStretch(stretch) {
 	return FONT_STRETCHES[stretch] || stretch;
 }
 
+async function resizeImage(dataURI, { imageReductionFactor }) {
+	if (dataURI) {
+		const contentType = dataURI.substring(5, dataURI.indexOf(";"));
+		if (contentType == "image/jpeg" ||
+			contentType == "image/png" ||
+			contentType == "image/webp") {
+			try {
+				const image = new Image();
+				image.src = dataURI;
+				await new Promise((resolve, reject) => {
+					image.onload = resolve;
+					image.onerror = reject;
+				});
+				const width = image.naturalWidth / imageReductionFactor;
+				const height = image.naturalHeight / imageReductionFactor;
+				const canvas = new OffscreenCanvas(width, height);
+				const context = canvas.getContext("2d");
+				context.drawImage(image, 0, 0, width, height);
+				const blob = await canvas.convertToBlob({ type: contentType });
+				if (blob.type == contentType) {
+					dataURI = await toDataURI(blob, contentType);
+				}
+			} catch {
+				// ignored
+			}
+		}
+	}
+	return dataURI;
+}
+
 function toDataURI(content, contentType, charset) {
+	const blob = content instanceof Blob ? content : new Blob([content], { type: (contentType || "") + (charset ? ";charset=" + charset : "") });
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
 		reader.onload = () => resolve(reader.result);
 		reader.onerror = () => reject(new Error(reader.error));
-		reader.readAsDataURL(new Blob([content], { type: (contentType || "") + (charset ? ";charset=" + charset : "") }));
+		reader.readAsDataURL(blob);
 	});
 }

package/core/lib/processor-helper-inline.js

@@ -59,6 +59,7 @@ import {
 	testIgnoredPath,
 	testValidPath,
 	testValidURL,
+	resizeImage,
 	toDataURI
 } from "./processor-helper-common.js";
 
@@ -99,9 +100,12 @@ function getProcessorHelperClass(utilInstance) {
 						this.removeSingleLineCssComments(stylesheet);
 					}
 					this.replacePseudoClassDefined(stylesheet);
-					options.inlineStylesheets.forEach((content, index) => {
+					options.inlineStylesheets.forEach(({ content, styleElement }, index) => {
 						if (content === element.textContent) {
-							options.inlineStylesheets.set(index, this.generateStylesheetContent(stylesheet, options));
+							options.inlineStylesheets.set(index, {
+								styleElement,
+								content: this.generateStylesheetContent(stylesheet, options)
+							});
 						}
 					});
 					stylesheetInfo.stylesheet = stylesheet;
@@ -112,31 +116,39 @@ function getProcessorHelperClass(utilInstance) {
 		}
 
 		replaceStylesheets(doc, stylesheets, options) {
-			doc.querySelectorAll("style").forEach(styleElement => {
-				const stylesheetInfo = stylesheets.get(styleElement);
+			doc.querySelectorAll("style").forEach(element => {
+				const stylesheetInfo = stylesheets.get(element);
 				if (stylesheetInfo) {
-					stylesheets.delete(styleElement);
-					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
+					stylesheets.delete(element);
+					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(element);
 					if (stylesheetRefIndex === undefined) {
-						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
+						element.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
+						options.inlineStylesheets.forEach(({ styleElement }, index) => {
+							if (styleElement === element) {
+								options.inlineStylesheets.set(index, {
+									styleElement,
+									content: element.textContent
+								});
+							}
+						});
 					} else if (options.groupDuplicateStylesheets) {
 						if (!doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]")) {
 							const styleElement = doc.createElement("style");
-							styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex);
+							styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
 							styleElement.setAttribute("media", "not all");
 							styleElement.setAttribute(DUPLICATE_STYLESHEET_ATTRIBUTE_NAME, stylesheetRefIndex);
 							doc.head.appendChild(styleElement);
 						}
-						styleElement.textContent = "/* */";
-						styleElement.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]').textContent;this.removeAttribute(\"onload\")");
+						element.textContent = "/* */";
+						element.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]').textContent;this.removeAttribute(\"onload\")");
 					} else {
-						styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex);
+						element.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
 					}
 					if (stylesheetInfo.mediaText) {
-						styleElement.media = stylesheetInfo.mediaText;
+						element.media = stylesheetInfo.mediaText;
 					}
 				} else {
-					styleElement.remove();
+					element.remove();
 				}
 			});
 			if (options.groupDuplicateStylesheets && doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "]")) {
@@ -377,6 +389,9 @@ function getProcessorHelperClass(utilInstance) {
 											}
 										}
 									}
+									if (options.imageReductionFactor > 1) {
+										content = await resizeImage(content, options);
+									}
 									if (removeElementIfMissing && this.testEmptyResource(content)) {
 										resourceElement.remove();
 									} else if (!this.testEmptyResource(content)) {

package/core/lib/processor-helper.js

@@ -25,6 +25,7 @@ import * as cssTree from "./../../vendor/css-tree.js";
 
 const JSON = globalThis.JSON;
 const FontFace = globalThis.FontFace;
+const Blob = globalThis.Blob;
 
 const ABOUT_BLANK_URI = "about:blank";
 const UTF8_CHARSET = "utf-8";
@@ -49,7 +50,9 @@ import {
 	replaceOriginalURLs,
 	testIgnoredPath,
 	testValidPath,
-	testValidURL
+	testValidURL,
+	resizeImage,
+	toDataURI
 } from "./processor-helper-common.js";
 
 export {
@@ -102,7 +105,7 @@ function getProcessorHelperClass(utilInstance) {
 				linkElement.setAttribute("type", "text/css");
 				const name = "stylesheet_" + resources.stylesheets.size + ".css";
 				linkElement.setAttribute("href", name);
-				let content = options.inlineStylesheets.get(stylesheetRefIndex);
+				let { content } = options.inlineStylesheets.get(stylesheetRefIndex);
 				const stylesheet = cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
 				this.replacePseudoClassDefined(stylesheet);
 				content = this.generateStylesheetContent(stylesheet, options);
@@ -324,7 +327,7 @@ function getProcessorHelperClass(utilInstance) {
 								}
 								if (testValidURL(resourceURL)) {
 									const declaredContentType = ["OBJECT", "EMBED"].includes(resourceElement.tagName.toUpperCase()) ? resourceElement.getAttribute("type") : "";
-									let { content, indexResource, extension, contentType } = await batchRequest.addURL(resourceURL,
+									let { content, indexResource, extension, contentType, charset } = await batchRequest.addURL(resourceURL,
 										{ asBinary: true, expectedType, contentType: declaredContentType });
 									if (originURL) {
 										if (this.testEmptyResource(content)) {
@@ -353,6 +356,10 @@ function getProcessorHelperClass(utilInstance) {
 											}
 										}
 									}
+									if (options.imageReductionFactor > 1) {
+										const dataURI = await resizeImage(await toDataURI(new Blob([content], { type: contentType }), charset), options);
+										content = (await util.getContent(dataURI, { asBinary: true })).data;
+									}
 									if (removeElementIfMissing && this.testEmptyResource(content)) {
 										resourceElement.remove();
 									} else if (!this.testEmptyResource(content)) {

package/modules/css-rules-minifier.js

@@ -294,11 +294,12 @@ function processSelectors(ruleData, processingContext, docContext) {
 			scopeRelative
 		} = analyzeSelector(selector.data);
 		registerSelector(selector, ruleData, scopeRelative, processingContext, docContext);
-		if (!hasPseudoElement && !hasDynamicStatePseudoClass &&
-			(!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length)) {
+		if (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length) {
 			const matchedElements = matchElements(selector, ancestorsSelectors, docContext);
 			if (matchedElements.length) {
-				updateMatchingSelectors(matchedElements, selector, docContext);
+				if (!hasPseudoElement && !hasDynamicStatePseudoClass) {
+					updateMatchingSelectors(matchedElements, selector, docContext);
+				}
 			} else {
 				removedSelectors.push(selector);
 			}

package/modules/css-selector-sanitizer.js

@@ -46,6 +46,8 @@ const UNMATCHABLE_PSEUDO_CLASSES = [
     "seeking",
     "stalled",
     "volume-locked",
+    "after",
+    "before"
 ];
 
 export {
@@ -57,7 +59,9 @@ export {
  * Optional `ancestors` array may be provided to expand nesting selectors (`&`).
  */
 function sanitizeSelector(selector, ancestors, docContext) {
-    if (!docContext.normalizedSelectorText) docContext.normalizedSelectorText = new WeakMap();
+    if (!docContext.normalizedSelectorText) {
+        docContext.normalizedSelectorText = new WeakMap();
+    }
     if (docContext.normalizedSelectorText.has(selector)) {
         return docContext.normalizedSelectorText.get(selector);
     }

package/package.json

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