single-file-core 1.5.25 → 1.5.27

package/core/helper.js

@@ -233,7 +233,7 @@ function preProcessDoc(doc, win, options) {
 	};
 }
 
-function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], videos: [], shadowRoots: [], markedElements: [] }, ascendantHidden) {
+function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], videos: [], shadowRoots: [], markedElements: [] }, adoptedStyleSheetsCache = new Map(), ascendantHidden) {
 	if (element.childNodes) {
 		const elements = Array.from(element.childNodes).filter(node => (node instanceof win.HTMLElement) || (node instanceof win.SVGElement) || (node instanceof globalThis.HTMLElement) || (node instanceof globalThis.SVGElement));
 		elements.forEach(element => {
@@ -278,7 +278,7 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 				try {
 					if (shadowRoot.adoptedStyleSheets) {
 						if (shadowRoot.adoptedStyleSheets.length) {
-							shadowRootInfo.adoptedStyleSheets = getStylesheetsContent(shadowRoot.adoptedStyleSheets);
+							shadowRootInfo.adoptedStyleSheets = getStylesheetsContent(shadowRoot.adoptedStyleSheets, adoptedStyleSheetsCache);
 						} else if (shadowRoot.adoptedStyleSheets.length === undefined) {
 							const listener = event => shadowRootInfo.adoptedStyleSheets = event.detail.adoptedStyleSheets;
 							shadowRoot.addEventListener(GET_ADOPTED_STYLESHEETS_RESPONSE_EVENT, listener);
@@ -292,7 +292,7 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 				} catch (error) {
 					// ignored
 				}
-				getElementsInfo(win, doc, shadowRoot, options, data, elementHidden);
+				getElementsInfo(win, doc, shadowRoot, options, data, adoptedStyleSheetsCache, elementHidden);
 				shadowRootInfo.content = shadowRoot.innerHTML;
 				shadowRootInfo.mode = shadowRoot.mode;
 				shadowRootInfo.delegateFocus = shadowRoot.delegatesFocus;
@@ -306,7 +306,7 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 					// ignored
 				}
 			}
-			getElementsInfo(win, doc, element, options, data, elementHidden);
+			getElementsInfo(win, doc, element, options, data, adoptedStyleSheetsCache, elementHidden);
 			if (!options.autoSaveExternalSave && options.removeHiddenElements && ascendantHidden) {
 				if (elementKept || element.getAttribute(KEPT_CONTENT_ATTRIBUTE_NAME) == "") {
 					if (element.parentElement) {
@@ -323,8 +323,27 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 	return data;
 }
 
-function getStylesheetsContent(styleSheets) {
-	return styleSheets ? Array.from(styleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n")) : [];
+function getStylesheetsContent(styleSheets, adoptedStyleSheetsCache = new Map()) {
+	if (styleSheets) {
+		const result = [];
+		for (const styleSheet of Array.from(styleSheets)) {
+			if (adoptedStyleSheetsCache.has(styleSheet)) {
+				result.push(adoptedStyleSheetsCache.get(styleSheet));
+			} else {
+				let cssText = "";
+				if (styleSheet && styleSheet.cssRules) {
+					for (const cssRule of styleSheet.cssRules) {
+						cssText += cssRule.cssText + "\n";
+					}
+				}
+				adoptedStyleSheetsCache.set(styleSheet, cssText);
+				result.push(cssText);
+			}
+		}
+		return result;
+	} else {
+		return [];
+	}
 }
 
 function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {

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

@@ -113,21 +113,21 @@ function getProcessorHelperClass(utilInstance) {
 				const stylesheetInfo = stylesheets.get(styleElement);
 				if (stylesheetInfo) {
 					stylesheets.delete(styleElement);
-					const styleSheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
-					if (styleSheetRefIndex === undefined) {
+					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
+					if (stylesheetRefIndex === undefined) {
 						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
 					} else if (options.groupDuplicateStylesheets) {
-						if (!doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + styleSheetRefIndex + "\"]")) {
+						if (!doc.querySelector("style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]")) {
 							const styleElement = doc.createElement("style");
-							styleElement.textContent = options.inlineStylesheets.get(styleSheetRefIndex);
+							styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex);
 							styleElement.setAttribute("media", "not all");
-							styleElement.setAttribute(DUPLICATE_STYLESHEET_ATTRIBUTE_NAME, styleSheetRefIndex);
+							styleElement.setAttribute(DUPLICATE_STYLESHEET_ATTRIBUTE_NAME, stylesheetRefIndex);
 							doc.head.appendChild(styleElement);
 						}
 						styleElement.textContent = "/* */";
-						styleElement.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + styleSheetRefIndex + "\"]').textContent;this.removeAttribute(\"onload\")");
+						styleElement.setAttribute("onload", "this.textContent=document.querySelector('style[" + DUPLICATE_STYLESHEET_ATTRIBUTE_NAME + "=\"" + stylesheetRefIndex + "\"]').textContent;this.removeAttribute(\"onload\")");
 					} else {
-						styleElement.textContent = options.inlineStylesheets.get(styleSheetRefIndex);
+						styleElement.textContent = options.inlineStylesheets.get(stylesheetRefIndex);
 					}
 					if (stylesheetInfo.mediaText) {
 						styleElement.media = stylesheetInfo.mediaText;

package/core/lib/processor-helper.js

@@ -76,27 +76,38 @@ function getProcessorHelperClass(utilInstance) {
 		}
 
 		async resolveStylesheetElement(element, stylesheetInfo, stylesheets, baseURI, options, workStyleElement, resources) {
-			if (!options.inlineStylesheetsRefs.has(element)) {
-				if (!options.blockStylesheets) {
-					stylesheets.set({ element }, stylesheetInfo);
+			if (!options.blockStylesheets) {
+				stylesheets.set({ element }, stylesheetInfo);
+				if (!options.inlineStylesheetsRefs.has(element)) {
 					if (element.tagName.toUpperCase() == "LINK") {
 						await this.resolveLinkStylesheetURLs(stylesheetInfo, element, element.href, baseURI, options, workStyleElement, resources, stylesheets);
 					} else {
 						stylesheetInfo.stylesheet = cssTree.parse(element.textContent, { context: "stylesheet", parseCustomProperty: true });
 						await this.resolveImportURLs(stylesheetInfo, baseURI, options, workStyleElement, resources, stylesheets);
 					}
+				}
+			} else {
+				if (element.tagName.toUpperCase() == "LINK") {
+					element.href = util.EMPTY_RESOURCE;
 				} else {
-					if (element.tagName.toUpperCase() == "LINK") {
-						element.href = util.EMPTY_RESOURCE;
-					} else {
-						element.textContent = "";
-					}
+					element.textContent = "";
 				}
 			}
 		}
 
 		replaceStylesheets(doc, stylesheets, options, resources) {
 			const entries = Array.from(stylesheets).reverse();
+			const linkElements = new Map();
+			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 content = options.inlineStylesheets.get(stylesheetRefIndex);
+				resources.stylesheets.set(resources.stylesheets.size, { name, content });
+				linkElements.set(stylesheetRefIndex, linkElement);
+			});
 			for (const [key, stylesheetInfo] of entries) {
 				if (key.urlNode) {
 					const name = "stylesheet_" + resources.stylesheets.size + ".css";
@@ -105,27 +116,29 @@ function getProcessorHelperClass(utilInstance) {
 					} else {
 						key.urlNode.value = name;
 					}
-					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet });
+					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 });
 				} 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 });
+					const styleElement = key.element;
+					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
+					if (stylesheetRefIndex === undefined) {
+						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
 					} else {
-						const styleElement = key.element;
-						const styleSheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
-						if (styleSheetRefIndex === undefined) {
-							styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
-						} else {
-							styleElement.textContent = options.inlineStylesheets.get(styleSheetRefIndex);
-						}
+						const linkElement = linkElements.get(stylesheetRefIndex).cloneNode(true);
+						styleElement.replaceWith(linkElement);
+						key.element = linkElement;
 					}
 				}
 			}
 			for (const [, stylesheetResource] of resources.stylesheets) {
-				stylesheetResource.content = this.generateStylesheetContent(stylesheetResource.stylesheet, options);
-				stylesheetResource.stylesheet = null;
+				if (stylesheetResource.stylesheet) {
+					stylesheetResource.content = this.generateStylesheetContent(stylesheetResource.stylesheet, options);
+					stylesheetResource.stylesheet = null;
+				}
 			}
 		}
 

package/package.json

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

package/processors/hooks/content/content-hooks-frames-web.js

@@ -51,6 +51,7 @@
 	const DELETE_FONT_EVENT = "single-file-delete-font";
 	const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
 	const NEW_WORKLET_EVENT = "single-file-new-worklet";
+	const BOOTSTRAP_EVENT = "single-file-bootstrap";
 	const FONT_STYLE_PROPERTIES = {
 		family: "font-family",
 		style: "font-style",
@@ -149,6 +150,11 @@
 			document.dispatchEvent(new CustomEvent(FETCH_RESPONSE_EVENT, { detail }));
 		});
 		document.addEventListener(GET_ADOPTED_STYLESHEETS_REQUEST_EVENT, getAdoptedStylesheetsListener);
+		document.addEventListener(BOOTSTRAP_EVENT, event => {
+			if (globalThis.bootstrap && event.detail.data) {
+				globalThis.bootstrap(event.detail.data);
+			}
+		});
 	}
 
 	function loadDeferredImagesStart(keepZoomLevel) {