single-file-core 1.6.19 → 1.6.20

package/core/helper.js

@@ -86,6 +86,17 @@ const FONT_WEIGHTS = {
 	bolder: "700",
 	lighter: "100"
 };
+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%"
+};
 const COMMENT_HEADER_LEGACY = "Archive processed by SingleFile";
 const ELEMENT_NODE_TYPE = 1;
 const TEXT_NODE_TYPE = 3;
@@ -139,6 +150,8 @@ export {
 	removeQuotes,
 	flatten,
 	getFontWeight,
+	getFontStretch,
+	getStylesheetsInCascadeOrder,
 	normalizeFontFamily,
 	getShadowRoot,
 	appendInfobar,
@@ -926,8 +939,9 @@ function getUsedFont(computedStyle, usedFonts, usedFontsCharacters, drawnCharact
 			if (fontFamilyName) {
 				const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
 				const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
-				const value = [fontFamilyName, fontWeight, fontStyle, fontVariant];
-				usedFonts.set(JSON.stringify(value), [fontFamilyName, fontWeight, fontStyle, fontVariant]);
+				const fontStretch = getFontStretch(computedStyle.getPropertyValue("font-stretch") || "normal");
+				const value = [fontFamilyName, fontWeight, fontStyle, fontVariant, fontStretch];
+				usedFonts.set(JSON.stringify(value), value);
 				if (usedFontsCharacters && drawnCharacters) {
 					addUsedFontCharacters(usedFontsCharacters, fontFamilyName, fontStyle, drawnCharacters);
 				}
@@ -1246,6 +1260,57 @@ function getFontWeight(weight) {
 	return FONT_WEIGHTS[weight.toLowerCase().trim()] || weight;
 }
 
+function getFontStretch(stretch) {
+	return FONT_STRETCHES[stretch] || stretch;
+}
+
+function getStylesheetsInCascadeOrder(stylesheets) {
+	const entries = [];
+	const entriesByRules = new Map();
+	stylesheets.forEach((stylesheetInfo, key) => {
+		const entry = { stylesheetInfo, key, index: entries.length };
+		entries.push(entry);
+		if (stylesheetInfo.stylesheet && stylesheetInfo.stylesheet.children) {
+			entriesByRules.set(stylesheetInfo.stylesheet.children, entry);
+		}
+	});
+	const importedEntries = new Set();
+	entries.forEach(entry => getImportedStylesheetEntries(entry, entriesByRules).forEach(importedEntry => importedEntries.add(importedEntry)));
+	const orderedEntries = [];
+	const visitedEntries = new Set();
+	entries
+		.filter(entry => !importedEntries.has(entry))
+		.forEach(entry => addStylesheetEntry(entry, entriesByRules, orderedEntries, visitedEntries));
+	entries
+		.filter(entry => !visitedEntries.has(entry))
+		.forEach(entry => addStylesheetEntry(entry, entriesByRules, orderedEntries, visitedEntries));
+	return orderedEntries;
+}
+
+function addStylesheetEntry(entry, entriesByRules, orderedEntries, visitedEntries) {
+	if (!visitedEntries.has(entry)) {
+		visitedEntries.add(entry);
+		getImportedStylesheetEntries(entry, entriesByRules).forEach(importedEntry => addStylesheetEntry(importedEntry, entriesByRules, orderedEntries, visitedEntries));
+		orderedEntries.push(entry);
+	}
+}
+
+function getImportedStylesheetEntries(entry, entriesByRules) {
+	const importedEntries = [];
+	const stylesheet = entry.stylesheetInfo.stylesheet;
+	if (stylesheet && stylesheet.children) {
+		stylesheet.children.forEach(ruleData => {
+			if (ruleData.type == "Atrule" && ruleData.name == "import" && ruleData.prelude && ruleData.prelude.children && ruleData.prelude.children.head) {
+				const importedEntry = entriesByRules.get(ruleData.prelude.children.head.data.importedChildren);
+				if (importedEntry) {
+					importedEntries.push(importedEntry);
+				}
+			}
+		});
+	}
+	return importedEntries;
+}
+
 function getContentSize(content) {
 	return new Blob([content]).size;
 }

package/core/index.js

@@ -1343,10 +1343,11 @@ class Processor {
 			if (element.media) {
 				mediaText = element.media.toLowerCase();
 			}
-			const scoped = Boolean(element.closest("[" + SHADOWROOT_ATTRIBUTE_NAME + "]"));
+			const scope = element.closest("[" + SHADOWROOT_ATTRIBUTE_NAME + "]");
 			const stylesheetInfo = {
 				mediaText,
-				scoped
+				scoped: Boolean(scope),
+				scope
 			};
 			await this.processorHelper.resolveStylesheets(element, stylesheetInfo, this.stylesheets, this.baseURI, options, this.workStyleElement, this.resources);
 		}));

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

@@ -24,6 +24,8 @@
 import {
 	normalizeFontFamily,
 	getFontWeight,
+	getFontStretch,
+	getStylesheetsInCascadeOrder,
 	getDataURI
 } from "./../helper.js";
 import { serialize as serializeSrcset } from "./../../vendor/html-srcset-parser.js";
@@ -51,17 +53,6 @@ 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%"
-};
 const Blob = globalThis.Blob;
 const Image = globalThis.Image;
 const OffscreenCanvas = globalThis.OffscreenCanvas;
