single-file-core 1.6.4 → 1.6.6

package/core/infobar.js

@@ -68,26 +68,6 @@ const INFOBAR_STYLES = `
   border-color: #eee;
   border-radius: 16px;
   z-index: 2147483647;
-  animation-name: flash;
-  animation-duration: .5s;
-  animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
-  animation-delay: 1s;
-  animation-iteration-count: 2;
-}
-
-.infobar:not(:focus-within):not(.infobar-focus)::after {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  border: 2px solid #dd6a00;
-  border-radius: inherit;
-  opacity: 0;
-  pointer-events: none;
-  animation-name: ripple;
-  animation-duration: 3s;
-  animation-timing-function: ease-out;
-  animation-delay: 2s;
-  animation-iteration-count: 3;
 }
 
 .infobar:valid, .infobar:not(:focus-within):not(.infobar-focus) .infobar-content {
@@ -139,33 +119,6 @@ const INFOBAR_STYLES = `
   min-block-size: 24px;
 }
 
-@keyframes flash {
-  0%, 100% {
-    background-color: #737373;
-  }
-  50% {
-    background-color: #dd6a00;
-  }
-}
-
-@keyframes ripple {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  45%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .infobar,
-  .infobar:not(:focus-within):not(.infobar-focus)::after {
-    animation-name: none;
-  }
-}
-
 .infobar:focus-within .infobar-icon, .infobar.infobar-focus .infobar-icon {
   z-index: -1;
   background-image: none;
@@ -195,6 +148,57 @@ const INFOBAR_STYLES = `
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAABhmlDQ1BJQ0MgcHJvZmlsZQAAKJF9kj1Iw0AYht+mSkUrDnYQcchQnSyIijqWKhbBQmkrtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVK/C4ptIjx4LiH9+59+e67A4RGhalm1wSgapaRisfEbG5VDLyiDwEAvZiVmKkn0osZeI6ve/j4ehfhWd7n/hz9St5kgE8kjjLdsIg3iGc2LZ3zPnGIlSSF+Jx43KACiR+5Lrv8xrnosMAzQ0YmNU8cIhaLHSx3MCsZKvE0cVhRNcoXsi4rnLc4q5Uaa9XJbxjMaytprtMcQRxLSCAJETJqKKMCCxFaNVJMpGg/5uEfdvxJcsnkKoORYwFVqJAcP/gb/O6tWZiadJOCMaD7xbY/RoHALtCs2/b3sW03TwD/M3Cltf3VBjD3SXq9rYWPgIFt4OK6rcl7wOUOMPSkS4bkSH6aQqEAvJ/RM+WAwVv6EGtu31r7OH0AMtSr5Rvg4BAYK1L2use9ezr79u+ZVv9+AFlNcp0UUpiqAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AsHAB8VC4EQ6QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAJUExURQAAAICHi4qKioTuJAkAAAABdFJOUwBA5thmAAAAAWJLR0QCZgt8ZAAAAJtJREFUOI3NkrsBgCAMRLFwBPdxBArcfxXFkO8rbKWAAJfHJ9faf9vuYX/749T5NmShm3bEwbe2SxeuM4+2oxDL1cDoKtVUjRy+tH78Cv2CS+wIiQNC1AEhk4AQeUTMWUJMfUJMSEJMSEY8kIx4IONroaYAimNxsXp1PA7PxwfVL8QnowwoVC0lig07wDDVUjAdbAnjwtow/z/bDW7eI4M2KruJAAAAAElFTkSuQmCC);
 }
 `;
+const INFOBAR_ANIMATIONS_STYLES = `
+.infobar {
+  animation-name: flash;
+  animation-duration: .5s;
+  animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
+  animation-delay: 1s;
+  animation-iteration-count: 2;
+}
+
+.infobar:not(:focus-within):not(.infobar-focus)::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border: 2px solid #dd6a00;
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  animation-name: ripple;
+  animation-duration: 3s;
+  animation-timing-function: ease-out;
+  animation-delay: 2s;
+  animation-iteration-count: 3;
+}
+
+@keyframes flash {
+  0%, 100% {
+    background-color: #737373;
+  }
+  50% {
+    background-color: #dd6a00;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  45%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .infobar,
+  .infobar:not(:focus-within):not(.infobar-focus)::after {
+    animation-name: none;
+  }
+}
+`;
 
 export { displayIcon, appendInfobar, refreshInfobarInfo, extractInfobarData, INFOBAR_TAGNAME };
 
@@ -221,6 +225,9 @@ function appendInfobar(doc, options, useShadowRoot) {
 		const shadowRootContent = doc.createElement("div");
 		const styleElement = doc.createElement("style");
 		styleElement.textContent = INFOBAR_STYLES;
+		if (options.animateInfobar) {
+			styleElement.textContent += INFOBAR_ANIMATIONS_STYLES;
+		}
 		if (options.infobarPositionAbsolute) {
 			styleElement.textContent += ".infobar { position: absolute; }";
 			const parentElementStyle = getComputedStyle(parentElement);
@@ -332,6 +339,7 @@ function displayIcon(doc, useShadowRoot, options = {}) {
 	const infoData = extractInfobarData(doc);
 	if (infoData.saveUrl) {
 		infoData.openInfobar = options.openInfobar;
+		infoData.animateInfobar = options.animateInfobar;
 		infoData.infobarPositionAbsolute = options.infobarPositionAbsolute;
 		infoData.infobarPositionTop = options.infobarPositionTop;
 		infoData.infobarPositionRight = options.infobarPositionRight;

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,9 @@ class ProcessorHelperCommon {
 		removedRules.forEach(cssRule => cssRules.remove(cssRule));
 	}
 
+	groupDuplicateFonts() {
+	}
+
 	getFontsDetails(doc, cssRules, sheetIndex, mediaFontsDetails) {
 		let mediaIndex = 0, supportsIndex = 0, layerIndex = 0;
 		cssRules.forEach(ruleData => {
@@ -516,7 +533,7 @@ class ProcessorHelperCommon {
 			medias: new Map(),
 			supports: new Map(),
 			layers: new Map(),
-			emittedFonts: new Set()
+			repeatedFonts: new Set()
 		};
 	}
 
@@ -529,7 +546,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,
@@ -569,6 +577,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 +761,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

@@ -114,7 +114,7 @@ function getProcessorHelperClass(utilInstance) {
 				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) });
+				resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet });
 				linkElements.set(stylesheetRefIndex, linkElement);
 				sharedStyleElements.set(styleElement, stylesheetRefIndex);
 			});
@@ -194,35 +194,23 @@ 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
+							};
+							stylesheets.set({ urlNode }, 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 +223,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);
 				}
 			}
 		}
@@ -300,6 +279,27 @@ 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 => replaceFontName(urlNode, canonicalNames));
+					}
+				});
+			}
+		}
+
 		async processStyle(ruleData, options, resources, batchRequest) {
 			const urls = getUrlFunctions(ruleData);
 			await Promise.all(urls.map(async urlNode => {
@@ -428,7 +428,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 +592,26 @@ function getProcessorHelperClass(utilInstance) {
 			return true;
 		}
 	};
+}
+
+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 replaceFontName(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;
+		}
+	});
 }