single-file-core 1.6.5 → 1.6.7

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

@@ -414,6 +414,7 @@ class ProcessorHelperCommon {
 			sheetIndex++;
 		});
 		processFontDetails(fontsDetails, fonts);
+		this.markRepeatedFontFaceRules(fontsDetails);
 		await Promise.all([...stylesheets].map(async ([, stylesheetInfo], sheetIndex) => {
 			if (stylesheetInfo.stylesheet) {
 				const cssRules = stylesheetInfo.stylesheet.children;
@@ -431,6 +432,21 @@ class ProcessorHelperCommon {
 		return stats;
 	}
 
+	markRepeatedFontFaceRules(fontsDetails) {
+		const lastRules = new Map();
+		fontsDetails.fonts.forEach((fontInfo, ruleData) => {
+			const ruleKey = this.getFontKey(ruleData) + " " + this.getPropertyValue(ruleData, "src");
+			const previousRuleData = lastRules.get(ruleKey);
+			if (previousRuleData) {
+				fontsDetails.repeatedFonts.add(previousRuleData);
+			}
+			lastRules.set(ruleKey, ruleData);
+		});
+		fontsDetails.medias.forEach(mediaFontsDetails => this.markRepeatedFontFaceRules(mediaFontsDetails));
+		fontsDetails.supports.forEach(supportsFontsDetails => this.markRepeatedFontFaceRules(supportsFontsDetails));
+		fontsDetails.layers.forEach(layerFontsDetails => this.markRepeatedFontFaceRules(layerFontsDetails));
+	}
+
 	async processFontFaceRules(cssRules, sheetIndex, fontsDetails, fonts, fontTests, stats) {
 		const removedRules = [];
 		let mediaIndex = 0, supportsIndex = 0, layerIndex = 0;
@@ -451,11 +467,9 @@ class ProcessorHelperCommon {
 			} else if (ruleData.type == "Atrule" && ruleData.name == "font-face") {
 				const fontInfo = fontsDetails.fonts.get(ruleData);
 				if (fontInfo) {
-					const ruleKey = this.getFontKey(ruleData) + " " + this.getPropertyValue(ruleData, "src");
-					if (fontsDetails.emittedFonts.has(ruleKey)) {
+					if (fontsDetails.repeatedFonts.has(ruleData)) {
 						removedRules.push(cssRule);
 					} else {
-						fontsDetails.emittedFonts.add(ruleKey);
 						const keptRule = await this.processFontFaceRule(ruleData, fontInfo, fonts, fontTests, stats);
 						if (!keptRule) {
 							removedRules.push(cssRule);
@@ -469,6 +483,12 @@ class ProcessorHelperCommon {
 		removedRules.forEach(cssRule => cssRules.remove(cssRule));
 	}
 
+	groupDuplicateFonts() {
+	}
+
+	groupDuplicateImages() {
+	}
+
 	getFontsDetails(doc, cssRules, sheetIndex, mediaFontsDetails) {
 		let mediaIndex = 0, supportsIndex = 0, layerIndex = 0;
 		cssRules.forEach(ruleData => {
@@ -516,7 +536,7 @@ class ProcessorHelperCommon {
 			medias: new Map(),
 			supports: new Map(),
 			layers: new Map(),
-			emittedFonts: new Set()
+			repeatedFonts: new Set()
 		};
 	}
 
@@ -529,7 +549,11 @@ class ProcessorHelperCommon {
 			getFontStretch(this.getPropertyValue(ruleData, "font-stretch")),
 			this.getPropertyValue(ruleData, "font-variant") || "normal",
 			this.getPropertyValue(ruleData, "font-feature-settings"),
-			this.getPropertyValue(ruleData, "font-variation-settings")
+			this.getPropertyValue(ruleData, "font-variation-settings"),
+			this.getPropertyValue(ruleData, "ascent-override"),
+			this.getPropertyValue(ruleData, "descent-override"),
+			this.getPropertyValue(ruleData, "line-gap-override"),
+			this.getPropertyValue(ruleData, "size-adjust")
 		]);
 	}
 

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

@@ -33,6 +33,13 @@ const Image = globalThis.Image;
 
 const ABOUT_BLANK_URI = "about:blank";
 const UTF8_CHARSET = "utf-8";
+const DATA_URI_PREFIX = "data:";
+const DEFAULT_FONT_WEIGHT = 400;
+const FONT_KEY_FAMILY_INDEX = 0;
+const FONT_KEY_WEIGHT_INDEX = 1;
+const FONT_KEY_STYLE_INDEX = 2;
+const FONT_KEY_STRETCH_INDEX = 4;
+const NESTED_AT_RULE_NAMES = ["media", "supports", "layer", "container"];
 const PREFIX_DATA_URI_IMAGE_SVG = "data:image/svg+xml";
 const PREFIXES_FORBIDDEN_DATA_URI = ["data:text/"];
 const SCRIPT_TAG_FOUND = /<script/gi;
@@ -65,6 +72,7 @@ import {
 	resizeImage,
 	toDataURI
 } from "./processor-helper-common.js";
+import { getFontWeight } from "./../helper.js";
 
 export {
 	getProcessorHelperClass,
@@ -119,33 +127,40 @@ function getProcessorHelperClass(utilInstance) {
 		}
 
 		replaceStylesheets(doc, stylesheets, options) {
-			doc.querySelectorAll("style").forEach(element => {
+			const styleElements = Array.from(doc.querySelectorAll("style"));
+			styleElements.forEach(element => {
+				const stylesheetInfo = stylesheets.get(element);
+				if (stylesheetInfo && !options.inlineStylesheetsRefs.has(element)) {
+					element.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
+					options.inlineStylesheets.forEach(({ styleElement }, index) => {
+						if (styleElement === element) {
+							options.inlineStylesheets.set(index, {
+								styleElement,
+								content: element.textContent
+							});
+						}
+					});
+				}
+			});
+			styleElements.forEach(element => {
 				const stylesheetInfo = stylesheets.get(element);
 				if (stylesheetInfo) {
 					stylesheets.delete(element);
 					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(element);
-					if (stylesheetRefIndex === undefined) {
-						element.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
-						options.inlineStylesheets.forEach(({ styleElement }, index) => {
-							if (styleElement === element) {
-								options.inlineStylesheets.set(index, {
-									styleElement,
-									content: element.textContent
-								});
+					if (stylesheetRefIndex !== undefined) {
+						if (options.groupDuplicateStylesheets) {
+							if (!doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]")) {
+								const styleElement = doc.createElement("style");
+								styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
+								styleElement.setAttribute("media", "not all");
+								styleElement.setAttribute(DUPLICATE_STYLESHEET_ATTRIBUTE_NAME, stylesheetRefIndex);
+								doc.head.appendChild(styleElement);
 							}
-						});
-					} else if (options.groupDuplicateStylesheets) {
-						if (!doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]")) {
-							const styleElement = doc.createElement("style");
-							styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
-							styleElement.setAttribute("media", "not all");
-							styleElement.setAttribute(DUPLICATE_STYLESHEET_ATTRIBUTE_NAME, stylesheetRefIndex);
-							doc.head.appendChild(styleElement);
+							element.textContent = "/* */";
+							element.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]')?.textContent;this.removeAttribute('onload')");
+						} else {
+							element.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
 						}
-						element.textContent = "/* */";
-						element.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]')?.textContent;this.removeAttribute('onload')");
-					} else {
-						element.textContent = options.inlineStylesheets.get(stylesheetRefIndex).content;
 					}
 					if (stylesheetInfo.mediaText) {
 						element.media = stylesheetInfo.mediaText;
@@ -569,6 +584,97 @@ function getProcessorHelperClass(utilInstance) {
 			doc.querySelectorAll("link[rel*=stylesheet][rel*=alternate][title]").forEach(element => element.remove());
 		}
 
+		groupDuplicateFonts(stylesheets, fonts, options) {
+			if (options.usedFonts && options.usedFonts.length) {
+				const fontFaces = [];
+				stylesheets.forEach(stylesheetInfo => {
+					if (stylesheetInfo.stylesheet && stylesheetInfo.stylesheet.children) {
+						getFontFaces(stylesheetInfo.stylesheet.children, "", fontFaces);
+					}
+				});
+				const families = new Map();
+				fontFaces.forEach(fontFace => {
+					const fontKey = JSON.parse(this.getFontKey(fontFace.ruleData));
+					const familyKey = fontFace.scope + JSON.stringify([fontKey[FONT_KEY_FAMILY_INDEX],
+						fontKey[FONT_KEY_STYLE_INDEX], fontKey[FONT_KEY_STRETCH_INDEX]]);
+					let family = families.get(familyKey);
+					if (!family) {
+						family = { name: fontKey[FONT_KEY_FAMILY_INDEX], groups: new Map(), mergeable: true };
+						families.set(familyKey, family);
+					}
+					const source = this.getPropertyValue(fontFace.ruleData, "src");
+					const range = this.getFontWeightRange(fontFace.ruleData);
+					if (source && source.includes(DATA_URI_PREFIX) && range) {
+						fontKey[FONT_KEY_WEIGHT_INDEX] = null;
+						const groupKey = JSON.stringify(fontKey) + " " + source;
+						const group = family.groups.get(groupKey);
+						if (group) {
+							group.push({ fontFace, range });
+						} else {
+							family.groups.set(groupKey, [{ fontFace, range }]);
+						}
+					} else {
+						family.mergeable = false;
+					}
+				});
+				families.forEach(family => this.mergeFontFaceWeights(family, options.usedFonts));
+			}
+		}
+
+		// Every group of the family has to be merged or none of it: two groups that differ only in
+		// unicode-range are one composite face, and merging one of them alone would leave a weight
+		// matched by two faces that are no longer a composite, which CSS Fonts 4 §5.2 resolves in a way
+		// that "can differ between multiple user agents". Requiring every group to span the same set of
+		// weights is what keeps the merged faces a composite, and it also blocks the case where some
+		// other face of the family sits inside the interval, since that face is a group of its own.
+		mergeFontFaceWeights(family, usedFonts) {
+			const groups = Array.from(family.groups.values());
+			const weightKey = group => group.map(({ range }) => range.join("-")).sort().join(",");
+			if (family.mergeable && groups.some(group => group.length > 1) &&
+				groups.every(group => weightKey(group) == weightKey(groups[0]))) {
+				const ranges = groups[0].map(({ range }) => range);
+				const minWeight = Math.min(...ranges.map(([min]) => min));
+				const maxWeight = Math.max(...ranges.map(([, max]) => max));
+				const declared = weight => ranges.some(([min, max]) => weight >= min && weight <= max);
+				const usedWeightInRange = usedFonts.some(([usedFamily, usedWeight]) => {
+					const weight = Number(usedWeight);
+					return usedFamily == family.name && weight > minWeight && weight < maxWeight && !declared(weight);
+				});
+				if (!usedWeightInRange) {
+					groups.forEach(group => {
+						const kept = group[group.length - 1];
+						this.setFontWeightRange(kept.fontFace.ruleData, minWeight, maxWeight);
+						group.forEach(({ fontFace }) => {
+							if (fontFace != kept.fontFace) {
+								fontFace.cssRules.remove(fontFace.cssRule);
+							}
+						});
+					});
+				}
+			}
+		}
+
+		getFontWeightRange(ruleData) {
+			const value = this.getPropertyValue(ruleData, "font-weight");
+			if (value === undefined) {
+				return [DEFAULT_FONT_WEIGHT, DEFAULT_FONT_WEIGHT];
+			}
+			const weights = value.trim().split(/\s+/).map(weight => Number(getFontWeight(util.removeQuotes(weight))));
+			if (weights.length <= 2 && weights.every(weight => Number.isFinite(weight))) {
+				return [Math.min(...weights), Math.max(...weights)];
+			}
+		}
+
+		setFontWeightRange(ruleData, minWeight, maxWeight) {
+			const value = cssTree.parse(minWeight == maxWeight ? String(minWeight) : minWeight + " " + maxWeight, { context: "value" });
+			const declaration = ruleData.block.children.filter(node => node.property == "font-weight").tail;
+			if (declaration) {
+				declaration.data.value = value;
+			} else {
+				ruleData.block.children.appendData({ type: "Declaration", property: "font-weight", important: false, value });
+			}
+		}
+
 		async processFontFaceRule(ruleData, fontInfo, fontDeclarations, fontTests, stats) {
 			const removedNodes = [];
 			for (let node = ruleData.block.children.head; node; node = node.next) {
@@ -662,4 +768,20 @@ function getProcessorHelperClass(utilInstance) {
 			return true;
 		}
 	};
+}
+
+function getFontFaces(cssRules, scope, fontFaces) {
+	for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
+		const ruleData = cssRule.data;
+		if (ruleData.type == "Atrule" && ruleData.name == "import" && ruleData.prelude && ruleData.prelude.children &&
+			ruleData.prelude.children.head.data.importedChildren) {
+			getFontFaces(ruleData.prelude.children.head.data.importedChildren,
+				scope + "|import " + cssTree.generate(ruleData.prelude), fontFaces);
+		} else if (ruleData.type == "Atrule" && NESTED_AT_RULE_NAMES.includes(ruleData.name) && ruleData.block && ruleData.block.children) {
+			getFontFaces(ruleData.block.children,
+				scope + "|" + ruleData.name + " " + (ruleData.prelude ? cssTree.generate(ruleData.prelude) : ""), fontFaces);
+		} else if (ruleData.type == "Atrule" && ruleData.name == "font-face" && ruleData.block && ruleData.block.children) {
+			fontFaces.push({ ruleData, cssRule, cssRules, scope });
+		}
+	}
 }

package/core/lib/processor-helper.js

@@ -38,6 +38,9 @@ const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
 const SCRIPT_EXTENSION = ".js";
 const LINK_OWN_ATTRIBUTE_NAMES = ["rel", "type", "href", "media"];
+const SRCSET_ATTRIBUTE_NAME = "srcset";
+const IMAGE_ATTRIBUTE_NAMES = ["src", "href", "data", "poster", "background", "xlink:href", SRCSET_ATTRIBUTE_NAME];
+const IMAGE_ATTRIBUTE_SELECTOR = "[src], [href], [data], [poster], [background], [srcset], image, feImage";
 
 let util;
 
@@ -103,36 +106,49 @@ function getProcessorHelperClass(utilInstance) {
 			const entries = Array.from(stylesheets).reverse();
 			const linkElements = new Map();
 			const sharedStyleElements = new Map();
+			const emptyStylesheetRefIndexes = new Set();
 			Array.from(new Set(options.inlineStylesheetsRefs.values())).forEach(stylesheetRefIndex => {
-				const linkElement = doc.createElement("link");
-				linkElement.setAttribute("rel", "stylesheet");
-				linkElement.setAttribute("type", "text/css");
-				const name = "stylesheet_" + resources.stylesheets.size + ".css";
-				linkElement.setAttribute("href", name);
 				const { styleElement, content } = options.inlineStylesheets.get(stylesheetRefIndex);
 				const sharedEntry = entries.find(([key]) => key.element == styleElement);
 				const stylesheet = sharedEntry
 					? sharedEntry[1].stylesheet
 					: cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
-				resources.stylesheets.set(resources.stylesheets.size, { name, content: this.generateStylesheetContent(stylesheet, options) });
-				linkElements.set(stylesheetRefIndex, linkElement);
+				if (isEmptyStylesheet(stylesheet)) {
+					emptyStylesheetRefIndexes.add(stylesheetRefIndex);
+				} else {
+					const linkElement = doc.createElement("link");
+					linkElement.setAttribute("rel", "stylesheet");
+					linkElement.setAttribute("type", "text/css");
+					const name = "stylesheet_" + resources.stylesheets.size + ".css";
+					linkElement.setAttribute("href", name);
+					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet });
+					linkElements.set(stylesheetRefIndex, linkElement);
+				}
 				sharedStyleElements.set(styleElement, stylesheetRefIndex);
 			});
 			for (const [key, stylesheetInfo] of entries) {
 				if (key.urlNode) {
-					const name = "stylesheet_" + resources.stylesheets.size + ".css";
-					if (!isDataURL(stylesheetInfo.url) && options.saveOriginalURLs) {
-						key.urlNode.type = "Url";
-						key.urlNode.value = "-sf-url-original(" + JSON.stringify(stylesheetInfo.url) + ") " + name;
+					if (isEmptyStylesheet(stylesheetInfo.stylesheet) && !key.importDeclaresLayer) {
+						removeImportRule(key.importParent, key.importNode);
 					} else {
-						key.urlNode.value = name;
+						const name = "stylesheet_" + resources.stylesheets.size + ".css";
+						if (!isDataURL(stylesheetInfo.url) && options.saveOriginalURLs) {
+							key.urlNode.type = "Url";
+							key.urlNode.value = "-sf-url-original(" + JSON.stringify(stylesheetInfo.url) + ") " + name;
+						} else {
+							key.urlNode.value = name;
+						}
+						resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
 					}
-					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
 				} else if (key.element.tagName.toUpperCase() == "LINK") {
 					const linkElement = key.element;
-					const name = "stylesheet_" + resources.stylesheets.size + ".css";
-					linkElement.setAttribute("href", name);
-					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
+					if (isEmptyStylesheet(stylesheetInfo.stylesheet)) {
+						linkElement.remove();
+					} else {
+						const name = "stylesheet_" + resources.stylesheets.size + ".css";
+						linkElement.setAttribute("href", name);
+						resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
+					}
 				} else {
 					const styleElement = key.element;
 					const stylesheetRefIndex = options.inlineStylesheetsRefs.has(styleElement)
@@ -140,6 +156,8 @@ function getProcessorHelperClass(utilInstance) {
 						: sharedStyleElements.get(styleElement);
 					if (stylesheetRefIndex === undefined) {
 						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
+					} else if (emptyStylesheetRefIndexes.has(stylesheetRefIndex)) {
+						styleElement.remove();
 					} else {
 						const linkElement = linkElements.get(stylesheetRefIndex).cloneNode(true);
 						Array.from(styleElement.attributes).forEach(({ name, value }) => {
@@ -194,35 +212,24 @@ function getProcessorHelperClass(utilInstance) {
 							if (supportsNode) {
 								supportsCondition = cssTree.generate(supportsNode);
 							}
-							const existingStylesheet = Array.from(stylesheets).find(([, stylesheetInfo]) => stylesheetInfo.resourceURL == resourceURL);
-							let stylesheet;
-							if (existingStylesheet) {
-								stylesheet = existingStylesheet[1].stylesheet;
-								stylesheets.set({ urlNode }, {
-									url: resourceURL,
-									stylesheet,
-									scoped
-								});
-							} else {
-								const stylesheetInfo = {
-									scoped,
-									mediaText,
-									layerName,
-									supportsCondition
-								};
-								const requestedURL = resourceURL;
-								const content = await this.getStylesheetContent(resourceURL, options);
-								stylesheetInfo.url = resourceURL = content.resourceURL;
-								content.data = getUpdatedResourceContent(resourceURL, options) || content.data;
-								stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
-								stylesheet = stylesheetInfo.stylesheet;
-								const ancestorStyleSheets = new Set(importedStyleSheets);
-								ancestorStyleSheets.add(requestedURL);
-								ancestorStyleSheets.add(resourceURL);
-								await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets, ancestorStyleSheets);
-								stylesheets.set({ urlNode }, stylesheetInfo);
-							}
-							urlNode.importedChildren = stylesheet.children;
+							const stylesheetInfo = {
+								scoped,
+								mediaText,
+								layerName,
+								supportsCondition
+							};
+							const importDeclaresLayer = Boolean(cssTree.find(node, node => node.type == "Layer" || ((node.type == "Identifier" || node.type == "Function") && node.name.toLowerCase() == "layer")));
+							stylesheets.set({ urlNode, importNode: node, importParent: stylesheet, importDeclaresLayer }, stylesheetInfo);
+							const requestedURL = resourceURL;
+							const content = await this.getStylesheetContent(resourceURL, options);
+							stylesheetInfo.url = resourceURL = content.resourceURL;
+							content.data = getUpdatedResourceContent(resourceURL, options) || content.data;
+							stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
+							const ancestorStyleSheets = new Set(importedStyleSheets);
+							ancestorStyleSheets.add(requestedURL);
+							ancestorStyleSheets.add(resourceURL);
+							await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets, ancestorStyleSheets);
+							urlNode.importedChildren = stylesheetInfo.stylesheet.children;
 							urlNode.importedMediaText = mediaText;
 							urlNode.importedLayerName = layerName;
 							urlNode.importedSupportsCondition = supportsCondition;
@@ -235,36 +242,27 @@ function getProcessorHelperClass(utilInstance) {
 		async resolveLinkStylesheetURLs(stylesheetInfo, element, resourceURL, baseURI, options, workStylesheet, resources, stylesheets) {
 			resourceURL = normalizeURL(resourceURL);
 			if (resourceURL && resourceURL != baseURI && resourceURL != ABOUT_BLANK_URI) {
-				const existingStylesheet = Array.from(stylesheets).find(([, otherStylesheetInfo]) => otherStylesheetInfo.resourceURL == resourceURL);
-				if (existingStylesheet) {
-					stylesheets.set({ element }, {
-						url: resourceURL,
-						stylesheet: existingStylesheet[1].stylesheet,
-						mediaText: stylesheetInfo.mediaText
-					});
+				const content = await util.getContent(resourceURL, {
+					maxResourceSize: options.maxResourceSize,
+					maxResourceSizeEnabled: options.maxResourceSizeEnabled,
+					charset: options.charset,
+					frameId: options.frameId,
+					resourceReferrer: options.resourceReferrer,
+					validateTextContentType: true,
+					baseURI: baseURI,
+					blockMixedContent: options.blockMixedContent,
+					expectedType: "stylesheet",
+					acceptHeaders: options.acceptHeaders,
+					networkTimeout: options.networkTimeout
+				});
+				if (!(matchCharsetEquals(content.data, content.charset) || matchCharsetEquals(content.data, options.charset))) {
+					options = Object.assign({}, options, { charset: getCharset(content.data) });
+					await this.resolveLinkStylesheetURLs(stylesheetInfo, element, resourceURL, baseURI, options, workStylesheet, resources, stylesheets);
 				} else {
-					const content = await util.getContent(resourceURL, {
-						maxResourceSize: options.maxResourceSize,
-						maxResourceSizeEnabled: options.maxResourceSizeEnabled,
-						charset: options.charset,
-						frameId: options.frameId,
-						resourceReferrer: options.resourceReferrer,
-						validateTextContentType: true,
-						baseURI: baseURI,
-						blockMixedContent: options.blockMixedContent,
-						expectedType: "stylesheet",
-						acceptHeaders: options.acceptHeaders,
-						networkTimeout: options.networkTimeout
-					});
-					if (!(matchCharsetEquals(content.data, content.charset) || matchCharsetEquals(content.data, options.charset))) {
-						options = Object.assign({}, options, { charset: getCharset(content.data) });
-						await this.resolveLinkStylesheetURLs(stylesheetInfo, element, resourceURL, baseURI, options, workStylesheet, resources, stylesheets);
-					} else {
-						resourceURL = content.resourceURL;
-						content.data = getUpdatedResourceContent(content.resourceURL, options) || content.data;
-						stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
-						await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets);
-					}
+					resourceURL = content.resourceURL;
+					content.data = getUpdatedResourceContent(content.resourceURL, options) || content.data;
+					stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
+					await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets);
 				}
 			}
 		}
@@ -281,7 +279,7 @@ function getProcessorHelperClass(utilInstance) {
 			} else {
 				frameElement.setAttribute("src", name + "index.html");
 			}
-			resources.frames.set(frameWindowId, { name, content: pageData.content, resources: pageData.resources, url: frameData.url });
+			resources.frames.set(frameWindowId, { name, content: pageData.content, resources: pageData.resources, url: frameData.url, title: pageData.title });
 		}
 
 		async processFont(resourceURL, urlNode, originalResourceURL, baseURI, options, resources, batchRequest) {
@@ -300,6 +298,69 @@ function getProcessorHelperClass(utilInstance) {
 			resources.fonts.set(indexResource, { name, content, extension, contentType, url: resourceURL });
 		}
 
+		groupDuplicateFonts(stylesheets, fonts) {
+			const canonicalNames = new Map();
+			const fontResources = [...fonts]
+				.filter(([, resource]) => resource.content)
+				.sort(([indexResource], [otherIndexResource]) => indexResource - otherIndexResource);
+			fontResources.forEach(([indexResource, resource], index) => {
+				const original = fontResources.slice(0, index).find(([, previousResource]) => testSameContent(previousResource.content, resource.content));
+				if (original) {
+					canonicalNames.set(resource.name, original[1].name);
+					fonts.delete(indexResource);
+				}
+			});
+			if (canonicalNames.size) {
+				stylesheets.forEach(stylesheetInfo => {
+					if (stylesheetInfo.stylesheet) {
+						getUrlFunctions(stylesheetInfo.stylesheet).forEach(urlNode => replaceResourceName(urlNode, canonicalNames));
+					}
+				});
+			}
+		}
+
+		groupDuplicateImages(doc, stylesheets, styles, images) {
+			const canonicalNames = new Map();
+			const resourcesBySize = new Map();
+			[...images]
+				.filter(([, resource]) => resource.content && resource.content.length)
+				.sort(([indexResource], [otherIndexResource]) => indexResource - otherIndexResource)
+				.forEach(([indexResource, resource]) => {
+					const sameSizeResources = resourcesBySize.get(resource.content.length) || [];
+					const original = sameSizeResources.find(previousResource => testSameContent(previousResource.content, resource.content));
+					if (original) {
+						canonicalNames.set(resource.name, original.name);
+						images.delete(indexResource);
+					} else {
+						sameSizeResources.push(resource);
+						resourcesBySize.set(resource.content.length, sameSizeResources);
+					}
+				});
+			if (canonicalNames.size) {
+				stylesheets.forEach(stylesheetInfo => {
+					if (stylesheetInfo.stylesheet) {
+						getUrlFunctions(stylesheetInfo.stylesheet).forEach(urlNode => replaceResourceName(urlNode, canonicalNames));
+					}
+				});
+				styles.forEach(declarationList => getUrlFunctions(declarationList).forEach(urlNode => replaceResourceName(urlNode, canonicalNames)));
+				doc.querySelectorAll(IMAGE_ATTRIBUTE_SELECTOR).forEach(element => {
+					IMAGE_ATTRIBUTE_NAMES.forEach(attributeName => {
+						const value = element.getAttribute(attributeName);
+						if (value !== null) {
+							if (canonicalNames.has(value)) {
+								element.setAttribute(attributeName, canonicalNames.get(value));
+							} else if (attributeName == SRCSET_ATTRIBUTE_NAME) {
+								const srcset = util.parseSrcset(value);
+								if (srcset.some(srcsetValue => canonicalNames.has(srcsetValue.url))) {
+									element.setAttribute(attributeName, serializeSrcset(srcset.map(srcsetValue => Object.assign({}, srcsetValue, { url: canonicalNames.get(srcsetValue.url) || srcsetValue.url }))));
+								}
+							}
+						}
+					});
+				});
+			}
+		}
+
 		async processStyle(ruleData, options, resources, batchRequest) {
 			const urls = getUrlFunctions(ruleData);
 			await Promise.all(urls.map(async urlNode => {
@@ -428,7 +489,11 @@ function getProcessorHelperClass(utilInstance) {
 			Object.keys(pageResources).forEach(resourceType => {
 				const unusedResources = Array.from(pageResources[resourceType]).filter(([, value]) => !textContent.includes(value.name));
 				unusedResources.forEach(([indexResource]) => pageResources[resourceType].delete(indexResource));
-				resources[resourceType] = Array.from(pageResources[resourceType].values());
+				const orderedResources = Array.from(pageResources[resourceType]);
+				if (orderedResources.every(([indexResource]) => typeof indexResource == "number")) {
+					orderedResources.sort(([indexResource], [otherIndexResource]) => indexResource - otherIndexResource);
+				}
+				resources[resourceType] = orderedResources.map(([, resource]) => resource);
 			});
 			const viewportElement = doc.head.querySelector("meta[name=viewport]");
 			const viewport = viewportElement ? viewportElement.content : null;
@@ -588,4 +653,46 @@ function getProcessorHelperClass(utilInstance) {
 			return true;
 		}
 	};
+}
+
+function isEmptyStylesheet(stylesheet) {
+	return !stylesheet || !stylesheet.children || !stylesheet.children.size;
+}
+
+function removeImportRule(parentStylesheet, importNode) {
+	let importItem, importList;
+	cssTree.walk(parentStylesheet, {
+		visit: "Atrule",
+		enter(node, item, list) {
+			if (node === importNode) {
+				importItem = item;
+				importList = list;
+			}
+		}
+	});
+	if (importItem) {
+		importList.remove(importItem);
+	}
+}
+
+function testSameContent(content, otherContent) {
+	if (content.length != otherContent.length) {
+		return false;
+	}
+	for (let index = 0; index < content.length; index++) {
+		if (content[index] != otherContent[index]) {
+			return false;
+		}
+	}
+	return true;
+}
+
+function replaceResourceName(urlNode, canonicalNames) {
+	canonicalNames.forEach((canonicalName, name) => {
+		if (urlNode.value == name) {
+			urlNode.value = canonicalName;
+		} else if (urlNode.value.endsWith(" " + name)) {
+			urlNode.value = urlNode.value.substring(0, urlNode.value.length - name.length) + canonicalName;
+		}
+	});
 }