@@ -423,9 +414,12 @@ class ProcessorHelperCommon {
 	async removeAlternativeFonts(doc, stylesheets, fonts, fontTests) {
 		const fontsDetails = this.createFontsDetailsInfo();
 		const stats = { rules: { processed: 0, discarded: 0 }, fonts: { processed: 0, discarded: 0 } };
-		let sheetIndex = 0;
-		stylesheets.forEach(stylesheetInfo => {
+		const ruleScopes = new Map();
+		getStylesheetsInCascadeOrder(stylesheets).forEach(({ stylesheetInfo, index: sheetIndex }) => {
 			if (stylesheetInfo.stylesheet) {
+				if (stylesheetInfo.scope) {
+					cssTree.walk(stylesheetInfo.stylesheet, { visit: "Atrule", enter: node => ruleScopes.set(node, stylesheetInfo.scope) });
+				}
 				const cssRules = stylesheetInfo.stylesheet.children;
 				if (cssRules) {
 					stats.rules.processed += cssRules.size;
@@ -439,10 +433,9 @@ class ProcessorHelperCommon {
 					}
 				}
 			}
-			sheetIndex++;
 		});
 		processFontDetails(fontsDetails, fonts);
-		this.markRepeatedFontFaceRules(fontsDetails);
+		this.markRepeatedFontFaceRules(fontsDetails, ruleScopes, new Map());
 		await Promise.all([...stylesheets].map(async ([, stylesheetInfo], sheetIndex) => {
 			if (stylesheetInfo.stylesheet) {
 				const cssRules = stylesheetInfo.stylesheet.children;
@@ -460,19 +453,23 @@ class ProcessorHelperCommon {
 		return stats;
 	}
 
-	markRepeatedFontFaceRules(fontsDetails) {
+	markRepeatedFontFaceRules(fontsDetails, ruleScopes, scopeIds) {
 		const lastRules = new Map();
 		fontsDetails.fonts.forEach((fontInfo, ruleData) => {
-			const ruleKey = this.getFontKey(ruleData) + " " + this.getPropertyValue(ruleData, "src");
+			const scope = ruleScopes.get(ruleData);
+			if (scope && !scopeIds.has(scope)) {
+				scopeIds.set(scope, scopeIds.size + 1);
+			}
+			const ruleKey = (scope ? scopeIds.get(scope) : 0) + " " + 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));
+		fontsDetails.medias.forEach(mediaFontsDetails => this.markRepeatedFontFaceRules(mediaFontsDetails, ruleScopes, scopeIds));
+		fontsDetails.supports.forEach(supportsFontsDetails => this.markRepeatedFontFaceRules(supportsFontsDetails, ruleScopes, scopeIds));
+		fontsDetails.layers.forEach(layerFontsDetails => this.markRepeatedFontFaceRules(layerFontsDetails, ruleScopes, scopeIds));
 	}
 
 	async processFontFaceRules(cssRules, sheetIndex, fontsDetails, fonts, fontTests, stats) {
@@ -739,10 +736,6 @@ function getURL(urlFunction) {
 	return urlMatch && urlMatch[1];
 }
 
-function getFontStretch(stretch) {
-	return FONT_STRETCHES[stretch] || stretch;
-}
-
 async function resizeImage(doc, dataURI, { imageReductionFactor, imageQuality }, element) {
 	if (dataURI) {
 		const contentType = dataURI.substring(5, dataURI.indexOf(";"));

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

@@ -582,9 +582,15 @@ function getProcessorHelperClass(utilInstance) {
 		groupDuplicateFonts(stylesheets, fonts, options) {
 			if (options.usedFonts && options.usedFonts.length) {
 				const fontFaces = [];
+				const scopeIds = new Map();
 				stylesheets.forEach(stylesheetInfo => {
 					if (stylesheetInfo.stylesheet && stylesheetInfo.stylesheet.children) {
-						getFontFaces(stylesheetInfo.stylesheet.children, "", fontFaces);
+						const scope = stylesheetInfo.scope || null;
+						if (!scopeIds.has(scope)) {
+							scopeIds.set(scope, scopeIds.size);
+						}
+						const mediaScope = stylesheetInfo.mediaText ? "|media " + stylesheetInfo.mediaText : "";
+						getFontFaces(stylesheetInfo.stylesheet.children, scopeIds.get(scope) + mediaScope, fontFaces);
 					}
 				});
 				const families = new Map();

package/core/lib/processor-helper.js

@@ -216,7 +216,7 @@ function getProcessorHelperClass(utilInstance) {
 
 		async resolveImportURLs(stylesheetInfo, baseURI, options, workStylesheet, resources, stylesheets, importedStyleSheets = new Set(), stylesheetReferrer) {
 			const stylesheet = stylesheetInfo.stylesheet;
-			const scoped = stylesheetInfo.scoped;
+			const { scoped, scope } = stylesheetInfo;
 			this.resolveStylesheetURLs(stylesheet, baseURI, workStylesheet, stylesheetReferrer, options.stylesheetReferrers);
 			const imports = getImportFunctions(stylesheet);
 			await Promise.all(imports.map(async node => {
@@ -247,6 +247,7 @@ function getProcessorHelperClass(utilInstance) {
 							}
 							const stylesheetInfo = {
 								scoped,
+								scope,
 								mediaText,
 								layerName,
 								supportsCondition

package/modules/css-fonts-minifier.js

@@ -27,6 +27,8 @@ import {
 	normalizeFontFamily,
 	flatten,
 	getFontWeight,
+	getFontStretch,
+	getStylesheetsInCascadeOrder,
 	removeQuotes
 } from "./../core/helper.js";
 
@@ -34,20 +36,39 @@ const helper = {
 	normalizeFontFamily,
 	flatten,
 	getFontWeight,
+	getFontStretch,
+	getStylesheetsInCascadeOrder,
 	removeQuotes
 };
 
 const REGEXP_COMMA = /\s*,\s*/;
 const REGEXP_SPACES = /\s+/g;
-const REGEXP_FONT_STYLE_ANGLE = /-?\d*\.?\d+/g;
+const REGEXP_ANGLE = /^([-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)(deg|grad|rad|turn)?$/;
+const ANGLE_UNITS = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+const NORMAL_FONT_STYLE = "normal";
+const ITALIC_FONT_STYLE = "italic";
+const OBLIQUE_FONT_STYLE = "oblique";
 const DEFAULT_OBLIQUE_ANGLE = 14;
+const NORMAL_FONT_STRETCH = 100;
+const LOWER_WEIGHT_SEARCH_THRESHOLD = 400;
+const UPPER_WEIGHT_SEARCH_THRESHOLD = 500;
+const GECKO_REVERSE_STRETCH_DISTANCE = 1000;
+const GECKO_REVERSE_STYLE_DISTANCE = 100;
+const GECKO_NEGATE_STYLE_DISTANCE = 200;
+const GECKO_BAD_STYLE_DISTANCE = 700;
+const GECKO_REVERSE_WEIGHT_DISTANCE = 600;
+const GECKO_LIGHTER_WEIGHT_DISTANCE = 100;
+const FONT_MATCHING_ALGORITHMS = [
+	{ getStretchDistance: getWebKitStretchDistance, getStyleDistance: getWebKitStyleDistance, getWeightDistance: getWebKitWeightDistance },
+	{ getStretchDistance: getWebKitStretchDistance, getStyleDistance: getWebKitObliqueStyleDistance, getWeightDistance: getWebKitWeightDistance },
+	{ getStretchDistance: getGeckoStretchDistance, getStyleDistance: getGeckoStyleDistance, getWeightDistance: getGeckoWeightDistance }
+];
 const REGEXP_DASH = /-/;
 const REGEXP_QUESTION_MARK = /\?/g;
 const REGEXP_STARTS_U_PLUS = /^U\+/i;
 const REGEXP_CUSTOM_PROPERTY = /var\(\s*(--[^\s,)]+)\s*(?:,[^)]*)?\)/g;
 const REGEXP_CUSTOM_PROPERTY_FAMILY = /^var\(\s*(--[^\s,)]+)\s*(?:,(.*))?\)$/;
 const REGEXP_CUSTOM_PROPERTY_NAME = /^--/;
-const VALID_FONT_STYLES = [/^normal$/, /^italic$/, /^oblique$/, /^oblique\s+/];
 const NON_GLYPH_CHAR_CODES = [9, 10, 12, 13];
 const MAX_NON_GLYPH_CHAR_CODE = 13;
 // a family name kept when the "font" shorthand cannot be read: it resolves to nothing, so it
@@ -74,7 +95,7 @@ function process(doc, stylesheets, styles, options) {
 	});
 	styles.forEach(declarations => getCustomProperties(declarations.children, customProperties));
 	options = Object.assign({}, options, { customProperties });
-	stylesheets.forEach(stylesheetInfo => {
+	helper.getStylesheetsInCascadeOrder(stylesheets).forEach(({ stylesheetInfo }) => {
 		if (stylesheetInfo.stylesheet) {
 			const cssRules = stylesheetInfo.stylesheet.children;
 			if (cssRules) {
@@ -103,7 +124,7 @@ function process(doc, stylesheets, styles, options) {
 	// DOMParser, and that document is never rendered, so it reports nothing and every face it
 	// declares would be dropped
 	const usedFontsUnknown = !options.usedFonts || !options.usedFonts.length;
-	let unusedFonts, filteredUsedFonts;
+	let unusedFonts, filteredUsedFonts, selectedFonts;
 	if (usedFontsUnknown) {
 		unusedFonts = [];
 	} else {
@@ -125,14 +146,15 @@ function process(doc, stylesheets, styles, options) {
 				keepDeclaredFontIfRendered(fontInfo.fontFamily, fontsInfo, filteredUsedFonts, options));
 		}
 		unusedFonts = fontsInfo.declared.filter(fontInfo => !filteredUsedFonts.has(fontInfo.fontFamily));
+		selectedFonts = getSelectedFonts(fontsInfo.declared, filteredUsedFonts);
 	}
-	const docChars = Array.from(new Set(docContent)).map(char => char.charCodeAt(0)).sort((value1, value2) => value1 - value2);
+	const docChars = Array.from(new Set(docContent)).map(char => char.codePointAt(0)).sort((value1, value2) => value1 - value2);
 	const usedFontsCharacters = getUsedFontsCharacters(options);
 	stylesheets.forEach(stylesheetInfo => {
 		if (stylesheetInfo.stylesheet) {
 			const cssRules = stylesheetInfo.stylesheet.children;
 			if (cssRules) {
-				filterUnusedFonts(cssRules, fontsInfo.declared, unusedFonts, filteredUsedFonts, docChars, usedFontsCharacters);
+				filterUnusedFonts(cssRules, fontsInfo.declared, unusedFonts, selectedFonts, docChars, usedFontsCharacters);
 				stats.rules.discarded -= cssRules.size;
 			}
 		}
@@ -167,9 +189,10 @@ function getFontsInfo(cssRules, fontsInfo, options) {
 					const fontWeight = getDeclarationValue(ruleData.block.children, "font-weight") || "400";
 					const fontStyle = getDeclarationValue(ruleData.block.children, "font-style") || "normal";
 					const fontVariant = getDeclarationValue(ruleData.block.children, "font-variant") || "normal";
+					const fontStretch = getDeclarationValue(ruleData.block.children, "font-stretch") || "normal";
 					const unicodeRange = getDeclarationValue(ruleData.block.children, "unicode-range");
 					fontWeight.split(",").forEach(weightValue =>
-						fontsInfo.declared.push({ fontFamily, fontWeight: helper.getFontWeight(helper.removeQuotes(weightValue)), fontStyle, fontVariant, unicodeRange, ruleData }));
+						fontsInfo.declared.push({ fontFamily, fontWeight: helper.getFontWeight(helper.removeQuotes(weightValue)), fontStyle, fontVariant, fontStretch, unicodeRange, ruleData }));
 				}
 			}
 		}
@@ -296,14 +319,14 @@ function splitValues(value) {
 	return values;
 }
 
-function filterUnusedFonts(cssRules, declaredFonts, unusedFonts, filteredUsedFonts, docChars, usedFontsCharacters) {
+function filterUnusedFonts(cssRules, declaredFonts, unusedFonts, selectedFonts, docChars, usedFontsCharacters) {
 	const removedRules = [];
 	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) {
-			filterUnusedFonts(ruleData.prelude.children.head.data.importedChildren, declaredFonts, unusedFonts, filteredUsedFonts, docChars, usedFontsCharacters);
+			filterUnusedFonts(ruleData.prelude.children.head.data.importedChildren, declaredFonts, unusedFonts, selectedFonts, docChars, usedFontsCharacters);
 		} else if (ruleData.type == "Atrule" && (ruleData.name == "media" || ruleData.name == "supports" || ruleData.name == "layer" || ruleData.name == "container") && ruleData.block && ruleData.block.children) {
-			filterUnusedFonts(ruleData.block.children, declaredFonts, unusedFonts, filteredUsedFonts, docChars, usedFontsCharacters);
+			filterUnusedFonts(ruleData.block.children, declaredFonts, unusedFonts, selectedFonts, docChars, usedFontsCharacters);
 		} else if (ruleData.type == "Atrule" && ruleData.name == "font-face") {
 			const fontFamily = helper.normalizeFontFamily(getDeclarationValue(ruleData.block.children, "font-family"));
 			if (fontFamily) {
@@ -312,8 +335,8 @@ function filterUnusedFonts(cssRules, declaredFonts, unusedFonts, filteredUsedFon
 				if (unusedFonts.find(fontInfo => fontInfo.fontFamily == fontFamily) ||
 					!testUnicodeRange(docChars, unicodeRange) ||
 					!testReachableUnicodeRange(docChars, unicodeRange, laterUnicodeRanges) ||
-					!testDrawnUnicodeRange(ruleData, fontFamily, unicodeRange, usedFontsCharacters) ||
-					!testUsedFont(ruleData, fontFamily, declaredFonts, filteredUsedFonts)) {
+					!testDrawnUnicodeRange(ruleData, fontFamily, unicodeRange, usedFontsCharacters, selectedFonts) ||
+					!testUsedFont(ruleData, fontFamily, selectedFonts)) {
 					removedRules.push(cssRule);
 				}
 			}
@@ -346,7 +369,7 @@ function getUsedFontsCharacters(options) {
 	return usedFontsCharacters;
 }
 
-function testDrawnUnicodeRange(ruleData, familyName, unicodeRange, usedFontsCharacters) {
+function testDrawnUnicodeRange(ruleData, familyName, unicodeRange, usedFontsCharacters, selectedFonts) {
 	if (!unicodeRange || !usedFontsCharacters || !usedFontsCharacters.size) {
 		return true;
 	}
@@ -354,11 +377,11 @@ function testDrawnUnicodeRange(ruleData, familyName, unicodeRange, usedFontsChar
 	if (!buckets || !buckets.length) {
 		return true;
 	}
-	const fontStyle = getDeclarationValue(ruleData.block.children, "font-style") || "normal";
-	if (!VALID_FONT_STYLES.find(rule => fontStyle.trim().match(rule))) {
+	const selection = selectedFonts && selectedFonts.get(familyName);
+	if (!selection || !selection.candidates.has(ruleData) || buckets.find(bucket => !selection.rulesByStyle.has(bucket.fontStyle))) {
 		return true;
 	}
-	const matchedBuckets = buckets.filter(bucket => testFontStyle(bucket.fontStyle, fontStyle));
+	const matchedBuckets = buckets.filter(bucket => selection.rulesByStyle.get(bucket.fontStyle).has(ruleData));
 	if (!matchedBuckets.length || matchedBuckets.find(bucket => bucket.unknown)) {
 		return true;
 	}
@@ -396,93 +419,242 @@ function testDrawnGlyph(drawnRange, range) {
 	return false;
 }
 
-function testUsedFont(ruleData, familyName, declaredFonts, filteredUsedFonts) {
-	let test;
-	const optionalUsedFonts = filteredUsedFonts && filteredUsedFonts.get(familyName);
-	if (optionalUsedFonts && optionalUsedFonts.length) {
-		const fontStyle = getDeclarationValue(ruleData.block.children, "font-style") || "normal";
-		if (VALID_FONT_STYLES.find(rule => fontStyle.trim().match(rule))) {
-			const fontWeight = helper.getFontWeight(getDeclarationValue(ruleData.block.children, "font-weight") || "400");
-			const declaredFontsWeights = declaredFonts
-				.filter(fontInfo => fontInfo.fontFamily == familyName && testFontStyle(fontInfo.fontStyle, fontStyle))
-				.map(fontInfo => fontInfo.fontWeight.split(" "))
-				.sort((weight1, weight2) => Number.parseInt(weight1[0], 10) - Number.parseInt(weight2[0], 10));
-			let usedFontWeights = optionalUsedFonts
-				.map(fontInfo => getUsedFontWeight(fontInfo, fontStyle, declaredFontsWeights))
-				.filter(fontWeight => fontWeight);
-			test = testFontweight(fontWeight, usedFontWeights);
-			if (!test) {
-				usedFontWeights = optionalUsedFonts
-					.map(fontInfo => {
-						fontInfo = Array.from(fontInfo);
-						fontInfo[2] = "normal";
-						return getUsedFontWeight(fontInfo, fontStyle, declaredFontsWeights);
-					})
-					.filter(fontWeight => fontWeight);
-				test = testFontweight(fontWeight, usedFontWeights);
+function testUsedFont(ruleData, familyName, selectedFonts) {
+	const selection = selectedFonts && selectedFonts.get(familyName);
+	return !selection || !selection.candidates.has(ruleData) || selection.rules.has(ruleData);
+}
+
+function getSelectedFonts(declaredFonts, filteredUsedFonts) {
+	const selectedFonts = new Map();
+	filteredUsedFonts.forEach((usedFonts, familyName) => {
+		const fonts = declaredFonts
+			.filter(fontInfo => fontInfo.fontFamily == familyName)
+			.map(fontInfo => ({
+				ruleData: fontInfo.ruleData,
+				weight: parseFontWeight(fontInfo.fontWeight),
+				style: parseFontStyle(fontInfo.fontStyle),
+				stretch: parseFontStretch(fontInfo.fontStretch)
+			}))
+			.filter(fontInfo => fontInfo.weight && fontInfo.style && fontInfo.stretch);
+		const selection = { candidates: new Set(fonts.map(fontInfo => fontInfo.ruleData)), rules: new Set(), rulesByStyle: new Map() };
+		usedFonts.forEach(([, fontWeight, fontStyle, , fontStretch]) => {
+			let styleRules = selection.rulesByStyle.get(fontStyle);
+			if (!styleRules) {
+				styleRules = new Set();
+				selection.rulesByStyle.set(fontStyle, styleRules);
 			}
+			FONT_MATCHING_ALGORITHMS.forEach(algorithm => selectFonts(fonts, fontWeight, fontStyle, fontStretch, algorithm).forEach(fontInfo => {
+				styleRules.add(fontInfo.ruleData);
+				selection.rules.add(fontInfo.ruleData);
+			}));
+		});
+		selectedFonts.set(familyName, selection);
+	});
+	return selectedFonts;
+}
+
+function selectFonts(fonts, fontWeight, fontStyle, fontStretch, algorithm) {
+	const stretchBounds = getBounds(fonts.map(fontInfo => fontInfo.stretch));
+	const styleBounds = getBounds(fonts.map(fontInfo => fontInfo.style.range));
+	const weightBounds = getBounds(fonts.map(fontInfo => fontInfo.weight));
+	const stretch = fontStretch && parseFontStretch(fontStretch);
+	if (fonts.length && stretch && stretch[0] == stretch[1]) {
+		fonts = filterFonts(fonts, fontInfo => fontInfo.stretch, fontInfo => algorithm.getStretchDistance(fontInfo.stretch, stretch[0], stretchBounds));
+	}
+	const style = fontStyle && parseFontStyle(fontStyle);
+	if (fonts.length && style && style.range[0] == style.range[1]) {
+		fonts = filterFonts(fonts, fontInfo => fontInfo.style.range, fontInfo => algorithm.getStyleDistance(fontInfo.style, style, styleBounds));
+	}
+	const weight = fontWeight && parseFontWeight(String(fontWeight));
+	if (fonts.length && weight && weight[0] == weight[1]) {
+		fonts = filterFonts(fonts, fontInfo => fontInfo.weight, fontInfo => algorithm.getWeightDistance(fontInfo.weight, weight[0], weightBounds));
+	}
+	return fonts;
+}
+
+function filterFonts(fonts, getRange, getDistance) {
+	const results = fonts.map(getDistance);
+	const distance = Math.min(...results.map(result => result.distance));
+	const values = results
+		.filter(result => result.distance == distance && result.value !== undefined)
+		.map(result => result.value);
+	return fonts.filter((fontInfo, index) => results[index].distance == distance || values.some(value => testRange(getRange(fontInfo), value)));
+}
+
+function getBounds(ranges) {
+	return [Math.min(...ranges.map(([min]) => min)), Math.max(...ranges.map(([, max]) => max))];
+}
+
+function getWebKitStretchDistance([min, max], stretch, [boundsMin, boundsMax]) {
+	if (testRange([min, max], stretch)) {
+		return { distance: 0, value: stretch };
+	} else if (stretch > NORMAL_FONT_STRETCH) {
+		return min > stretch ? { distance: min - stretch, value: min } : { distance: Math.max(stretch, boundsMax) - max, value: max };
+	} else {
+		return max < stretch ? { distance: stretch - max, value: max } : { distance: min - Math.min(stretch, boundsMin), value: min };
+	}
+}
+
+function getWebKitStyleDistance({ range: [min, max] }, { range: [slope] }, [boundsMin, boundsMax]) {
+	if (testRange([min, max], slope)) {
+		return { distance: 0, value: slope };
+	} else if (slope >= DEFAULT_OBLIQUE_ANGLE) {
+		return min > slope ? { distance: min - slope, value: min } : { distance: Math.max(slope, boundsMax) - max, value: max };
+	} else if (slope >= 0) {
+		if (max >= 0 && max < slope) {
+			return { distance: slope - max, value: max };
 		} else {
-			test = true;
+			return min > slope ? { distance: min, value: min } : { distance: Math.max(slope, boundsMax) - max, value: max };
+		}
+	} else if (slope > -DEFAULT_OBLIQUE_ANGLE) {
+		if (min > slope && min <= 0) {
+			return { distance: min - slope, value: min };
+		} else {
+			return max < slope ? { distance: -max, value: max } : { distance: min - Math.min(slope, boundsMin), value: min };
 		}
 	} else {
-		test = true;
+		return max < slope ? { distance: slope - max, value: max } : { distance: min - Math.min(slope, boundsMin), value: min };
 	}
-	return test;
 }
 
-function testFontStyle(fontStyle, otherFontStyle) {
-	const angles = getFontStyleAngles(fontStyle);
-	const otherAngles = getFontStyleAngles(otherFontStyle);
-	if (angles && otherAngles) {
-		return angles[0] <= otherAngles[1] && otherAngles[0] <= angles[1];
+function getWebKitObliqueStyleDistance(fontStyle, style, bounds) {
+	if (fontStyle.italic && !style.italic) {
+		return { distance: Infinity };
 	} else {
-		return normalizeFontStyle(fontStyle) == normalizeFontStyle(otherFontStyle);
+		return getWebKitStyleDistance(fontStyle, style, bounds);
 	}
 }
 
-function getFontStyleAngles(fontStyle) {
-	fontStyle = normalizeFontStyle(fontStyle);
-	if (fontStyle == "normal") {
-		return [0, 0];
-	} else if (fontStyle == "italic") {
-		return [DEFAULT_OBLIQUE_ANGLE, DEFAULT_OBLIQUE_ANGLE];
-	} else if (fontStyle == "oblique" || fontStyle.startsWith("oblique ")) {
-		const angles = (fontStyle.match(REGEXP_FONT_STYLE_ANGLE) || [])
-			.map(angle => Number.parseFloat(angle))
-			.filter(angle => !Number.isNaN(angle));
-		return angles.length ? [Math.min(...angles), Math.max(...angles)] : [DEFAULT_OBLIQUE_ANGLE, DEFAULT_OBLIQUE_ANGLE];
+function getWebKitWeightDistance([min, max], weight, [boundsMin, boundsMax]) {
+	if (testRange([min, max], weight)) {
+		return { distance: 0, value: weight };
+	} else if (weight >= LOWER_WEIGHT_SEARCH_THRESHOLD && weight <= UPPER_WEIGHT_SEARCH_THRESHOLD) {
+		if (min > weight && min <= UPPER_WEIGHT_SEARCH_THRESHOLD) {
+			return { distance: min - weight, value: min };
+		} else {
+			return max < weight ? { distance: UPPER_WEIGHT_SEARCH_THRESHOLD - max, value: max } : { distance: min - Math.min(weight, boundsMin), value: min };
+		}
+	} else if (weight < LOWER_WEIGHT_SEARCH_THRESHOLD) {
+		return max < weight ? { distance: weight - max, value: max } : { distance: min - Math.min(weight, boundsMin), value: min };
+	} else {
+		return min > weight ? { distance: min - weight, value: min } : { distance: Math.max(weight, boundsMax) - max, value: max };
 	}
 }
 
-function normalizeFontStyle(fontStyle) {
-	return String(fontStyle || "normal").trim().toLowerCase().replace(REGEXP_SPACES, " ");
+function getGeckoStretchDistance([min, max], stretch) {
+	if (stretch < min) {
+		return { distance: min - stretch + (stretch > NORMAL_FONT_STRETCH ? 0 : GECKO_REVERSE_STRETCH_DISTANCE) };
+	} else if (stretch > max) {
+		return { distance: stretch - max + (stretch <= NORMAL_FONT_STRETCH ? 0 : GECKO_REVERSE_STRETCH_DISTANCE) };
+	} else {
+		return { distance: 0 };
+	}
 }
 
-function testFontweight(fontWeight, usedFontWeights) {
-	let test;
-	for (const fontWeightValue of fontWeight.split(",")) {
-		let { min: fontWeightMin, max: fontWeightMax } = parseFontWeight(fontWeightValue);
-		if (!fontWeightMax) {
-			fontWeightMax = fontWeightMin;
+function getGeckoStyleDistance({ italic, range: [min, max] }, style) {
+	const [angle] = style.range;
+	if (italic ? style.italic : !style.italic && (angle == min || angle == max)) {
+		return { distance: 0 };
+	} else if (!style.italic && angle == 0) {
+		if (italic) {
+			return { distance: GECKO_BAD_STYLE_DISTANCE };
+		} else if (min >= 0) {
+			return { distance: min };
+		} else {
+			return { distance: max >= 0 ? 0 : GECKO_NEGATE_STYLE_DISTANCE - max };
 		}
-		test = test || usedFontWeights.find(usedFontWeight => {
-			let { min: usedFontWeightMin, max: usedFontWeightMax } = parseFontWeight(usedFontWeight);
-			if (!usedFontWeightMax) {
-				usedFontWeightMax = usedFontWeightMin;
-			}
-			return usedFontWeightMin >= fontWeightMin && usedFontWeightMax <= fontWeightMax;
-		});
+	} else if (style.italic) {
+		if (min >= DEFAULT_OBLIQUE_ANGLE) {
+			return { distance: min - DEFAULT_OBLIQUE_ANGLE + 1 };
+		} else if (max >= DEFAULT_OBLIQUE_ANGLE) {
+			return { distance: 1 };
+		} else {
+			return { distance: (max > 0 ? GECKO_REVERSE_STYLE_DISTANCE : GECKO_REVERSE_STYLE_DISTANCE + GECKO_NEGATE_STYLE_DISTANCE) + DEFAULT_OBLIQUE_ANGLE - max };
+		}
+	} else if (italic) {
+		return { distance: GECKO_BAD_STYLE_DISTANCE };
+	} else if (angle >= DEFAULT_OBLIQUE_ANGLE || angle <= -DEFAULT_OBLIQUE_ANGLE) {
+		const sign = Math.sign(angle);
+		const [signedMin, signedMax] = sign > 0 ? [min, max] : [-max, -min];
+		const signedAngle = sign * angle;
+		if (signedMin >= signedAngle) {
+			return { distance: signedMin - signedAngle };
+		} else if (signedMax >= signedAngle) {
+			return { distance: 0 };
+		} else {
+			return { distance: (signedMax > 0 ? GECKO_REVERSE_STYLE_DISTANCE : GECKO_REVERSE_STYLE_DISTANCE + GECKO_NEGATE_STYLE_DISTANCE) + signedAngle - signedMax };
+		}
+	} else {
+		const sign = angle > 0 ? 1 : -1;
+		const [signedMin, signedMax] = sign > 0 ? [min, max] : [-max, -min];
+		const signedAngle = sign * angle;
+		if (signedMin > signedAngle) {
+			return { distance: GECKO_REVERSE_STYLE_DISTANCE + signedMin - signedAngle };
+		} else if (signedMax >= signedAngle) {
+			return { distance: 0 };
+		} else {
+			return { distance: (signedMax > 0 ? 0 : GECKO_REVERSE_STYLE_DISTANCE + GECKO_NEGATE_STYLE_DISTANCE) + signedAngle - signedMax };
+		}
+	}
+}
+
+function getGeckoWeightDistance([min, max], weight) {
+	if (testRange([min, max], weight)) {
+		return { distance: 0 };
+	} else if (weight < LOWER_WEIGHT_SEARCH_THRESHOLD) {
+		return { distance: max < weight ? weight - max : min - weight + GECKO_REVERSE_WEIGHT_DISTANCE };
+	} else if (weight > UPPER_WEIGHT_SEARCH_THRESHOLD) {
+		return { distance: min > weight ? min - weight : weight - max + GECKO_REVERSE_WEIGHT_DISTANCE };
+	} else if (min > weight) {
+		return { distance: min - weight + (min <= UPPER_WEIGHT_SEARCH_THRESHOLD ? 0 : GECKO_REVERSE_WEIGHT_DISTANCE) };
+	} else {
+		return { distance: weight - max + GECKO_LIGHTER_WEIGHT_DISTANCE };
 	}
-	return test;
+}
+
+function testRange([min, max], value) {
+	return min <= value && value <= max;
 }
 
 function parseFontWeight(fontWeight) {
-	const fontWeightValues = fontWeight.split(" ");
-	const min = Number.parseInt(helper.getFontWeight(fontWeightValues[0]), 10);
-	const max = fontWeightValues[1] && Number.parseInt(helper.getFontWeight(fontWeightValues[1]), 10);
-	return {
-		min, max
-	};
+	return parseRange(fontWeight, value => Number(helper.getFontWeight(value)));
+}
+
+function parseFontStretch(fontStretch) {
+	return parseRange(fontStretch, value => {
+		value = helper.getFontStretch(value.toLowerCase());
+		return value.endsWith("%") ? Number(value.slice(0, -1)) : NaN;
+	});
+}
+
+function parseFontStyle(fontStyle) {
+	const values = String(fontStyle).trim().toLowerCase().split(REGEXP_SPACES);
+	if (values.length == 1 && values[0] == NORMAL_FONT_STYLE) {
+		return { italic: false, range: [0, 0] };
+	} else if (values.length == 1 && values[0] == ITALIC_FONT_STYLE) {
+		return { italic: true, range: [DEFAULT_OBLIQUE_ANGLE, DEFAULT_OBLIQUE_ANGLE] };
+	} else if (values[0] == OBLIQUE_FONT_STYLE) {
+		const range = values.length == 1 ? [DEFAULT_OBLIQUE_ANGLE, DEFAULT_OBLIQUE_ANGLE] : parseRange(values.slice(1).join(" "), parseAngle);
+		if (range) {
+			return { italic: false, range };
+		}
+	}
+}
+
+function parseAngle(angle) {
+	const match = angle.match(REGEXP_ANGLE);
+	if (match && (match[2] || Number(match[1]) == 0)) {
+		return Number(match[1]) * ANGLE_UNITS[match[2] || "deg"];
+	} else {
+		return NaN;
+	}
+}
+
+function parseRange(value, parseValue) {
+	const values = String(value).trim().split(REGEXP_SPACES).map(parseValue);
+	if (values.length && values.length <= 2 && values.every(Number.isFinite)) {
+		return [Math.min(...values), Math.max(...values)];
+	}
 }
 
 function getDeclarationValue(declarations, propertyName) {
@@ -595,51 +767,6 @@ function parseFamilyNames(fontFamilyNameTokenData, fontFamilyNames) {
 	}
 }
 
-function getUsedFontWeight(fontInfo, fontStyle, fontWeights) {
-	let foundWeight;
-	fontWeights = fontWeights.map(weights => weights.map(value => String(Number.parseInt(value, 10))));
-	if (testFontStyle(fontInfo[2], fontStyle)) {
-		let fontWeight = Number(fontInfo[1]);
-		if (fontWeights.length > 1) {
-			if (fontWeight >= 400 && fontWeight <= 500) {
-				foundWeight = fontWeights.find(weights => weights[0] >= fontWeight && weights[0] <= 500);
-				if (!foundWeight) {
-					foundWeight = findDescendingFontWeight(fontWeight, fontWeights);
-				}
-				if (!foundWeight) {
-					foundWeight = findAscendingFontWeight(fontWeight, fontWeights);
-				}
-			}
-			if (fontWeight < 400) {
-				foundWeight = fontWeights.slice().reverse().find(weights => weights[weights.length - 1] <= fontWeight);
-				if (!foundWeight) {
-					foundWeight = findAscendingFontWeight(fontWeight, fontWeights);
-				}
-			}
-			if (fontWeight > 500) {
-				foundWeight = fontWeights.find(weights => weights[0] >= fontWeight);
-				if (!foundWeight) {
-					foundWeight = findDescendingFontWeight(fontWeight, fontWeights);
-				}
-			}
-			if (!foundWeight) {
-				foundWeight = fontWeights.find(weights => weights[0] <= fontWeight && weights[weights.length - 1] >= fontWeight);
-			}
-		} else {
-			foundWeight = fontWeights[0];
-		}
-	}
-	return foundWeight ? foundWeight.join(" ") : undefined;
-}
-
-function findDescendingFontWeight(fontWeight, fontWeights) {
-	return fontWeights.slice().reverse().find(weights => weights[weights.length - 1] < fontWeight);
-}
-
-function findAscendingFontWeight(fontWeight, fontWeights) {
-	return fontWeights.find(weights => weights[0] > fontWeight);
-}
-
 function getRulesTextContent(doc, cssRules, workStylesheet, content) {
 	cssRules.forEach(ruleData => {
 		if (ruleData.block && ruleData.block.children && ruleData.prelude && ruleData.prelude.children) {
@@ -710,13 +837,14 @@ function getLaterUnicodeRanges(declaredFonts, ruleData) {
 	if (index == -1) {
 		return [];
 	}
-	const { fontFamily, fontWeight, fontStyle } = declaredFonts[index];
+	const { fontFamily, fontWeight, fontStyle, fontStretch } = declaredFonts[index];
 	return declaredFonts
 		.slice(index + 1)
 		.filter(fontInfo => fontInfo.ruleData != ruleData &&
 			fontInfo.fontFamily == fontFamily &&
 			fontInfo.fontWeight == fontWeight &&
-			fontInfo.fontStyle == fontStyle)
+			fontInfo.fontStyle == fontStyle &&
+			fontInfo.fontStretch == fontStretch)
 		.map(fontInfo => fontInfo.unicodeRange);
 }
 

package/package.json

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

package/vendor/css-font-property-parser.js

@@ -121,9 +121,22 @@ const FONT_DESCRIPTOR_KEYS = new Set([
 	"stretch"
 ]);
 
+const ANGLE_UNITS = new Set([
+	"deg",
+	"grad",
+	"rad",
+	"turn"
+]);
+
 const OPERATOR_TYPE = "Operator";
 const IDENTIFIER_TYPE = "Identifier";
+const NUMBER_TYPE = "Number";
+const DIMENSION_TYPE = "Dimension";
+const FUNCTION_TYPE = "Function";
 const NORMAL_KEYWORD = "normal";
+const OBLIQUE_KEYWORD = "oblique";
+const MIN_FONT_WEIGHT = 1;
+const MAX_FONT_WEIGHT = 1000;
 const LINE_HEIGHT_SEPARATOR = "/";
 const FAMILY_SEPARATOR = ",";
 
@@ -142,7 +155,24 @@ function parse(value) {
 	if (GLOBAL_KEYWORDS.has(stringValueLower)) {
 		return { global: stringValue };
 	}
-	const tokens = value.children;
+	const fonts = [];
+	let parseError;
+	[true, false].forEach(descriptorsFirst => {
+		try {
+			fonts.push(parseFont(value.children, descriptorsFirst));
+		} catch (error) {
+			parseError = error;
+		}
+	});
+	if (!fonts.length) {
+		throw parseError;
+	}
+	const [font] = fonts;
+	font.family = Array.from(new Set(fonts.flatMap(parsedFont => parsedFont.family)));
+	return font;
+}
+
+function parseFont(tokens, descriptorsFirst) {
 	const font = {
 		lineHeight: NORMAL_KEYWORD,
 		stretch: NORMAL_KEYWORD,
@@ -154,7 +184,8 @@ function parse(value) {
 	for (let tokenNode = tokens.head; tokenNode; tokenNode = tokenNode.next) {
 		const tokenRaw = tokenNode.data.name || tokenNode.data.value || cssTree.generate(tokenNode.data);
 		const token = tokenRaw.toLowerCase();
-		if (token === NORMAL_KEYWORD) {
+		const keyword = tokenNode.data.type == IDENTIFIER_TYPE || tokenNode.data.type == NUMBER_TYPE;
+		if (keyword && token === NORMAL_KEYWORD) {
 			FONT_DESCRIPTOR_KEYS.forEach((prop) => {
 				if (!seen[prop]) {
 					font[prop] = tokenRaw;
@@ -162,28 +193,38 @@ function parse(value) {
 			});
 			continue;
 		}
-		if (FONT_WEIGHT_KEYWORDS.has(token)) {
+		if (keyword && FONT_WEIGHT_KEYWORDS.has(token)) {
 			if (!seen.weight) {
 				font.weight = tokenRaw;
 				seen.weight = true;
 			}
 			continue;
 		}
-		if (FONT_STYLE_KEYWORDS.has(token)) {
+		if (descriptorsFirst && !seen.weight && ((tokenNode.data.type == NUMBER_TYPE && Number(token) >= MIN_FONT_WEIGHT && Number(token) <= MAX_FONT_WEIGHT) || tokenNode.data.type == FUNCTION_TYPE)) {
+			font.weight = tokenRaw;
+			seen.weight = true;
+			continue;
+		}
+		if (keyword && FONT_STYLE_KEYWORDS.has(token)) {
 			if (!seen.style) {
 				font.style = tokenRaw;
 				seen.style = true;
+				const nextToken = tokenNode.next && tokenNode.next.data;
+				if (token == OBLIQUE_KEYWORD && nextToken && ((nextToken.type == DIMENSION_TYPE && ANGLE_UNITS.has(nextToken.unit.toLowerCase())) || (descriptorsFirst && nextToken.type == FUNCTION_TYPE))) {
+					font.style += " " + cssTree.generate(nextToken);
+					tokenNode = tokenNode.next;
+				}
 			}
 			continue;
 		}
-		if (FONT_VARIANT_KEYWORDS.has(token)) {
+		if (keyword && FONT_VARIANT_KEYWORDS.has(token)) {
 			if (!seen.variant) {
 				font.variant = tokenRaw;
 				seen.variant = true;
 			}
 			continue;
 		}
-		if (FONT_STRETCH_KEYWORDS.has(token)) {
+		if (keyword && FONT_STRETCH_KEYWORDS.has(token)) {
 			if (!seen.stretch) {
 				font.stretch = tokenRaw;
 				seen.stretch = true;