single-file-core 1.0.13 → 1.0.16

package/modules/css-fonts-minifier.js

@@ -244,7 +244,7 @@ function getFontFamilyNames(declarations) {
 	const font = declarations.children.filter(node => node.property == "font").tail;
 	if (font && font.data && font.data.value) {
 		try {
-			const parsedFont = fontPropertyParser.parse(cssTree.generate(font.data.value));
+			const parsedFont = fontPropertyParser.parse(font.data.value);
 			parsedFont.family.forEach(familyName => fontFamilyNames.push(helper.normalizeFontFamily(familyName)));
 		} catch (error) {
 			// ignored				

package/package.json

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

package/processors/frame-tree/content/content-frame-tree.js

@@ -233,7 +233,6 @@ function initResponse(message) {
 				frameData.videos = messageFrameData.videos;
 				frameData.usedFonts = messageFrameData.usedFonts;
 				frameData.shadowRoots = messageFrameData.shadowRoots;
-				frameData.imports = messageFrameData.imports;
 				frameData.processed = messageFrameData.processed;
 			}
 		});
@@ -401,7 +400,6 @@ function getFrameData(document, globalThis, windowId, options) {
 		videos: docData.videos,
 		usedFonts: docData.usedFonts,
 		shadowRoots: docData.shadowRoots,
-		imports: docData.imports,
 		processed: true
 	};
 }

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

@@ -41,7 +41,6 @@ const NEW_FONT_FACE_EVENT = "single-file-new-font-face";
 const DELETE_FONT_EVENT = "single-file-delete-font";
 const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
 
-const browser = globalThis.browser;
 const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
 const dispatchEvent = event => { try { globalThis.dispatchEvent(event); } catch (error) {  /* ignored */ } };
 const CustomEvent = globalThis.CustomEvent;
@@ -69,17 +68,6 @@ if (document instanceof Document) {
 		fontFaces.delete(JSON.stringify(key));
 	});
 	addEventListener(CLEAR_FONTS_EVENT, () => fontFaces = new Map());
-	let scriptElement = document.createElement("script");
-	scriptElement.src = "data:," + "(" + injectedScript.toString() + ")()";
-	(document.documentElement || document).appendChild(scriptElement);
-	scriptElement.remove();
-	if (browser && browser.runtime && browser.runtime.getURL) {
-		scriptElement = document.createElement("script");
-		scriptElement.src = browser.runtime.getURL("/lib/single-file-hooks-frames.js");
-		scriptElement.async = false;
-		(document.documentElement || document).appendChild(scriptElement);
-		scriptElement.remove();
-	}
 }
 
 export {
@@ -135,80 +123,4 @@ function loadDeferredImagesResetZoomLevel(options) {
 	} else {
 		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_RESET_EVENT));
 	}
