single-file-core 1.0.8 → 1.0.11

package/modules/css-fonts-alt-minifier.js

@@ -212,11 +212,11 @@ async function processFontFaceRule(ruleData, fontInfo, fontDeclarations, fontTes
 	removedNodes.forEach(node => ruleData.block.children.remove(node));
 	const srcDeclaration = ruleData.block.children.filter(node => node.property == "src").tail;
 	if (srcDeclaration) {
-		await Promise.all(fontInfo.map(async (source, sourceIndex) => {
+		await Promise.all(fontInfo.map(async source => {
 			if (fontTests.has(source.src)) {
 				source.valid = fontTests.get(source.src);
 			} else {
-				if (FontFace) {
+				if (FontFace && source.fontUrl) {
 					const fontFace = new FontFace("test-font", source.src);
 					try {
 						let timeout;
@@ -225,9 +225,10 @@ async function processFontFaceRule(ruleData, fontInfo, fontDeclarations, fontTes
 							new Promise(resolve => timeout = globalThis.setTimeout(() => { source.valid = true; resolve(); }, FONT_MAX_LOAD_DELAY))
 						]);
 					} catch (error) {
-						const declarationFontURLs = fontDeclarations.get(srcDeclaration.data);
-						if (declarationFontURLs) {
-							const fontURL = declarationFontURLs[declarationFontURLs.length - sourceIndex - 1];
+						const urlNodes = cssTree.findAll(srcDeclaration.data, node => node.type == "Url");
+						const declarationFontURLs = Array.from(fontDeclarations).find(([node]) => urlNodes.includes(node) && node.value == source.fontUrl)[1];
+						if (declarationFontURLs.length) {
+							const fontURL = declarationFontURLs[0];
 							if (fontURL) {
 								const fontFace = new FontFace("test-font", "url(" + fontURL + ")");
 								try {
@@ -276,7 +277,7 @@ async function processFontFaceRule(ruleData, fontInfo, fontDeclarations, fontTes
 		stats.fonts.discarded -= fontInfo.length;
 		fontInfo.reverse();
 		try {
-			srcDeclaration.data.value = cssTree.parse(fontInfo.map(fontSource => fontSource.src).join(","), { context: "value" });
+			srcDeclaration.data.value = cssTree.parse(fontInfo.map(fontSource => fontSource.src).join(","), { context: "value", parseCustomProperty: true });
 		}
 		catch (error) {
 			// ignored
@@ -333,6 +334,7 @@ function createFontsDetailsInfo() {
 }
 
 function getURL(urlFunction) {
+	urlFunction = urlFunction.replace(/url\(-sf-url-original\\\(\\"(.*?)\\"\\\)\\ /g, "");
 	const urlMatch = urlFunction.match(REGEXP_URL_SIMPLE_QUOTES_FN) ||
 		urlFunction.match(REGEXP_URL_DOUBLE_QUOTES_FN) ||
 		urlFunction.match(REGEXP_URL_NO_QUOTES_FN);

package/modules/css-fonts-minifier.js

@@ -220,13 +220,19 @@ function getFontFamilyNames(declarations) {
 	if (fontFamilyName) {
 		let familyName = "";
 		if (fontFamilyName.data.value.children) {
+			let previousType;
 			fontFamilyName.data.value.children.forEach(node => {
 				if (node.type == "Operator" && node.value == "," && familyName) {
 					fontFamilyNames.push(helper.normalizeFontFamily(familyName));
 					familyName = "";
+					previousType = null;
 				} else {
+					if (previousType == "Identifier" && node.type == "Identifier") {
+						familyName += " ";
+					}
 					familyName += cssTree.generate(node);
 				}
+				previousType = node.type;
 			});
 		} else {
 			fontFamilyName = cssTree.generate(fontFamilyName.data.value);

package/package.json

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

package/single-file-core.js

@@ -1024,12 +1024,9 @@ class Processor {
 
 	resolveStyleAttributeURLs() {
 		this.doc.querySelectorAll("[style]").forEach(element => {
-			let styleContent = element.getAttribute("style");
-			if (this.options.compressCSS) {
-				styleContent = util.compressCSS(styleContent);
-			}
-			styleContent = ProcessorHelper.resolveStylesheetURLs(styleContent, this.baseURI, this.workStyleElement, this.options.saveOriginalURLs);
-			const declarationList = cssTree.parse(styleContent, { context: "declarationList" });
+			const styleContent = element.getAttribute("style");
+			const declarationList = cssTree.parse(styleContent, { context: "declarationList", parseCustomProperty: true });
+			ProcessorHelper.resolveStylesheetURLs(declarationList, this.baseURI, this.workStyleElement);
 			this.styles.set(element, declarationList);
 		});
 	}
@@ -1066,16 +1063,7 @@ class Processor {
 			let stylesheet;
 			stylesheets.set(element, stylesheetInfo);
 			if (!options.blockStylesheets) {
-				let stylesheetContent = await getStylesheetContent(element, baseURI, options, workStyleElement);
-				if (!matchCharsetEquals(stylesheetContent, options.charset)) {
-					options = Object.assign({}, options, { charset: getCharset(stylesheetContent) });
-					stylesheetContent = await getStylesheetContent(element, baseURI, options, workStyleElement);
-				}
-				try {
-					stylesheet = cssTree.parse(removeCssComments(stylesheetContent));
-				} catch (error) {
-					// ignored
-				}
+				stylesheet = await getStylesheet(element, baseURI, options, workStyleElement);
 			}
 			if (stylesheet && stylesheet.children) {
 				if (options.compressCSS) {
@@ -1087,16 +1075,20 @@ class Processor {
 			}
 		}
 
-		async function getStylesheetContent(element, baseURI, options, workStyleElement) {
-			let content;
+		async function getStylesheet(element, baseURI, options, workStyleElement) {
+			let stylesheet;
 			if (!options.blockStylesheets) {
 				if (element.tagName == "LINK") {
-					content = await ProcessorHelper.resolveLinkStylesheetURLs(element.href, baseURI, options, workStyleElement);
+					stylesheet = await ProcessorHelper.resolveLinkStylesheetURLs(element.href, baseURI, options, workStyleElement);
 				} else {
-					content = await ProcessorHelper.resolveImportURLs(element.textContent, baseURI, options, workStyleElement);
+					stylesheet = cssTree.parse(element.textContentcd, { context: "stylesheet", parseCustomProperty: true });
+					const importFound = await ProcessorHelper.resolveImportURLs(stylesheet, baseURI, options, workStyleElement);
+					if (importFound) {
+						stylesheet = cssTree.parse(cssTree.generate(stylesheet), { context: "stylesheet", parseCustomProperty: true });
+					}
 				}
 			}
-			return content || "";
+			return stylesheet;
 		}
 	}
 
@@ -1108,7 +1100,7 @@ class Processor {
 					frameElement.setAttribute("data", "data:text/html,");
 				} else {
 					const src = frameElement.getAttribute("src");
-					if (this.options.saveOriginalURLs && !isDataURL(src)) {
+					if (this.options.saveOriginalURLs && src && !isDataURL(src)) {
 						frameElement.setAttribute("data-sf-original-src", src);
 					}
 					frameElement.removeAttribute("src");
@@ -1275,8 +1267,8 @@ class Processor {
 	}
 
 	async processStyleAttributes() {
-		return Promise.all([...this.styles].map(([, declarationList]) =>
-			ProcessorHelper.processStyle(declarationList.children.toArray(), this.baseURI, this.options, this.cssVariables, this.batchRequest)
+		return Promise.all([...this.styles].map(([, stylesheet]) =>
+			ProcessorHelper.processStyle(stylesheet, this.baseURI, this.options, this.cssVariables, this.batchRequest)
 		));
 	}
 
@@ -1426,11 +1418,7 @@ class Processor {
 			const stylesheetInfo = this.stylesheets.get(styleElement);
 			if (stylesheetInfo) {
 				this.stylesheets.delete(styleElement);
-				let stylesheetContent = cssTree.generate(stylesheetInfo.stylesheet);
-				if (this.options.saveOriginalURLs) {
-					stylesheetContent = replaceOriginalURLs(stylesheetContent);
-				}
-				styleElement.textContent = stylesheetContent;
+				styleElement.textContent = generateStylesheetContent(stylesheetInfo.stylesheet, this.options);
 				if (stylesheetInfo.mediaText) {
 					styleElement.media = stylesheetInfo.mediaText;
 				}
@@ -1446,12 +1434,7 @@ class Processor {
 				if (stylesheetInfo.mediaText) {
 					styleElement.media = stylesheetInfo.mediaText;
 				}
-				let stylesheetContent = cssTree.generate(stylesheetInfo.stylesheet);
-				if (this.options.saveOriginalURLs) {
-					stylesheetContent = replaceOriginalURLs(stylesheetContent);
-					styleElement.setAttribute("data-sf-original-href", linkElement.getAttribute("data-sf-original-href"));
-				}
-				styleElement.textContent = stylesheetContent;
+				styleElement.textContent = generateStylesheetContent(stylesheetInfo.stylesheet, this.options);
 				linkElement.parentElement.replaceChild(styleElement, linkElement);
 			} else {
 				linkElement.remove();
@@ -1461,14 +1444,10 @@ class Processor {
 
 	replaceStyleAttributes() {
 		this.doc.querySelectorAll("[style]").forEach(element => {
-			const declarations = this.styles.get(element);
-			if (declarations) {
+			const declarationList = this.styles.get(element);
+			if (declarationList) {
 				this.styles.delete(element);
-				let styleContent = cssTree.generate(declarations);
-				if (this.options.saveOriginalURLs) {
-					styleContent = replaceOriginalURLs(styleContent);
-				}
-				element.setAttribute("style", styleContent);
+				element.setAttribute("style", generateStylesheetContent(declarationList, this.options));
 			} else {
 				element.setAttribute("style", "");
 			}
@@ -1708,52 +1687,43 @@ class ProcessorHelper {
 		removedRules.forEach(cssRule => stylesheet.children.remove(cssRule));
 	}
 
-	static async resolveImportURLs(stylesheetContent, baseURI, options, workStylesheet, importedStyleSheets = new Set()) {
-		stylesheetContent = ProcessorHelper.resolveStylesheetURLs(stylesheetContent, baseURI, workStylesheet, options.saveOriginalURLs);
-		const imports = getImportFunctions(stylesheetContent);
-		await Promise.all(imports.map(async cssImport => {
-			const match = matchImport(cssImport);
-			if (match) {
-				const regExpCssImport = getRegExp(cssImport);
-				let resourceURL = normalizeURL(match.resourceURL);
-				if (!testIgnoredPath(resourceURL) && testValidPath(resourceURL)) {
-					try {
-						resourceURL = util.resolveURL(match.resourceURL, baseURI);
-					} catch (error) {
-						// ignored
+	static async resolveImportURLs(stylesheet, baseURI, options, workStylesheet, importedStyleSheets = new Set()) {
+		let importFound;
+		ProcessorHelper.resolveStylesheetURLs(stylesheet, baseURI, workStylesheet);
+		const imports = getImportFunctions(stylesheet);
+		await Promise.all(imports.map(async node => {
+			const urlNode = cssTree.find(node, node => node.type == "Url") || cssTree.find(node, node => node.type == "String");
+			let resourceURL = normalizeURL(urlNode.value);
+			if (!testIgnoredPath(resourceURL) && testValidPath(resourceURL)) {
+				urlNode.value = util.EMPTY_RESOURCE;
+				try {
+					resourceURL = util.resolveURL(resourceURL, baseURI);
+				} catch (error) {
+					// ignored
+				}
+				if (testValidURL(resourceURL) && !importedStyleSheets.has(resourceURL)) {
+					const content = await getStylesheetContent(resourceURL);
+					resourceURL = content.resourceURL;
+					content.data = getUpdatedResourceContent(resourceURL, content, options);
+					if (content.data && content.data.match(/^<!doctype /i)) {
+						content.data = "";
 					}
-					if (testValidURL(resourceURL) && !importedStyleSheets.has(resourceURL)) {
-						const content = await getStylesheetContent(resourceURL);
-						resourceURL = content.resourceURL;
-						content.data = getUpdatedResourceContent(resourceURL, content, options);
-						if (content.data && content.data.match(/^<!doctype /i)) {
-							content.data = "";
-						}
-						let importedStylesheetContent = removeCssComments(content.data);
-						if (options.compressCSS) {
-							importedStylesheetContent = util.compressCSS(importedStylesheetContent);
-						}
-						importedStylesheetContent = wrapMediaQuery(importedStylesheetContent, match.media);
-						if (stylesheetContent.includes(cssImport)) {
-							const ancestorStyleSheets = new Set(importedStyleSheets);
-							ancestorStyleSheets.add(resourceURL);
-							importedStylesheetContent = await ProcessorHelper.resolveImportURLs(importedStylesheetContent, resourceURL, options, workStylesheet, ancestorStyleSheets);
-							workStylesheet.textContent = importedStylesheetContent;
-							if ((workStylesheet.sheet && workStylesheet.sheet.cssRules.length) || (!workStylesheet.sheet && importedStylesheetContent)) {
-								stylesheetContent = stylesheetContent.replace(regExpCssImport, importedStylesheetContent);
-							} else {
-								stylesheetContent = stylesheetContent.replace(regExpCssImport, "");
-							}
-						}
-					} else {
-						stylesheetContent = stylesheetContent.replace(regExpCssImport, "");
+					const mediaQueryListNode = cssTree.find(node, node => node.type == "MediaQueryList");
+					if (mediaQueryListNode) {
+						content.data = wrapMediaQuery(content.data, cssTree.generate(mediaQueryListNode));
 					}
-				} else {
-					stylesheetContent = stylesheetContent.replace(regExpCssImport, "");
+					const importedStylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
+					const ancestorStyleSheets = new Set(importedStyleSheets);
+					ancestorStyleSheets.add(resourceURL);
+					await ProcessorHelper.resolveImportURLs(importedStylesheet, resourceURL, options, workStylesheet, ancestorStyleSheets);
+					for (let keyName of Object.keys(importedStylesheet)) {
+						node[keyName] = importedStylesheet[keyName];
+					}
+					importFound = true;
 				}
 			}
 		}));
-		return stylesheetContent;
+		return importFound;
 
 		async function getStylesheetContent(resourceURL) {
 			const content = await util.getContent(resourceURL, {
@@ -1790,13 +1760,10 @@ class ProcessorHelper {
 		}
 	}
 
-	static resolveStylesheetURLs(stylesheetContent, baseURI, workStylesheet, saveOriginalURLs) {
-		const urlFunctions = getUrlFunctions(stylesheetContent, true);
-		if (saveOriginalURLs) {
-			stylesheetContent = addOriginalURLs(stylesheetContent);
-		}
-		urlFunctions.map(urlFunction => {
-			const originalResourceURL = matchURL(urlFunction);
+	static resolveStylesheetURLs(stylesheet, baseURI, workStylesheet) {
+		const urls = getUrlFunctions(stylesheet);
+		urls.map(urlNode => {
+			const originalResourceURL = urlNode.value;
 			let resourceURL = normalizeURL(originalResourceURL);
 			workStylesheet.textContent = "tmp { content:\"" + resourceURL + "\"}";
 			if (workStylesheet.sheet && workStylesheet.sheet.cssRules) {
@@ -1812,25 +1779,14 @@ class ProcessorHelper {
 							// ignored
 						}
 					}
-					if (testValidURL(resolvedURL) && originalResourceURL != resolvedURL && stylesheetContent.includes(urlFunction)) {
-						try {
-							stylesheetContent = stylesheetContent.replace(getRegExp(urlFunction), originalResourceURL ? urlFunction.replace(originalResourceURL, resolvedURL) : "url(" + resolvedURL + ")");
-						} catch (error) {
-							// ignored
-						}
+					if (testValidURL(resolvedURL)) {
+						urlNode.value = resolvedURL;
 					}
 				} else {
-					let newUrlFunction;
-					if (originalResourceURL) {
-						newUrlFunction = urlFunction.replace(originalResourceURL, util.EMPTY_RESOURCE);
-					} else {
-						newUrlFunction = "url(" + util.EMPTY_RESOURCE + ")";
-					}
-					stylesheetContent = stylesheetContent.replace(getRegExp(urlFunction), newUrlFunction);
+					urlNode.value = util.EMPTY_RESOURCE;
 				}
 			}
 		});
-		return stylesheetContent;
 	}
 
 	static async resolveLinkStylesheetURLs(resourceURL, baseURI, options, workStylesheet) {
@@ -1858,12 +1814,12 @@ class ProcessorHelper {
 			if (content.data && content.data.match(/^<!doctype /i)) {
 				content.data = "";
 			}
-			let stylesheetContent = removeCssComments(content.data);
-			if (options.compressCSS) {
-				stylesheetContent = util.compressCSS(stylesheetContent);
+			let stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
+			const importFound = await ProcessorHelper.resolveImportURLs(stylesheet, resourceURL, options, workStylesheet);
+			if (importFound) {
+				stylesheet = cssTree.parse(cssTree.generate(stylesheet), { context: "stylesheet", parseCustomProperty: true });
 			}
-			stylesheetContent = await ProcessorHelper.resolveImportURLs(stylesheetContent, resourceURL, options, workStylesheet);
-			return stylesheetContent;
+			return stylesheet;
 		}
 	}
 
@@ -1876,7 +1832,7 @@ class ProcessorHelper {
 				removedRules.push(cssRule);
 			} else if (ruleData.block && ruleData.block.children) {
 				if (ruleData.type == "Rule") {
-					promises.push(this.processStyle(ruleData.block.children.toArray(), baseURI, options, cssVariables, batchRequest));
+					promises.push(this.processStyle(ruleData, baseURI, options, cssVariables, batchRequest));
 				} else if (ruleData.type == "Atrule" && (ruleData.name == "media" || ruleData.name == "supports")) {
 					promises.push(this.processStylesheet(ruleData.block.children, baseURI, options, cssVariables, batchRequest));
 				} else if (ruleData.type == "Atrule" && ruleData.name == "font-face") {
@@ -1888,94 +1844,62 @@ class ProcessorHelper {
 		await Promise.all(promises);
 
 		async function processFontFaceRule(ruleData) {
-			await Promise.all(ruleData.block.children.toArray().map(async declaration => {
-				if (declaration.type == "Declaration" && declaration.value.children) {
-					const urlFunctions = getUrlFunctions(getCSSValue(declaration.value), true);
-					await Promise.all(urlFunctions.map(async urlFunction => {
-						const originalResourceURL = matchURL(urlFunction);
-						if (!options.blockFonts) {
-							const resourceURL = normalizeURL(originalResourceURL);
-							if (!testIgnoredPath(resourceURL) && testValidURL(resourceURL)) {
-								let { content } = await batchRequest.addURL(resourceURL,
-									{ asBinary: true, expectedType: "font", baseURI, blockMixedContent: options.blockMixedContent });
-								let resourceURLs = options.fontDeclarations.get(declaration);
-								if (!resourceURLs) {
-									resourceURLs = [];
-									options.fontDeclarations.set(declaration, resourceURLs);
-								}
-								resourceURLs.push(resourceURL);
-								replaceURLs(declaration, originalResourceURL, content);
-							}
+			const urls = getUrlFunctions(ruleData);
+			await Promise.all(urls.map(async urlNode => {
+				const originalResourceURL = urlNode.value;
+				if (!options.blockFonts) {
+					const resourceURL = normalizeURL(originalResourceURL);
+					if (!testIgnoredPath(resourceURL) && testValidURL(resourceURL)) {
+						let { content } = await batchRequest.addURL(resourceURL,
+							{ asBinary: true, expectedType: "font", baseURI, blockMixedContent: options.blockMixedContent });
+						let resourceURLs = options.fontDeclarations.get(urlNode);
+						if (!resourceURLs) {
+							resourceURLs = [];
+							options.fontDeclarations.set(urlNode, resourceURLs);
+						}
+						resourceURLs.push(resourceURL);
+						if (!isDataURL(resourceURL) && options.saveOriginalURLs) {
+							urlNode.value = "-sf-url-original(" + JSON.stringify(originalResourceURL) + ") " + content;
 						} else {
-							replaceURLs(declaration, originalResourceURL, util.EMPTY_RESOURCE);
+							urlNode.value = content;
 						}
-					}));
+					}
+				} else {
+					urlNode.value = util.EMPTY_RESOURCE;
 				}
 			}));
-
-			function replaceURLs(declaration, oldURL, newURL) {
-				declaration.value.children.forEach(token => {
-					if (token.type == "Url" && util.removeQuotes(getCSSValue(token.value)) == oldURL) {
-						token.value = newURL;
-					}
-				});
-			}
 		}
 	}
 
-	static async processStyle(declarations, baseURI, options, cssVariables, batchRequest) {
-		await Promise.all(declarations.map(async declaration => {
-			if (declaration.value && !declaration.value.children && declaration.value.type == "Raw") {
-				try {
-					declaration.value = cssTree.parse(declaration.value.value, { context: "value" });
-				} catch (error) {
-					// ignored
-				}
-			}
-			if (declaration.type == "Declaration" && declaration.value.children) {
-				const urlFunctions = getUrlFunctions(getCSSValue(declaration.value));
-				await Promise.all(urlFunctions.map(async urlFunction => {
-					const originalResourceURL = matchURL(urlFunction);
-					if (!options.blockImages) {
-						const resourceURL = normalizeURL(originalResourceURL);
-						if (!testIgnoredPath(resourceURL) && testValidURL(resourceURL)) {
-							let { content, indexResource, duplicate } = await batchRequest.addURL(resourceURL,
-								{ asBinary: true, expectedType: "image", groupDuplicates: options.groupDuplicateImages });
-							let variableDefined;
-							const tokens = [];
-							findURLToken(originalResourceURL, declaration.value.children, (token, parent, rootFunction) => {
-								if (!originalResourceURL.startsWith("#")) {
-									if (duplicate && options.groupDuplicateImages && rootFunction && util.getContentSize(content) < SINGLE_FILE_VARIABLE_MAX_SIZE) {
-										const value = cssTree.parse("var(" + SINGLE_FILE_VARIABLE_NAME_PREFIX + indexResource + ")", { context: "value" }).children.head;
-										tokens.push({ parent, token, value });
-										variableDefined = true;
-									} else {
-										token.data.value = content;
-									}
-								}
-							});
-							if (variableDefined) {
-								cssVariables.set(indexResource, { content, url: originalResourceURL });
-								tokens.forEach(({ parent, token, value }) => parent.replace(token, value));
+	static async processStyle(ruleData, baseURI, options, cssVariables, batchRequest) {
+		const urls = getUrlFunctions(ruleData);
+		await Promise.all(urls.map(async urlNode => {
+			const originalResourceURL = urlNode.value;
+			if (!options.blockImages) {
+				const resourceURL = normalizeURL(originalResourceURL);
+				if (!testIgnoredPath(resourceURL) && testValidURL(resourceURL)) {
+					let { content, indexResource, duplicate } = await batchRequest.addURL(resourceURL,
+						{ asBinary: true, expectedType: "image", groupDuplicates: options.groupDuplicateImages });
+					if (!originalResourceURL.startsWith("#")) {
+						if (duplicate && options.groupDuplicateImages && util.getContentSize(content) < SINGLE_FILE_VARIABLE_MAX_SIZE) {
+							const varNode = cssTree.parse("var(" + SINGLE_FILE_VARIABLE_NAME_PREFIX + indexResource + ")", { context: "value" });
+							for (let keyName of Object.keys(varNode.children.head.data)) {
+								urlNode[keyName] = varNode.children.head.data[keyName];
+							}
+							cssVariables.set(indexResource, { content, url: originalResourceURL });
+						} else {
+							if (!isDataURL(resourceURL) && options.saveOriginalURLs) {
+								urlNode.value = "-sf-url-original(" + JSON.stringify(originalResourceURL) + ") " + content;
+							} else {
+								urlNode.value = content;
 							}
 						}
-					} else {
-						findURLToken(originalResourceURL, declaration.value.children, token => token.data.value = util.EMPTY_RESOURCE);
 					}
-				}));
-			}
-		}));
-
-		function findURLToken(url, children, callback, depth = 0) {
-			for (let token = children.head; token; token = token.next) {
-				if (token.data.children) {
-					findURLToken(url, token.data.children, callback, depth + 1);
-				}
-				if (token.data.type == "Url" && util.removeQuotes(getCSSValue(token.data.value)) == url) {
-					callback(token, children, depth == 0);
 				}
+			} else {
+				urlNode.value = util.EMPTY_RESOURCE;
 			}
-		}
+		}));
 	}
 
 	static async processAttribute(resourceElements, attributeName, baseURI, options, expectedType, cssVariables, styles, batchRequest, processDuplicates, removeElementIfMissing) {
@@ -2033,7 +1957,7 @@ class ProcessorHelper {
 										if (expectedType == "image" && processDuplicates && duplicate && !isSVG && util.getContentSize(content) < SINGLE_FILE_VARIABLE_MAX_SIZE) {
 											if (ProcessorHelper.replaceImageSource(resourceElement, SINGLE_FILE_VARIABLE_NAME_PREFIX + indexResource, options)) {
 												cssVariables.set(indexResource, { content, url: originURL });
-												const declarationList = cssTree.parse(resourceElement.getAttribute("style"), { context: "declarationList" });
+												const declarationList = cssTree.parse(resourceElement.getAttribute("style"), { context: "declarationList", parseCustomProperty: true });
 												styles.set(resourceElement, declarationList);
 											} else {
 												resourceElement.setAttribute(attributeName, content);
@@ -2188,18 +2112,6 @@ const HTTP_URI_PREFIX = /^https?:\/\//;
 const FILE_URI_PREFIX = /^file:\/\//;
 const EMPTY_URL = /^https?:\/\/+\s*$/;
 const NOT_EMPTY_URL = /^(https?:\/\/|file:\/\/|blob:).+/;
-const REGEXP_URL_FN = /(url\s*\(\s*'(.*?)'\s*\))|(url\s*\(\s*"(.*?)"\s*\))|(url\s*\(\s*(.*?)\s*\))/gi;
-const REGEXP_URL_SIMPLE_QUOTES_FN = /^url\s*\(\s*'(.*?)'\s*\)$/i;
-const REGEXP_URL_DOUBLE_QUOTES_FN = /^url\s*\(\s*"(.*?)"\s*\)$/i;
-const REGEXP_URL_NO_QUOTES_FN = /^url\s*\(\s*(.*?)\s*\)$/i;
-const REGEXP_IMPORT_FN = /(@import\s*url\s*\(\s*'(.*?)'\s*\)\s*(.*?)(;|$|}))|(@import\s*url\s*\(\s*"(.*?)"\s*\)\s*(.*?)(;|$|}))|(@import\s*url\s*\(\s*(.*?)\s*\)\s*(.*?)(;|$|}))|(@import\s*'(.*?)'\s*(.*?)(;|$|}))|(@import\s*"(.*?)"\s*(.*?)(;|$|}))|(@import\s*(.*?)\s*(.*?)(;|$|}))/gi;
-const REGEXP_IMPORT_URL_SIMPLE_QUOTES_FN = /@import\s*url\s*\(\s*'(.*?)'\s*\)\s*(.*?)(;|$|})/i;
-const REGEXP_IMPORT_URL_DOUBLE_QUOTES_FN = /@import\s*url\s*\(\s*"(.*?)"\s*\)\s*(.*?)(;|$|})/i;
-const REGEXP_IMPORT_URL_NO_QUOTES_FN = /@import\s*url\s*\(\s*(.*?)\s*\)\s*(.*?)(;|$|})/i;
-const REGEXP_IMPORT_SIMPLE_QUOTES_FN = /@import\s*'(.*?)'\s*(.*?)(;|$|})/i;
-const REGEXP_IMPORT_DOUBLE_QUOTES_FN = /@import\s*"(.*?)"\s*(.*?)(;|$|})/i;
-const REGEXP_IMPORT_NO_QUOTES_FN = /@import\s*(.*?)\s*(.*?)(;|$|})/i;
-const REGEXP_ESCAPE = /([{}()^$&.*?/+|[\\\\]|\]|-)/g;
 
 function getUpdatedResourceContent(resourceURL, content, options) {
 	if (options.rootDocument && options.updatedResources[resourceURL]) {
@@ -2218,20 +2130,6 @@ function normalizeURL(url) {
 	}
 }
 
-function getCSSValue(value) {
-	if (typeof value == "string") {
-		return value;
-	} else {
-		let result = "";
-		try {
-			result = cssTree.generate(value);
-		} catch (error) {
-			// ignored
-		}
-		return result;
-	}
-}
-
 function matchCharsetEquals(stylesheetContent, charset = UTF8_CHARSET) {
 	const stylesheetCharset = getCharset(stylesheetContent);
 	if (stylesheetCharset) {
@@ -2318,21 +2216,23 @@ function getLastSegment(url, replacementCharacter) {
 	return lastSegment;
 }
 
-function getRegExp(string) {
-	return new RegExp(string.replace(REGEXP_ESCAPE, "\\$1"), "gi");
+function getUrlFunctions(declarationList) {
+	return cssTree.findAll(declarationList, node => node.type == "Url");
 }
 
-function getUrlFunctions(stylesheetContent, unique) {
-	const result = stylesheetContent.match(REGEXP_URL_FN) || [];
-	if (unique) {
-		return [...new Set(result)];
-	} else {
-		return result;
-	}
+function getImportFunctions(declarationList) {
+	return cssTree.findAll(declarationList, node => node.type == "Atrule" && node.name == "import");
 }
 
-function getImportFunctions(stylesheetContent) {
-	return stylesheetContent.match(REGEXP_IMPORT_FN) || [];
+function generateStylesheetContent(stylesheet, options) {
+	let stylesheetContent = cssTree.generate(stylesheet);
+	if (options.compressCSS) {
+		stylesheetContent = util.compressCSS(stylesheetContent);
+	}
+	if (options.saveOriginalURLs) {
+		stylesheetContent = replaceOriginalURLs(stylesheetContent);
+	}
+	return stylesheetContent;
 }
 
 function findShortcutIcon(shortcutIcons) {
@@ -2341,30 +2241,12 @@ function findShortcutIcon(shortcutIcons) {
 	return shortcutIcons[0];
 }
 
-function matchURL(stylesheetContent) {
-	const match = stylesheetContent.match(REGEXP_URL_SIMPLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_URL_DOUBLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_URL_NO_QUOTES_FN);
-	return match && match[1];
-}
-
-function addOriginalURLs(stylesheetContent) {
-	return stylesheetContent.replace(REGEXP_URL_FN, function (match, _0, url, _1, url2, _2, url3) {
-		url = url || url2 || url3;
-		if (isDataURL(url)) {
-			return match;
-		} else {
-			return "-sf-url-original(" + JSON.stringify(url) + ") " + match;
-		}
-	});
-}
-
 function isDataURL(url) {
 	return url && (url.startsWith(DATA_URI_PREFIX) || url.startsWith(BLOB_URI_PREFIX));
 }
 
 function replaceOriginalURLs(stylesheetContent) {
-	return stylesheetContent.replace(/-sf-url-original\("(.*?)"\)/g, "/* original URL: $1 */");
+	return stylesheetContent.replace(/url\(-sf-url-original\\\(\\"(.*?)\\"\\\)\\ /g, "/* original URL: $1 */url(");
 }
 
 function testIgnoredPath(resourceURL) {
@@ -2379,35 +2261,6 @@ function testValidURL(resourceURL) {
 	return testValidPath(resourceURL) && (resourceURL.match(HTTP_URI_PREFIX) || resourceURL.match(FILE_URI_PREFIX) || resourceURL.startsWith(BLOB_URI_PREFIX)) && resourceURL.match(NOT_EMPTY_URL);
 }
 
-function matchImport(stylesheetContent) {
-	const match = stylesheetContent.match(REGEXP_IMPORT_URL_SIMPLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_IMPORT_URL_DOUBLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_IMPORT_URL_NO_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_IMPORT_SIMPLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_IMPORT_DOUBLE_QUOTES_FN) ||
-		stylesheetContent.match(REGEXP_IMPORT_NO_QUOTES_FN);
-	if (match) {
-		const [, resourceURL, media] = match;
-		return { resourceURL, media };
-	}
-}
-
-function removeCssComments(stylesheetContent) {
-	try {
-		return stylesheetContent.replace(/\/\*(.|[\r\n])*?\*\//g, "");
-	} catch (error) {
-		let start, end;
-		do {
-			start = stylesheetContent.indexOf("/*");
-			end = stylesheetContent.indexOf("*/", start + 2);
-			if (start != -1 && end != -1) {
-				stylesheetContent = stylesheetContent.substring(0, start) + stylesheetContent.substr(end + 2);
-			}
-		} while (start != -1 && end != -1);
-		return stylesheetContent;
-	}
-}
-
 function wrapMediaQuery(stylesheetContent, mediaQuery) {
 	if (mediaQuery) {
 		return "@media " + mediaQuery + "{ " + stylesheetContent + " }";

package/single-file-helper.js

@@ -273,7 +273,11 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 		element.setAttribute(IMAGE_ATTRIBUTE_NAME, data.images.length - 1);
 		data.markedElements.push(element);
 		element.removeAttribute(LAZY_SRC_ATTRIBUTE_NAME);
-		computedStyle = computedStyle || win.getComputedStyle(element);
+		try {
+			computedStyle = computedStyle || win.getComputedStyle(element);
+		} catch (error) {
+			// ignored
+		}
 		if (computedStyle) {
 			imageData.size = getSize(win, element, computedStyle);
 			const boxShadow = computedStyle.getPropertyValue("box-shadow");