single-file-core 1.6.19 → 1.6.21

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