single-file-core 1.2.24 → 1.2.26

package/core/index.js

@@ -1324,7 +1324,7 @@ class Processor {
 	}
 
 	replaceStylesheets() {
-		this.processorHelper.replaceStylesheets(this.doc, this.stylesheets, this.resources, this.options);
+		this.processorHelper.replaceStylesheets(this.doc, this.stylesheets, this.options, this.resources);
 	}
 
 	replaceStyleAttributes() {

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

@@ -21,6 +21,11 @@
  *   Source.
  */
 
+import {
+	normalizeFontFamily,
+	getFontWeight
+} from "./../helper.js";
+
 const DATA_URI_PREFIX = "data:";
 const ABOUT_BLANK_URI = "about:blank";
 const REGEXP_URL_HASH = /(#.+?)$/;
@@ -31,6 +36,29 @@ const EMPTY_URL = /^https?:\/\/+\s*$/;
 const NOT_EMPTY_URL = /^(https?:\/\/|file:\/\/|blob:).+/;
 const PREFIX_DATA_URI_IMAGE_SVG = "data:image/svg+xml";
 const UTF8_CHARSET = "utf-8";
+const REGEXP_URL_FUNCTION = /(url|local|-sf-url-original)\(.*?\)\s*(,|$)/g;
+const REGEXP_URL_SIMPLE_QUOTES_FN = /url\s*\(\s*'(.*?)'\s*\)/i;
+const REGEXP_URL_DOUBLE_QUOTES_FN = /url\s*\(\s*"(.*?)"\s*\)/i;
+const REGEXP_URL_NO_QUOTES_FN = /url\s*\(\s*(.*?)\s*\)/i;
+const REGEXP_SIMPLE_QUOTES_STRING = /^'(.*?)'$/;
+const REGEXP_DOUBLE_QUOTES_STRING = /^"(.*?)"$/;
+const REGEXP_URL_FUNCTION_WOFF = /^url\(\s*["']?data:font\/(woff2?)/;
+const REGEXP_URL_FUNCTION_WOFF_ALT = /^url\(\s*["']?data:application\/x-font-(woff)/;
+const REGEXP_FONT_FORMAT = /\.([^.?#]+)((\?|#).*?)?$/;
+const REGEXP_FONT_FORMAT_VALUE = /format\((.*?)\)\s*,?$/;
+const REGEXP_FONT_SRC = /(.*?)\s*,?$/;
+const MEDIA_ALL = "all";
+const FONT_STRETCHES = {
+	"ultra-condensed": "50%",
+	"extra-condensed": "62.5%",
+	"condensed": "75%",
+	"semi-condensed": "87.5%",
+	"normal": "100%",
+	"semi-expanded": "112.5%",
+	"expanded": "125%",
+	"extra-expanded": "150%",
+	"ultra-expanded": "200%"
+};
 
 let util, cssTree;
 
@@ -56,6 +84,164 @@ function getProcessorHelperCommonClass(utilInstance, cssTreeInstance) {
 }
 
 class ProcessorHelperCommon {
+	async processPageResources(doc, baseURI, options, resources, styles, batchRequest) {
+		const processAttributeArgs = [
+			["link[href][rel*=\"icon\"]", "href", true],
+			["object[type=\"image/svg+xml\"], object[type=\"image/svg-xml\"], object[data*=\".svg\"]", "data"],
+			["img[src], input[src][type=image]", "src", false, true],
+			["embed[src*=\".svg\"]", "src"],
+			["video[poster]", "poster"],
+			["*[background]", "background"],
+			["image", "xlink:href"],
+			["image", "href"]
+		];
+		if (options.blockImages) {
+			doc.querySelectorAll("svg").forEach(element => element.remove());
+		}
+		let resourcePromises = processAttributeArgs.map(([selector, attributeName, removeElementIfMissing, processDuplicates]) =>
+			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.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, batchRequest, styles));
+		resourcePromises.push(this.processAttribute(doc.querySelectorAll("embed[src*=\".pdf\"]"), "src", baseURI, options, null, resources, batchRequest, styles));
+		resourcePromises.push(this.processAttribute(doc.querySelectorAll("audio[src], audio > source[src]"), "src", baseURI, options, "audio", resources, batchRequest, styles));
+		resourcePromises.push(this.processAttribute(doc.querySelectorAll("video[src], video > source[src]"), "src", baseURI, options, "video", resources, batchRequest, styles));
+		resourcePromises.push(this.processAttribute(doc.querySelectorAll("audio track[src], video track[src]"), "src", baseURI, options, null, resources, batchRequest, styles));
+		resourcePromises.push(this.processAttribute(doc.querySelectorAll("model[src]"), "src", baseURI, options, null, resources, batchRequest, styles));
+		await Promise.all(resourcePromises);
+		if (options.saveFavicon) {
+			this.processShortcutIcons(doc);
+		}
+	}
+
+	async processXLinks(resourceElements, doc, baseURI, options, batchRequest) {
+		let attributeName = "xlink:href";
+		await Promise.all(Array.from(resourceElements).map(async resourceElement => {
+			let originalResourceURL = resourceElement.getAttribute(attributeName);
+			if (originalResourceURL == null) {
+				attributeName = "href";
+				originalResourceURL = resourceElement.getAttribute(attributeName);
+			}
+			if (options.saveOriginalURLs && !isDataURL(originalResourceURL)) {
+				resourceElement.setAttribute("data-sf-original-href", originalResourceURL);
+			}
+			let resourceURL = normalizeURL(originalResourceURL);
+			if (!options.blockImages) {
+				if (testValidPath(resourceURL) && !testIgnoredPath(resourceURL)) {
+					resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+					try {
+						resourceURL = util.resolveURL(resourceURL, baseURI);
+					} catch (error) {
+						// ignored
+					}
+					if (testValidURL(resourceURL)) {
+						const hashMatch = originalResourceURL.match(REGEXP_URL_HASH);
+						if (originalResourceURL.startsWith(baseURI + "#")) {
+							resourceElement.setAttribute(attributeName, hashMatch[0]);
+						} else {
+							const response = await batchRequest.addURL(resourceURL, { expectedType: "image" });
+							const svgDoc = util.parseSVGContent(response.content);
+							if (hashMatch && hashMatch[0]) {
+								let symbolElement;
+								try {
+									symbolElement = svgDoc.querySelector(hashMatch[0]);
+								} catch (error) {
+									// ignored
+								}
+								if (symbolElement) {
+									resourceElement.setAttribute(attributeName, hashMatch[0]);
+									resourceElement.parentElement.insertBefore(symbolElement, resourceElement.parentElement.firstChild);
+								}
+							} else {
+								resourceElement.setAttribute(attributeName, PREFIX_DATA_URI_IMAGE_SVG + "," + response.content);
+							}
+						}
+					}
+				} else if (resourceURL == options.url) {
+					resourceElement.setAttribute(attributeName, originalResourceURL.substring(resourceURL.length));
+				}
+			} else {
+				resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+			}
+		}));
+	}
+
+	async processStylesheet(cssRules, baseURI, options, resources, batchRequest) {
+		const promises = [];
+		const removedRules = [];
+		const processorHelper = this;
+		for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
+			const ruleData = cssRule.data;
+			if (ruleData.type == "Atrule" && ruleData.name == "charset") {
+				removedRules.push(cssRule);
+			} else if (ruleData.block && ruleData.block.children) {
+				if (ruleData.type == "Rule") {
+					promises.push(processorHelper.processStyle(ruleData, options, resources, batchRequest));
+				} else if (ruleData.type == "Atrule" && (ruleData.name == "media" || ruleData.name == "supports")) {
+					promises.push(processorHelper.processStylesheet(ruleData.block.children, baseURI, options, resources, batchRequest));
+				} else if (ruleData.type == "Atrule" && ruleData.name == "font-face") {
+					promises.push(processFontFaceRule(ruleData));
+				}
+			}
+		}
+		removedRules.forEach(cssRule => cssRules.remove(cssRule));
+		await Promise.all(promises);
+
+		async function processFontFaceRule(ruleData) {
+			const urls = getUrlFunctions(ruleData);
+			await Promise.all(urls.map(async urlNode => {
+				const originalResourceURL = urlNode.value;
+				if (!options.blockFonts) {
+					const resourceURL = normalizeURL(originalResourceURL);
+					if (!testIgnoredPath(resourceURL) && testValidURL(resourceURL)) {
+						await processorHelper.processFont(resourceURL, urlNode, originalResourceURL, baseURI, options, resources, batchRequest);
+					}
+				} else {
+					urlNode.value = util.EMPTY_RESOURCE;
+				}
+			}));
+		}
+	}
+
+	async processSrcset(resourceElements, baseURI, options, resources, batchRequest) {
+		await Promise.all(Array.from(resourceElements).map(async resourceElement => {
+			const originSrcset = resourceElement.getAttribute("srcset");
+			const srcset = util.parseSrcset(originSrcset);
+			if (options.saveOriginalURLs && !isDataURL(originSrcset)) {
+				resourceElement.setAttribute("data-sf-original-srcset", originSrcset);
+			}
+			if (!options.blockImages) {
+				const srcsetValues = await Promise.all(srcset.map(async srcsetValue => {
+					let resourceURL = normalizeURL(srcsetValue.url);
+					if (!testIgnoredPath(resourceURL)) {
+						if (testValidPath(resourceURL)) {
+							try {
+								resourceURL = util.resolveURL(resourceURL, baseURI);
+							} catch (error) {
+								// ignored
+							}
+							if (testValidURL(resourceURL)) {
+								await this.processImageSrcset(resourceURL, srcsetValue, resources, batchRequest);
+							} else {
+								return "";
+							}
+						} else {
+							return "";
+						}
+					} else {
+						return resourceURL + (srcsetValue.w ? " " + srcsetValue.w + "w" : srcsetValue.d ? " " + srcsetValue.d + "x" : "");
+					}
+				}));
+				resourceElement.setAttribute("srcset", srcsetValues.join(", "));
+			} else {
+				resourceElement.setAttribute("srcset", "");
+			}
+		}));
+	}
+
 	setBackgroundImage(element, url, style) {
 		element.style.setProperty("background-blend-mode", "normal", "important");
 		element.style.setProperty("background-clip", "content-box", "important");
@@ -201,56 +387,189 @@ class ProcessorHelperCommon {
 		});
 	}
 
-	async processXLinks(resourceElements, doc, baseURI, options, batchRequest) {
-		let attributeName = "xlink:href";
-		await Promise.all(Array.from(resourceElements).map(async resourceElement => {
-			let originalResourceURL = resourceElement.getAttribute(attributeName);
-			if (originalResourceURL == null) {
-				attributeName = "href";
-				originalResourceURL = resourceElement.getAttribute(attributeName);
+	async removeAlternativeFonts(doc, stylesheets, fonts, fontTests) {
+		const fontsDetails = {
+			fonts: new Map(),
+			medias: new Map(),
+			supports: new Map()
+		};
+		const stats = { rules: { processed: 0, discarded: 0 }, fonts: { processed: 0, discarded: 0 } };
+		let sheetIndex = 0;
+		stylesheets.forEach(stylesheetInfo => {
+			const cssRules = stylesheetInfo.stylesheet.children;
+			if (cssRules) {
+				stats.rules.processed += cssRules.size;
+				stats.rules.discarded += cssRules.size;
+				if (stylesheetInfo.mediaText && stylesheetInfo.mediaText != MEDIA_ALL) {
+					const mediaFontsDetails = this.createFontsDetailsInfo();
+					fontsDetails.medias.set("media-" + sheetIndex + "-" + stylesheetInfo.mediaText, mediaFontsDetails);
+					this.getFontsDetails(doc, cssRules, sheetIndex, mediaFontsDetails);
+				} else {
+					this.getFontsDetails(doc, cssRules, sheetIndex, fontsDetails);
+				}
 			}
-			if (options.saveOriginalURLs && !isDataURL(originalResourceURL)) {
-				resourceElement.setAttribute("data-sf-original-href", originalResourceURL);
+			sheetIndex++;
+		});
+		processFontDetails(fontsDetails);
+		await Promise.all([...stylesheets].map(async ([, stylesheetInfo], sheetIndex) => {
+			const cssRules = stylesheetInfo.stylesheet.children;
+			const media = stylesheetInfo.mediaText;
+			if (cssRules) {
+				if (media && media != MEDIA_ALL) {
+					await this.processFontFaceRules(cssRules, sheetIndex, fontsDetails.medias.get("media-" + sheetIndex + "-" + media), fonts, fontTests, stats);
+				} else {
+					await this.processFontFaceRules(cssRules, sheetIndex, fontsDetails, fonts, fontTests, stats);
+				}
+				stats.rules.discarded -= cssRules.size;
 			}
-			let resourceURL = normalizeURL(originalResourceURL);
-			if (!options.blockImages) {
-				if (testValidPath(resourceURL) && !testIgnoredPath(resourceURL)) {
-					resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
-					try {
-						resourceURL = util.resolveURL(resourceURL, baseURI);
-					} catch (error) {
-						// ignored
+		}));
+		return stats;
+	}
+
+	async processFontFaceRules(cssRules, sheetIndex, fontsDetails, fonts, fontTests, stats) {
+		const removedRules = [];
+		let mediaIndex = 0, supportsIndex = 0;
+		for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
+			const ruleData = cssRule.data;
+			if (ruleData.type == "Atrule" && ruleData.name == "media" && ruleData.block && ruleData.block.children && ruleData.prelude) {
+				const mediaText = cssTree.generate(ruleData.prelude);
+				await this.processFontFaceRules(ruleData.block.children, sheetIndex, fontsDetails.medias.get("media-" + sheetIndex + "-" + mediaIndex + "-" + mediaText), fonts, fontTests, stats);
+				mediaIndex++;
+			} else if (ruleData.type == "Atrule" && ruleData.name == "supports" && ruleData.block && ruleData.block.children && ruleData.prelude) {
+				const supportsText = cssTree.generate(ruleData.prelude);
+				await this.processFontFaceRules(ruleData.block.children, sheetIndex, fontsDetails.supports.get("supports-" + sheetIndex + "-" + supportsIndex + "-" + supportsText), fonts, fontTests, stats);
+				supportsIndex++;
+			} else if (ruleData.type == "Atrule" && ruleData.name == "font-face") {
+				const key = this.getFontKey(ruleData);
+				const fontInfo = fontsDetails.fonts.get(key);
+				if (fontInfo) {
+					const processed = await this.processFontFaceRule(ruleData, fontInfo, fonts, fontTests, stats);
+					if (processed) {
+						fontsDetails.fonts.delete(key);
 					}
-					if (testValidURL(resourceURL)) {
-						const hashMatch = originalResourceURL.match(REGEXP_URL_HASH);
-						if (originalResourceURL.startsWith(baseURI + "#")) {
-							resourceElement.setAttribute(attributeName, hashMatch[0]);
-						} else {
-							const response = await batchRequest.addURL(resourceURL, { expectedType: "image" });
-							const svgDoc = util.parseSVGContent(response.content);
-							if (hashMatch && hashMatch[0]) {
-								let symbolElement;
-								try {
-									symbolElement = svgDoc.querySelector(hashMatch[0]);
-								} catch (error) {
-									// ignored
-								}
-								if (symbolElement) {
-									resourceElement.setAttribute(attributeName, hashMatch[0]);
-									resourceElement.parentElement.insertBefore(symbolElement, resourceElement.parentElement.firstChild);
-								}
-							} else {
-								resourceElement.setAttribute(attributeName, PREFIX_DATA_URI_IMAGE_SVG + "," + response.content);
-							}
-						}
+				} else {
+					removedRules.push(cssRule);
+				}
+			}
+		}
+		removedRules.forEach(cssRule => cssRules.remove(cssRule));
+	}
+
+	getFontsDetails(doc, cssRules, sheetIndex, mediaFontsDetails) {
+		let mediaIndex = 0, supportsIndex = 0;
+		cssRules.forEach(ruleData => {
+			if (ruleData.type == "Atrule" && ruleData.name == "media" && ruleData.block && ruleData.block.children && ruleData.prelude) {
+				const mediaText = cssTree.generate(ruleData.prelude);
+				const fontsDetails = this.createFontsDetailsInfo();
+				mediaFontsDetails.medias.set("media-" + sheetIndex + "-" + mediaIndex + "-" + mediaText, fontsDetails);
+				mediaIndex++;
+				this.getFontsDetails(doc, ruleData.block.children, sheetIndex, fontsDetails);
+			} else if (ruleData.type == "Atrule" && ruleData.name == "supports" && ruleData.block && ruleData.block.children && ruleData.prelude) {
+				const supportsText = cssTree.generate(ruleData.prelude);
+				const fontsDetails = this.createFontsDetailsInfo();
+				mediaFontsDetails.supports.set("supports-" + sheetIndex + "-" + supportsIndex + "-" + supportsText, fontsDetails);
+				supportsIndex++;
+				this.getFontsDetails(doc, ruleData.block.children, sheetIndex, fontsDetails);
+			} else if (ruleData.type == "Atrule" && ruleData.name == "font-face" && ruleData.block && ruleData.block.children) {
+				const fontKey = this.getFontKey(ruleData);
+				let fontInfo = mediaFontsDetails.fonts.get(fontKey);
+				if (!fontInfo) {
+					fontInfo = [];
+					mediaFontsDetails.fonts.set(fontKey, fontInfo);
+				}
+				const src = this.getPropertyValue(ruleData, "src");
+				if (src) {
+					const fontSources = src.match(REGEXP_URL_FUNCTION);
+					if (fontSources) {
+						fontSources.forEach(source => fontInfo.unshift(source));
 					}
-				} else if (resourceURL == options.url) {
-					resourceElement.setAttribute(attributeName, originalResourceURL.substring(resourceURL.length));
 				}
+			}
+		});
+	}
+
+	createFontsDetailsInfo() {
+		return {
+			fonts: new Map(),
+			medias: new Map(),
+			supports: new Map()
+		};
+	}
+
+	getFontKey(ruleData) {
+		return JSON.stringify([
+			normalizeFontFamily(this.getPropertyValue(ruleData, "font-family")),
+			getFontWeight(this.getPropertyValue(ruleData, "font-weight") || "400"),
+			this.getPropertyValue(ruleData, "font-style") || "normal",
+			this.getPropertyValue(ruleData, "unicode-range"),
+			getFontStretch(this.getPropertyValue(ruleData, "font-stretch")),
+			this.getPropertyValue(ruleData, "font-variant") || "normal",
+			this.getPropertyValue(ruleData, "font-feature-settings"),
+			this.getPropertyValue(ruleData, "font-variation-settings")
+		]);
+	}
+
+	getPropertyValue(ruleData, propertyName) {
+		let property;
+		if (ruleData.block.children) {
+			property = ruleData.block.children.filter(node => {
+				try {
+					return node.property == propertyName && !cssTree.generate(node.value).match(/\\9$/);
+				} catch (error) {
+					return node.property == propertyName;
+				}
+			}).tail;
+		}
+		if (property) {
+			try {
+				return cssTree.generate(property.data.value);
+			} catch (error) {
+				// ignored
+			}
+		}
+	}
+}
+
+function processFontDetails(fontsDetails, fontResources) {
+	fontsDetails.fonts.forEach((fontInfo, fontKey) => {
+		fontsDetails.fonts.set(fontKey, fontInfo.map(fontSource => {
+			const fontFormatMatch = fontSource.match(REGEXP_FONT_FORMAT_VALUE);
+			let fontFormat;
+			const fontUrl = getURL(fontSource);
+			if (fontFormatMatch && fontFormatMatch[1]) {
+				fontFormat = fontFormatMatch[1].replace(REGEXP_SIMPLE_QUOTES_STRING, "$1").replace(REGEXP_DOUBLE_QUOTES_STRING, "$1").toLowerCase();
+			}
+			if (!fontFormat) {
+				const fontFormatMatch = fontSource.match(REGEXP_URL_FUNCTION_WOFF);
+				if (fontFormatMatch && fontFormatMatch[1]) {
+					fontFormat = fontFormatMatch[1];
+				} else {
+					const fontFormatMatch = fontSource.match(REGEXP_URL_FUNCTION_WOFF_ALT);
+					if (fontFormatMatch && fontFormatMatch[1]) {
+						fontFormat = fontFormatMatch[1];
+					}
+				}
+			}
+			if (!fontFormat && fontUrl) {
+				const fontFormatMatch = fontUrl.match(REGEXP_FONT_FORMAT);
+				if (fontFormatMatch && fontFormatMatch[1]) {
+					fontFormat = fontFormatMatch[1];
+				}
+			}
+			if (fontResources) {
+				const fontResource = Array.from(fontResources.values()).find(info => info.name == fontUrl);
+				return { src: fontSource.match(REGEXP_FONT_SRC)[1], fontUrl, format: fontFormat, contentType: fontResource && fontResource.contentType };
 			} else {
-				resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+				return { src: fontSource.match(REGEXP_FONT_SRC)[1], fontUrl, format: fontFormat };
 			}
 		}));
+	});
+	if (fontResources) {
+		fontsDetails.medias.forEach(mediaFontsDetails => processFontDetails(mediaFontsDetails, fontResources));
+		fontsDetails.supports.forEach(supportsFontsDetails => processFontDetails(supportsFontsDetails, fontResources));
+	} else {
+		fontsDetails.medias.forEach(mediaFontsDetails => processFontDetails(mediaFontsDetails));
+		fontsDetails.supports.forEach(supportsFontsDetails => processFontDetails(supportsFontsDetails));
 	}
 }
 
@@ -319,4 +638,16 @@ function testValidPath(resourceURL) {
 
 function testValidURL(resourceURL) {
 	return testValidPath(resourceURL) && (resourceURL.match(HTTP_URI_PREFIX) || resourceURL.match(FILE_URI_PREFIX) || resourceURL.startsWith(BLOB_URI_PREFIX)) && resourceURL.match(NOT_EMPTY_URL);
+}
+
+function getURL(urlFunction) {
+	urlFunction = urlFunction.replace(/url\(-sf-url-original\\\(\\"(.*?)\\"\\\)\\ /g, "");
+	const urlMatch = urlFunction.match(REGEXP_URL_SIMPLE_QUOTES_FN) ||
+		urlFunction.match(REGEXP_URL_DOUBLE_QUOTES_FN) ||
+		urlFunction.match(REGEXP_URL_NO_QUOTES_FN);
+	return urlMatch && urlMatch[1];
+}
+
+function getFontStretch(stretch) {
+	return FONT_STRETCHES[stretch] || stretch;
 }