-}
-
-function injectedScript() {
-	if (typeof globalThis == "undefined") {
-		window.globalThis = window;
-	}
-	const document = globalThis.document;
-	const console = globalThis.console;
-	const dispatchEvent = event => globalThis.dispatchEvent(event);
-	const CustomEvent = globalThis.CustomEvent;
-	const FileReader = globalThis.FileReader;
-	const Blob = globalThis.Blob;
-	const warn = (console && console.warn && ((...args) => console.warn(...args))) || (() => { });
-	const NEW_FONT_FACE_EVENT = "single-file-new-font-face";
-	const DELETE_FONT_EVENT = "single-file-delete-font";
-	const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
-	const FONT_STYLE_PROPERTIES = {
-		family: "font-family",
-		style: "font-style",
-		weight: "font-weight",
-		stretch: "font-stretch",
-		unicodeRange: "unicode-range",
-		variant: "font-variant",
-		featureSettings: "font-feature-settings"
-	};
-
-	if (globalThis.FontFace) {
-		const FontFace = globalThis.FontFace;
-		let warningFontFaceDisplayed;
-		globalThis.FontFace = function () {
-			if (!warningFontFaceDisplayed) {
-				warn("SingleFile is hooking the FontFace constructor, document.fonts.delete and document.fonts.clear to handle dynamically loaded fonts.");
-				warningFontFaceDisplayed = true;
-			}
-			getDetailObject(...arguments).then(detail => dispatchEvent(new CustomEvent(NEW_FONT_FACE_EVENT, { detail })));
-			return new FontFace(...arguments);
-		};
-		globalThis.FontFace.toString = function () { return "function FontFace() { [native code] }"; };
-		const deleteFont = document.fonts.delete;
-		document.fonts.delete = function (fontFace) {
-			getDetailObject(fontFace.family).then(detail => dispatchEvent(new CustomEvent(DELETE_FONT_EVENT, { detail })));
-			return deleteFont.call(document.fonts, fontFace);
-		};
-		document.fonts.delete.toString = function () { return "function delete() { [native code] }"; };
-		const clearFonts = document.fonts.clear;
-		document.fonts.clear = function () {
-			dispatchEvent(new CustomEvent(CLEAR_FONTS_EVENT));
-			return clearFonts.call(document.fonts);
-		};
-		document.fonts.clear.toString = function () { return "function clear() { [native code] }"; };
-	}
-
-	async function getDetailObject(fontFamily, src, descriptors) {
-		const detail = {};
-		detail["font-family"] = fontFamily;
-		detail.src = src;
-		if (descriptors) {
-			Object.keys(descriptors).forEach(descriptor => {
-				if (FONT_STYLE_PROPERTIES[descriptor]) {
-					detail[FONT_STYLE_PROPERTIES[descriptor]] = descriptors[descriptor];
-				}
-			});
-		}
-		return new Promise(resolve => {
-			if (detail.src instanceof ArrayBuffer) {
-				const reader = new FileReader();
-				reader.readAsDataURL(new Blob([detail.src]));
-				reader.addEventListener("load", () => {
-					detail.src = "url(" + reader.result + ")";
-					resolve(detail);
-				});
-			} else {
-				resolve(detail);
-			}
-		});
-	}
 }

package/processors/index.js

@@ -22,13 +22,11 @@
  */
 
 import * as frameTree from "./frame-tree/content/content-frame-tree.js";
-import * as hooks from "./hooks/content/content-hooks.js";
 import * as hooksFrames from "./hooks/content/content-hooks-frames.js";
 import * as lazy from "./lazy/content/content-lazy-loader.js";
 
 export {
 	frameTree,
-	hooks,
 	hooksFrames,
 	lazy
 };

package/single-file-core.js

