single-file-core 1.6.6 → 1.6.8

package/core/index.js

@@ -146,7 +146,8 @@ const STAGES = [{
 }, {
 	sequential: [
 		{ option: "removeAlternativeImages", action: "removeAlternativeImages" },
-		{ action: "groupDuplicateFonts" }
+		{ action: "groupDuplicateFonts" },
+		{ action: "groupDuplicateImages" }
 	],
 	parallel: [
 		{ option: "removeAlternativeFonts", action: "removeAlternativeFonts" },
@@ -434,9 +435,11 @@ const SCRIPT_OPTIONS = "data-single-file-options";
 const JAVASCRIPT_URI_PROTOCOL = "javascript:";
 const DISABLED_SCRIPT_URI = "javascript:void(0)";
 const SCRIPT_URI_ATTRIBUTE_NAMES = ["href", "src", "action", "formaction", "data"];
+const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
 const UTF8_CHARSET = "utf-8";
 const TAINTED_CANVAS_WARNING_MESSAGE = "SingleFile: canvas elements tainted by a cross-origin resource, dropped from the page:";
 const EMPTY_RESOURCE = "data:,";
+const ORDER_DEPENDENT_RULE = /@(layer|import)\b/i;
 
 class Processor {
 	constructor(options, processorHelper, batchRequest) {
@@ -1274,23 +1277,32 @@ class Processor {
 	}
 
 	async resolveStylesheetsURLs() {
-		const stylesContents = [];
+		const styleElementGroups = new Map();
 		this.options.inlineStylesheets = new Map();
 		this.options.inlineStylesheetsRefs = new Map();
 		this.doc.querySelectorAll("style").forEach(styleElement => {
-			if (styleElement.textContent) {
-				const indexContent = stylesContents.indexOf(styleElement.textContent);
-				if (indexContent == -1) {
-					this.options.inlineStylesheets.set(stylesContents.length, {
-						styleElement,
-						content: styleElement.textContent
-					});
-					stylesContents.push(styleElement.textContent);
-				} else {
-					this.options.inlineStylesheetsRefs.set(styleElement, indexContent);
+			const content = styleElement.textContent;
+			if (content) {
+				if (!styleElementGroups.has(content)) {
+					styleElementGroups.set(content, []);
 				}
+				styleElementGroups.get(content).push(styleElement);
 			}
 		});
+		let indexContent = 0;
+		styleElementGroups.forEach((styleElements, content) => {
+			const masterIndex = ORDER_DEPENDENT_RULE.test(content) ? 0 : styleElements.length - 1;
+			this.options.inlineStylesheets.set(indexContent, {
+				styleElement: styleElements[masterIndex],
+				content
+			});
+			styleElements.forEach((styleElement, index) => {
+				if (index != masterIndex) {
+					this.options.inlineStylesheetsRefs.set(styleElement, indexContent);
+				}
+			});
+			indexContent++;
+		});
 		await Promise.all(Array.from(this.doc.querySelectorAll("style, link[rel*=stylesheet]:not([disabled])")).map(async element => {
 			const options = Object.assign({}, this.options, { charset: this.charset });
 			let mediaText;
@@ -1556,6 +1568,10 @@ class Processor {
 		this.processorHelper.groupDuplicateFonts(this.stylesheets, this.resources.fonts, this.options);
 	}
 
+	groupDuplicateImages() {
+		this.processorHelper.groupDuplicateImages(this.doc, this.stylesheets, this.styles, this.resources.images);
+	}
+
 	async removeAlternativeFonts() {
 		await this.processorHelper.removeAlternativeFonts(this.doc, this.stylesheets, this.resources.fonts, this.options.fontTests);
 	}
@@ -1747,13 +1763,15 @@ function isScriptURI(value) {
 }
 
 function getOnEventAttributeNames(doc) {
-	const element = doc.body || doc.createElement("div");
+	const elements = [doc.body || doc.createElement("div"), doc.createElementNS(SVG_NAMESPACE_URI, "animate")];
 	const attributeNames = [];
-	for (const propertyName in element) {
-		if (propertyName.startsWith("on")) {
-			attributeNames.push(propertyName);
+	elements.forEach(element => {
+		for (const propertyName in element) {
+			if (propertyName.startsWith("on")) {
+				attributeNames.push(propertyName);
+			}
 		}
-	}
+	});
 	return attributeNames;
 }
 

package/core/infobar.js

@@ -157,7 +157,7 @@ const INFOBAR_ANIMATIONS_STYLES = `
   animation-iteration-count: 2;
 }
 
-.infobar:not(:focus-within):not(.infobar-focus)::after {
+.infobar::after {
   content: "";
   position: absolute;
   inset: -2px;
@@ -170,6 +170,12 @@ const INFOBAR_ANIMATIONS_STYLES = `
   animation-timing-function: ease-out;
   animation-delay: 2s;
   animation-iteration-count: 3;
+  transition: visibility 0s 999999s;
+}
+
+.infobar:focus-within::after, .infobar.infobar-focus::after {
+  visibility: hidden;
+  transition-delay: 0s;
 }
 
 @keyframes flash {
@@ -194,7 +200,7 @@ const INFOBAR_ANIMATIONS_STYLES = `
 
 @media (prefers-reduced-motion: reduce) {
   .infobar,
-  .infobar:not(:focus-within):not(.infobar-focus)::after {
+  .infobar::after {
     animation-name: none;
   }
 }

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

@@ -486,6 +486,9 @@ class ProcessorHelperCommon {
 	groupDuplicateFonts() {
 	}
 
+	groupDuplicateImages() {
+	}
+
 	getFontsDetails(doc, cssRules, sheetIndex, mediaFontsDetails) {
 		let mediaIndex = 0, supportsIndex = 0, layerIndex = 0;
 		cssRules.forEach(ruleData => {

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

@@ -127,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;

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, stylesheet });
-				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 }) => {
@@ -200,7 +218,8 @@ function getProcessorHelperClass(utilInstance) {
 								layerName,
 								supportsCondition
 							};
-							stylesheets.set({ urlNode }, stylesheetInfo);
+							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;
@@ -260,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) {
@@ -294,12 +313,54 @@ function getProcessorHelperClass(utilInstance) {
 			if (canonicalNames.size) {
 				stylesheets.forEach(stylesheetInfo => {
 					if (stylesheetInfo.stylesheet) {
-						getUrlFunctions(stylesheetInfo.stylesheet).forEach(urlNode => replaceFontName(urlNode, canonicalNames));
+						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 => {
@@ -594,6 +655,26 @@ function getProcessorHelperClass(utilInstance) {
 	};
 }
 
+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;
@@ -606,7 +687,7 @@ function testSameContent(content, otherContent) {
 	return true;
 }
 
-function replaceFontName(urlNode, canonicalNames) {
+function replaceResourceName(urlNode, canonicalNames) {
 	canonicalNames.forEach((canonicalName, name) => {
 		if (urlNode.value == name) {
 			urlNode.value = canonicalName;

package/modules/css-rules-minifier.js

@@ -58,6 +58,7 @@ const PARSE_CSS_ERROR_MESSAGE = "Failed to parse CSS";
 const QSA_ERROR_MESSAGE = "Failed to match selector";
 const PRELUDE_SEPARATOR = ",";
 const NESTING_SELECTOR = "&";
+const SCOPE_PSEUDO_CLASS = ":scope";
 const VENDOR_PREFIX = "-";
 const CUSTOM_PROPERTY_PREFIX = "--";
 const LAYER_NAME_SEPARATOR = ".";
@@ -388,7 +389,7 @@ function minifyStylesheetRule(ruleData, cssRule, stylesheets, processingContext,
 
 function processSelectors(ruleData, processingContext, docContext) {
 	const removedSelectors = [];
-	const { ancestorsSelectors } = processingContext;
+	const { ancestorsSelectors, scopeStack } = processingContext;
 	for (let selector = ruleData.prelude.children.head, selectorIndex = 0; selector; selector = selector.next, selectorIndex++) {
 		const {
 			startsWithCombinator,
@@ -400,7 +401,8 @@ function processSelectors(ruleData, processingContext, docContext) {
 		}
 		registerSelector(selector, ruleData, processingContext, docContext);
 		if (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length) {
-			const matchedElements = matchElements(selector, ancestorsSelectors, processingContext.scopeStack, docContext);
+			const relativeToScope = startsWithCombinator && Boolean(scopeStack && scopeStack.length);
+			const matchedElements = matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope);
 			if (matchedElements.length) {
 				if (!hasUnqueryableSelector) {
 					updateMatchingSelectors(matchedElements, selector, docContext);
@@ -580,8 +582,11 @@ function getConditionalStackForSelector(selector, docContext) {
 	return conditionalStack;
 }
 
-function matchElements(selector, ancestorsSelectors, scopeStack, docContext) {
-	const selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
+function matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope) {
+	let selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
+	if (relativeToScope) {
+		selectorText = SCOPE_PSEUDO_CLASS + selectorText;
+	}
 	const cacheKey = createScopeCacheKey(selectorText, scopeStack);
 	const cachedNodes = docContext.matchedSelectors.get(cacheKey);
 	if (cachedNodes) {

package/package.json

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