rely on CSSOM to retrieve contents of STYLE elements

extension/core/bg/core.js

@@ -129,7 +129,7 @@ singlefile.core = (() => {
 		options.url = message.url;
 		options.framesData = message.framesData;
 		options.canvasData = message.canvasData;
-		options.emptyStyleRulesText = message.emptyStyleRulesText;
+		options.stylesheetContents = message.stylesheetContents;
 		options.insertSingleFileComment = true;
 		options.insertFaviconLink = true;
 		options.backgroundTab = true;

extension/core/content/content-autosave.js

@@ -52,7 +52,7 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 	function onUnload() {
 		if (!singlefile.pageAutoSaved) {
 			const docData = docHelper.preProcessDoc(document, window, options);
-			browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document), canvasData: docData.canvasData, emptyStyleRulesText: docData.emptyStyleRulesText, framesData: this.frameTree && !options.removeFrames && frameTree.getSync(options), url: location.href });
+			browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document), canvasData: docData.canvasData, stylesheetContents: docData.stylesheetContents, framesData: this.frameTree && !options.removeFrames && frameTree.getSync(options), url: location.href });
 		}
 	}
 

extension/core/content/content.js

@@ -57,7 +57,7 @@ this.singlefile.top = this.singlefile.top || (() => {
 				if (!options.removeFrames && this.frameTree) {
 					framesData = await frameTree.getAsync(options);
 				}
-				browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document, false), canvasData: docData.canvasData, emptyStyleRulesText: docData.emptyStyleRulesText, framesData, url: location.href });
+				browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document, false), canvasData: docData.canvasData, stylesheetContents: docData.stylesheetContents, framesData, url: location.href });
 				docHelper.postProcessDoc(document, window);
 				singlefile.pageAutoSaved = true;
 			}

lib/single-file/doc-helper.js

@@ -60,7 +60,7 @@ this.docHelper = this.docHelper || (() => {
 		}
 		return {
 			canvasData: getCanvasData(doc),
-			emptyStyleRulesText: getEmptyStyleRulesText(doc)
+			stylesheetContents: getStylesheetContents(doc)
 		};
 	}
 
@@ -106,13 +106,11 @@ this.docHelper = this.docHelper || (() => {
 		}
 	}
 
-	function getEmptyStyleRulesText(doc) {
+	function getStylesheetContents(doc) {
 		if (doc) {
 			const textData = [];
 			doc.querySelectorAll("style").forEach(styleElement => {
-				if (!styleElement.textContent) {
-					textData.push(Array.from(styleElement.sheet.cssRules).map(rule => rule.cssText).join("\n"));
-				}
+				textData.push(Array.from(styleElement.sheet.cssRules).map(rule => rule.cssText).join("\n"));
 			});
 			return textData;
 		}

lib/single-file/frame-tree.js

@@ -77,7 +77,7 @@ this.frameTree = this.frameTree || (() => {
 				content,
 				baseURI: document.baseURI.split("#")[0],
 				title: document.title,
-				emptyStyleRulesText: docData.emptyStyleRulesText,
+				stylesheetContents: docData.stylesheetContents,
 				canvasData: docData.canvasData,
 				processed: true,
 			}];
@@ -98,7 +98,7 @@ this.frameTree = this.frameTree || (() => {
 				frameData.content = messageFrameData.content;
 				frameData.baseURI = messageFrameData.baseURI;
 				frameData.title = messageFrameData.title;
-				frameData.emptyStyleRulesText = messageFrameData.emptyStyleRulesText;
+				frameData.stylesheetContents = messageFrameData.stylesheetContents;
 				frameData.canvasData = messageFrameData.canvasData;
 				frameData.processed = messageFrameData.processed;
 				frameData.timeout = messageFrameData.timeout;
@@ -145,7 +145,7 @@ this.frameTree = this.frameTree || (() => {
 							content: docHelper.serialize(frameDoc),
 							baseURI: frameDoc.baseURI.split("#")[0],
 							title: frameDoc.title,
-							emptyStyleRulesText: docData.emptyStyleRulesText,
+							stylesheetContents: docData.stylesheetContents,
 							canvasData: docData.canvasData,
 							processed: true
 						});

lib/single-file/single-file-core.js

@@ -76,7 +76,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			if (this.options.doc) {
 				const docData = DOM.preProcessDoc(this.options.doc, this.options.win, this.options);
 				this.options.canvasData = docData.canvasData;
-				this.options.emptyStyleRulesText = docData.emptyStyleRulesText;
+				this.options.stylesheetContents = docData.stylesheetContents;
 			}
 			this.options.content = this.options.content || (this.options.doc ? DOM.serialize(this.options.doc, false) : null);
 			this.onprogress = options.onprogress || (() => { });
@@ -91,7 +91,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		async initialize() {
 			this.onprogress(new ProgressEvent(RESOURCES_INITIALIZING, { pageURL: this.options.url }));
 			this.processor.removeUIElements();
-			this.processor.replaceEmptyStyles();
+			this.processor.replaceStyleContents();
 			if (!this.options.jsEnabled || (this.options.saveRawPage && this.options.removeScripts)) {
 				this.processor.insertNoscriptContents();
 			}
@@ -481,14 +481,12 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			}
 		}
 
-		replaceEmptyStyles() {
-			if (this.options.emptyStyleRulesText) {
+		replaceStyleContents() {
+			if (this.options.stylesheetContents) {
 				let indexStyle = 0;
 				this.doc.querySelectorAll("style").forEach(styleElement => {
-					if (!styleElement.textContent) {
-						styleElement.textContent = this.options.emptyStyleRulesText[indexStyle];
-						indexStyle++;
-					}
+					styleElement.textContent = this.options.stylesheetContents[indexStyle];
+					indexStyle++;
 				});
 			}
 		}
@@ -563,7 +561,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 							if (frameData.content) {
 								options.content = frameData.content;
 								options.canvasData = frameData.canvasData;
-								options.emptyStyleRulesText = frameData.emptyStyleRulesText;
+								options.stylesheetContents = frameData.stylesheetContents;
 								frameData.processor = new PageProcessor(options);
 								frameData.frameElement = frameElement;
 								await frameData.processor.loadPage();