@@ -116,8 +116,7 @@ const STAGES = [{
 	parallel: [
 		{ option: "blockVideos", action: "insertMissingVideoPosters" },
 		{ action: "resolveStylesheetURLs" },
-		{ option: "!removeFrames", action: "resolveFrameURLs" },
-		{ action: "resolveHtmlImportURLs" }
+		{ option: "!removeFrames", action: "resolveFrameURLs" }
 	]
 }, {
 	sequential: [
@@ -137,8 +136,7 @@ const STAGES = [{
 	],
 	parallel: [
 		{ option: "removeAlternativeFonts", action: "removeAlternativeFonts" },
-		{ option: "!removeFrames", action: "processFrames" },
-		{ option: "!removeImports", action: "processHtmlImports" },
+		{ option: "!removeFrames", action: "processFrames" }
 	]
 }, {
 	sequential: [
@@ -178,7 +176,6 @@ class Runner {
 			this.options.videos = docData.videos;
 			this.options.usedFonts = docData.usedFonts;
 			this.options.shadowRoots = docData.shadowRoots;
-			this.options.imports = docData.imports;
 			this.options.referrer = docData.referrer;
 			this.markedElements = docData.markedElements;
 			this.invalidElements = docData.invalidElements;
@@ -212,9 +209,6 @@ class Runner {
 			if (this.options.frames) {
 				this.options.frames.forEach(cancelRunner);
 			}
-			if (this.options.imports) {
-				this.options.imports.forEach(cancelRunner);
-			}
 		}
 
 		function cancelRunner(resourceData) {
@@ -428,9 +422,6 @@ class Processor {
 		if (!this.options.saveRawPage && !this.options.removeFrames && this.options.frames) {
 			this.options.frames.forEach(frameData => this.maxResources += frameData.maxResources || 0);
 		}
-		if (!this.options.removeImports && this.options.imports) {
-			this.options.imports.forEach(importData => this.maxResources += importData.maxResources || 0);
-		}
 		this.stats.set("processed", "resources", this.maxResources);
 	}
 
@@ -794,6 +785,7 @@ class Processor {
 			this.doc.querySelectorAll("link[rel*=\"icon\"]").forEach(element => element.remove());
 		}
 		this.doc.querySelectorAll("a[ping]").forEach(element => element.removeAttribute("ping"));
+		this.doc.querySelectorAll("link[rel=import][href]").forEach(element => element.remove());
 	}
 
 	replaceInvalidElements() {
@@ -1134,7 +1126,6 @@ class Processor {
 				options.videos = frameData.videos;
 				options.usedFonts = frameData.usedFonts;
 				options.shadowRoots = frameData.shadowRoots;
-				options.imports = frameData.imports;
 				frameData.runner = new Runner(options);
 				frameData.frameElement = frameElement;
 				await frameData.runner.loadPage();
@@ -1197,49 +1188,6 @@ class Processor {
 		}
 	}
 
-	async resolveHtmlImportURLs() {
-		const linkElements = Array.from(this.doc.querySelectorAll("link[rel=import][href]"));
-		await Promise.all(linkElements.map(async linkElement => {
-			const resourceURL = linkElement.href;
-			if (this.options.saveOriginalURLs && !isDataURL(resourceURL)) {
-				linkElement.setAttribute("data-sf-original-href", resourceURL);
-			}
-			linkElement.removeAttribute("href");
-			const options = Object.create(this.options);
-			options.insertSingleFileComment = false;
-			options.insertCanonicalLink = false;
-			options.insertMetaNoIndex = false;
-			options.saveFavicon = false;
-			options.removeUnusedStyles = false;
-			options.removeAlternativeMedias = false;
-			options.removeUnusedFonts = false;
-			options.removeHiddenElements = false;
-			options.url = resourceURL;
-			const attributeValue = linkElement.getAttribute(util.HTML_IMPORT_ATTRIBUTE_NAME);
-			if (attributeValue) {
-				const importData = options.imports[Number(attributeValue)];
-				if (importData) {
-					options.content = importData.content;
-					importData.runner = new Runner(options);
-					await importData.runner.loadPage();
-					await importData.runner.initialize();
-					if (!options.removeImports) {
-						importData.maxResources = importData.runner.batchRequest.getMaxResources();
-					}
-					importData.runner.getStyleSheets().forEach(stylesheet => {
-						const importedStyleElement = this.doc.createElement("style");
-						linkElement.insertAdjacentElement("afterEnd", importedStyleElement);
-						this.stylesheets.set(importedStyleElement, stylesheet);
-					});
-				}
-			}
-			if (options.removeImports) {
-				linkElement.remove();
-				this.stats.add("discarded", "HTML imports", 1);
-			}
-		}));
-	}
-
 	removeUnusedStyles() {
 		if (!this.mediaAllInfo) {
 			this.mediaAllInfo = util.getMediaAllInfo(this.doc, this.stylesheets, this.styles);
@@ -1393,26 +1341,6 @@ class Processor {
 		}
 	}
 
-	async processHtmlImports() {
-		const linkElements = Array.from(this.doc.querySelectorAll("link[rel=import]"));
-		await Promise.all(linkElements.map(async linkElement => {
-			const attributeValue = linkElement.getAttribute(util.HTML_IMPORT_ATTRIBUTE_NAME);
-			if (attributeValue) {
-				const importData = this.options.imports[Number(attributeValue)];
-				if (importData.runner) {
-					this.stats.add("processed", "HTML imports", 1);
-					await importData.runner.run();
-					const pageData = await importData.runner.getPageData();
-					linkElement.removeAttribute(util.HTML_IMPORT_ATTRIBUTE_NAME);
-					linkElement.setAttribute("href", "data:text/html," + pageData.content);
-					this.stats.addAll(pageData);
-				} else {
-					this.stats.add("discarded", "HTML imports", 1);
-				}
-			}
-		}));
-	}
-
 	replaceStylesheets() {
 		this.doc.querySelectorAll("style").forEach(styleElement => {
 			const stylesheetInfo = this.stylesheets.get(styleElement);
@@ -2280,7 +2208,6 @@ const STATS_DEFAULT_VALUES = {
 	discarded: {
 		"HTML bytes": 0,
 		"hidden elements": 0,
-		"HTML imports": 0,
 		scripts: 0,
 		objects: 0,
 		"audio sources": 0,
@@ -2295,7 +2222,6 @@ const STATS_DEFAULT_VALUES = {
 	processed: {
 		"HTML bytes": 0,
 		"hidden elements": 0,
-		"HTML imports": 0,
 		scripts: 0,
 		objects: 0,
 		"audio sources": 0,

package/{processors/hooks/content/content-hooks.js → single-file-frames.js}

@@ -21,19 +21,4 @@
  *   Source.
  */
 
-/* global globalThis */
-
-const browser = globalThis.browser;
-const document = globalThis.document;
-const Document = globalThis.Document;
-
-if (document instanceof Document) {
-	const scriptElement = document.createElement("script");
-	scriptElement.async = false;
-	if (browser && browser.runtime && browser.runtime.getURL) {
-		scriptElement.src = browser.runtime.getURL("/lib/single-file-hooks.js");
-		scriptElement.async = false;
-	}
-	(document.documentElement || document).appendChild(scriptElement);
-	scriptElement.remove();
-}
+export * from "./processors/frame-tree/content/content-frame-tree.js";

package/single-file-helper.js

@@ -39,7 +39,6 @@ const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
 const POSTER_ATTRIBUTE_NAME = "data-single-file-poster";
 const VIDEO_ATTRIBUTE_NAME = "data-single-file-video";
 const CANVAS_ATTRIBUTE_NAME = "data-single-file-canvas";
-const HTML_IMPORT_ATTRIBUTE_NAME = "data-single-file-import";
 const STYLE_ATTRIBUTE_NAME = "data-single-file-movable-style";
 const INPUT_VALUE_ATTRIBUTE_NAME = "data-single-file-input-value";
 const LAZY_SRC_ATTRIBUTE_NAME = "data-single-file-lazy-loaded-src";
@@ -90,7 +89,6 @@ export {
 	CANVAS_ATTRIBUTE_NAME,
 	INPUT_VALUE_ATTRIBUTE_NAME,
 	SHADOW_ROOT_ATTRIBUTE_NAME,
-	HTML_IMPORT_ATTRIBUTE_NAME,
 	STYLE_ATTRIBUTE_NAME,
 	LAZY_SRC_ATTRIBUTE_NAME,
 	STYLESHEET_ATTRIBUTE_NAME,
@@ -165,7 +163,6 @@ function preProcessDoc(doc, win, options) {
 			videos: [],
 			usedFonts: [],
 			shadowRoots: [],
-			imports: [],
 			markedElements: []
 		};
 	}
@@ -178,14 +175,13 @@ function preProcessDoc(doc, win, options) {
 		videos: elementsInfo.videos,
 		usedFonts: Array.from(elementsInfo.usedFonts.values()),
 		shadowRoots: elementsInfo.shadowRoots,
-		imports: elementsInfo.imports,
 		referrer: doc.referrer,
 		markedElements: elementsInfo.markedElements,
 		invalidElements
 	};
 }
 
-function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], videos: [], shadowRoots: [], imports: [], markedElements: [] }, ascendantHidden) {
+function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], videos: [], shadowRoots: [], markedElements: [] }, ascendantHidden) {
 	const elements = Array.from(element.childNodes).filter(node => (node instanceof win.HTMLElement) || (node instanceof win.SVGElement));
 	elements.forEach(element => {
 		let elementHidden, elementKept, computedStyle;
@@ -329,13 +325,6 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 			data.markedElements.push(element);
 		}
 	}
-	if (element.tagName == "LINK") {
-		if (element.import && element.import.documentElement) {
-			data.imports.push({ content: serialize(element.import) });
-			element.setAttribute(HTML_IMPORT_ATTRIBUTE_NAME, data.imports.length - 1);
-			data.markedElements.push(element);
-		}
-	}
 	if (element.tagName == "INPUT") {
 		if (element.type != "password") {
 			element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.value);
@@ -429,7 +418,7 @@ function postProcessDoc(doc, markedElements, invalidElements) {
 		doc.head.querySelectorAll("*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)").forEach(element => element.removeAttribute("hidden"));
 	}
 	if (!markedElements) {
-		const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, VIDEO_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, HTML_IMPORT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
+		const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, VIDEO_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
 		markedElements = doc.querySelectorAll(singleFileAttributes.map(name => "[" + name + "]").join(","));
 	}
 	markedElements.forEach(element => {
@@ -444,7 +433,6 @@ function postProcessDoc(doc, markedElements, invalidElements) {
 		element.removeAttribute(CANVAS_ATTRIBUTE_NAME);
 		element.removeAttribute(INPUT_VALUE_ATTRIBUTE_NAME);
 		element.removeAttribute(SHADOW_ROOT_ATTRIBUTE_NAME);
-		element.removeAttribute(HTML_IMPORT_ATTRIBUTE_NAME);
 		element.removeAttribute(STYLESHEET_ATTRIBUTE_NAME);
 		element.removeAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME);
 		element.removeAttribute(STYLE_ATTRIBUTE_NAME);

package/single-file-hooks-frames.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2010-2022 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ * 
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or 
+ *   modify it under the terms of the GNU Affero General Public License 
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ * 
+ *   The code in this file is distributed in the hope that it will be useful, 
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of 
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero 
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may 
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU 
+ *   AGPL normally required by section 4, provided you include this license 
+ *   notice and a URL through which recipients can access the Corresponding 
+ *   Source.
+ */
+
+import "./processors/hooks/content/content-hooks-frames-web.js";

package/single-file-hooks.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2010-2022 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ * 
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or 
+ *   modify it under the terms of the GNU Affero General Public License 
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ * 
+ *   The code in this file is distributed in the hope that it will be useful, 
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of 
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero 
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may 
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU 
+ *   AGPL normally required by section 4, provided you include this license 
+ *   notice and a URL through which recipients can access the Corresponding 
+ *   Source.
+ */
+
+import "./processors/hooks/content/content-hooks-web.js";

package/single-file-infobar.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2010-2022 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ * 
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or 
+ *   modify it under the terms of the GNU Affero General Public License 
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ * 
+ *   The code in this file is distributed in the hope that it will be useful, 
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of 
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero 
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may 
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU 
+ *   AGPL normally required by section 4, provided you include this license 
+ *   notice and a URL through which recipients can access the Corresponding 
+ *   Source.
+ */
+
+import "./common/content-infobar-web.js";

package/single-file-util.js

@@ -179,7 +179,6 @@ function getInstance(utilOptions) {
 		POSTER_ATTRIBUTE_NAME: helper.POSTER_ATTRIBUTE_NAME,
 		VIDEO_ATTRIBUTE_NAME: helper.VIDEO_ATTRIBUTE_NAME,
 		CANVAS_ATTRIBUTE_NAME: helper.CANVAS_ATTRIBUTE_NAME,
-		HTML_IMPORT_ATTRIBUTE_NAME: helper.HTML_IMPORT_ATTRIBUTE_NAME,
 		STYLE_ATTRIBUTE_NAME: helper.STYLE_ATTRIBUTE_NAME,
 		INPUT_VALUE_ATTRIBUTE_NAME: helper.INPUT_VALUE_ATTRIBUTE_NAME,
 		SHADOW_ROOT_ATTRIBUTE_NAME: helper.SHADOW_ROOT_ATTRIBUTE_NAME,

package/vendor/css-font-property-parser.js

@@ -48,6 +48,7 @@
  * SOFTWARE.
  */
 
+import * as cssTree from "./css-tree.js";
 const REGEXP_SIMPLE_QUOTES_STRING = /^'(.*?)'$/;
 const REGEXP_DOUBLE_QUOTES_STRING = /^"(.*?)"$/;
 
@@ -100,28 +101,6 @@ const fontStretchKeywords = [
 	"ultra-expanded"
 ];
 
-const cssFontSizeKeywords = [
-	"xx-small",
-	"x-small",
-	"small",
-	"medium",
-	"large",
-	"x-large",
-	"xx-large",
-	"larger",
-	"smaller"
-];
-
-const cssListHelpers = {
-	splitBySpaces,
-	split,
-	splitByCommas
-};
-
-const helpers = {
-	isSize
-};
-
 const errorPrefix = "[parse-css-font] ";
 
 export {
@@ -129,15 +108,11 @@ export {
 };
 
 function parse(value) {
-	if (typeof value !== "string") {
-		throw new TypeError(errorPrefix + "Expected a string.");
-	}
-	if (value === "") {
-		throw error("Cannot parse an empty string.");
-	}
-	if (systemFontKeywords.indexOf(value) !== -1) {
-		return { system: value };
+	const stringValue = cssTree.generate(value);
+	if (systemFontKeywords.indexOf(stringValue) !== -1) {
+		return { system: stringValue };
 	}
+	const tokens = value.children;
 
 	const font = {
 		lineHeight: "normal",
@@ -148,10 +123,8 @@ function parse(value) {
 	};
 
 	let isLocked = false;
-	const tokens = cssListHelpers.splitBySpaces(value);
-	let token = tokens.shift();
-	for (; token; token = tokens.shift()) {
-
+	for (let tokenNode = tokens.head; tokenNode; tokenNode = tokenNode.next) {
+		const token = cssTree.generate(tokenNode.data);
 		if (token === "normal" || globalKeywords.indexOf(token) !== -1) {
 			["style", "variant", "weight", "stretch"].forEach((prop) => {
 				font[prop] = token;
@@ -184,19 +157,29 @@ function parse(value) {
 			continue;
 		}
 
-		if (helpers.isSize(token)) {
-			const parts = cssListHelpers.split(token, ["/"]);
-			font.size = parts[0];
-			if (parts[1]) {
-				font.lineHeight = parseLineHeight(parts[1]);
-			} else if (tokens[0] === "/") {
-				tokens.shift();
-				font.lineHeight = parseLineHeight(tokens.shift());
+		if (tokenNode.data.type == "Dimension") {
+			font.size = cssTree.generate(tokenNode.data);
+			tokenNode = tokenNode.next;
+			if (tokenNode && tokenNode.data.type == "Operator" && tokenNode.data.value == "/" && tokenNode.next) {
+				tokenNode = tokenNode.next;
+				font.lineHeight = cssTree.generate(tokenNode.data);
+				tokenNode = tokenNode.next;
+			} else if (tokens.head.data.type == "Operator" && tokens.head.data.value == "/" && tokens.head.next) {
+				font.lineHeight = cssTree.generate(tokens.head.next.data);
+				tokenNode = tokens.head.next.next;
 			}
-			if (!tokens.length) {
+			if (!tokenNode) {
 				throw error("Missing required font-family.");
 			}
-			font.family = cssListHelpers.splitByCommas(tokens.join(" ")).map(removeQuotes);
+			font.family = [];
+			for (; tokenNode; tokenNode = tokenNode.next) {
+				while (tokenNode && tokenNode.data.type == "Operator" && tokenNode.data.value == ",") {
+					tokenNode = tokenNode.next;
+				}
+				if (tokenNode) {
+					font.family.push(removeQuotes(cssTree.generate(tokenNode.data)));
+				}
+			}
 			return font;
 		}
 
@@ -217,122 +200,6 @@ function error(message) {
 	return new Error(errorPrefix + message);
 }
 
-function parseLineHeight(value) {
-	const parsed = parseFloat(value);
-	if (parsed.toString() === value) {
-		return parsed;
-	}
-	return value;
-}
-
-/**
- * Splits a CSS declaration value (shorthand) using provided separators
- * as the delimiters.
- */
-function split(
-	/**
-	 * A CSS declaration value (shorthand).
-	 */
-	value,
-	/**
-	 * Any number of separator characters used for splitting.
-	 */
-	separators,
-	{
-		last = false,
-	} = {},
-) {
-	if (typeof value !== "string") {
-		throw new TypeError("expected a string");
-	}
-	if (!Array.isArray(separators)) {
-		throw new TypeError("expected a string array of separators");
-	}
-	if (typeof last !== "boolean") {
-		throw new TypeError("expected a Boolean value for options.last");
-	}
-	const array = [];
-	let current = "";
-	let splitMe = false;
-
-	let func = 0;
-	let quote = false;
-	let escape = false;
-
-	for (const char of value) {
-
-		if (quote) {
-			if (escape) {
-				escape = false;
-			} else if (char === "\\") {
-				escape = true;
-			} else if (char === quote) {
-				quote = false;
-			}
-		} else if (char === "\"" || char === "'") {
-			quote = char;
-		} else if (char === "(") {
-			func += 1;
-		} else if (char === ")") {
-			if (func > 0) {
-				func -= 1;
-			}
-		} else if (func === 0) {
-			if (separators.indexOf(char) !== -1) {
-				splitMe = true;
-			}
-		}
-
-		if (splitMe) {
-			if (current !== "") {
-				array.push(current.trim());
-			}
-			current = "";
-			splitMe = false;
-		} else {
-			current += char;
-		}
-	}
-
-	if (last || current !== "") {
-		array.push(current.trim());
-	}
-	return array;
-}
-
-/**
- * Splits a CSS declaration value (shorthand) using whitespace characters
- * as the delimiters.
- */
-function splitBySpaces(
-	/**
-	 * A CSS declaration value (shorthand).
-	 */
-	value,
-) {
-	const spaces = [" ", "\n", "\t"];
-	return split(value, spaces);
-}
-
-/**
- * Splits a CSS declaration value (shorthand) using commas as the delimiters.
- */
-function splitByCommas(
-	/**
-	 * A CSS declaration value (shorthand).
-	 */
-	value,
-) {
-	const comma = ",";
-	return split(value, [comma], { last: true });
-}
-
-function isSize(value) {
-	return !isNaN(parseFloat(value))
-		|| value.indexOf("/") !== -1
-		|| cssFontSizeKeywords.indexOf(value) !== -1;
-}
-
 function removeQuotes(string) {
 	if (string.match(REGEXP_SIMPLE_QUOTES_STRING)) {
 		string = string.replace(REGEXP_SIMPLE_QUOTES_STRING, "$1");