SingleFile/lib/single-file/css-matched-rules.js

/*
 * Copyright 2018 Gildas Lormeau
 * contact : gildas.lormeau <at> gmail.com
 * 
 * This file is part of SingleFile.
 *
 *   SingleFile is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU Lesser General Public License as published by
 *   the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   SingleFile 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 Lesser General Public License for more details.
 *
 *   You should have received a copy of the GNU Lesser General Public License
 *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
 */

/* global cssTree */

this.matchedRules = this.matchedRules || (() => {

	const MEDIA_ALL = "all";
	const IGNORED_PSEUDO_ELEMENTS = ["after", "before", "first-letter", "first-line", "selection"];
	const REGEXP_VENDOR_IDENTIFIER = /-(ms|webkit|moz|o)-/;
	const DEBUG = false;

	class MatchedRules {
		constructor(doc, docStyle) {
			this.doc = doc;
			this.mediaAllInfo = createMediaInfo(MEDIA_ALL);
			const matchedElementsCache = new Map();
			let sheetIndex = 0;
			const styleElement = doc.createElement("style");
			doc.body.appendChild(styleElement);
			docStyle.stylesheets.forEach(stylesheetInfo => {
				if (stylesheetInfo.mediaText && stylesheetInfo.mediaText != MEDIA_ALL) {
					const mediaInfo = createMediaInfo(stylesheetInfo.mediaText);
					this.mediaAllInfo.medias.set("style-" + sheetIndex + "-" + stylesheetInfo.mediaText, mediaInfo);
					getMatchedElementsRules(doc, stylesheetInfo.stylesheet.children, mediaInfo, sheetIndex, docStyle, matchedElementsCache, styleElement.sheet);
				} else {
					getMatchedElementsRules(doc, stylesheetInfo.stylesheet.children, this.mediaAllInfo, sheetIndex, docStyle, matchedElementsCache, styleElement.sheet);
				}
				sheetIndex++;
			});
			let startTime;
			if (DEBUG) {
				startTime = Date.now();
				log("  -- STARTED sortRules");
			}
			sortRules(this.mediaAllInfo);
			if (DEBUG) {
				log("  -- ENDED sortRules", Date.now() - startTime);
				startTime = Date.now();
				log("  -- STARTED computeCascade");
			}
			computeCascade(this.mediaAllInfo, [], this.mediaAllInfo, styleElement.sheet);
			styleElement.remove();
			if (DEBUG) {
				log("  -- ENDED computeCascade", Date.now() - startTime);
			}
		}

		getMediaAllInfo() {
			return this.mediaAllInfo;
		}
	}

	return {
		getMediaAllInfo(doc, docStyle) {
			return new MatchedRules(doc, docStyle).getMediaAllInfo();
		}
	};

	function createMediaInfo(media) {
		const mediaInfo = { media: media, elements: new Map(), pseudos: new Map(), medias: new Map(), rules: new Map(), pseudoRules: new Map() };
		if (media == MEDIA_ALL) {
			mediaInfo.matchedStyles = new Map();
		}
		return mediaInfo;
	}

	function getMatchedElementsRules(doc, cssRules, mediaInfo, sheetIndex, docStyle, matchedElementsCache, stylesheet) {
		let mediaIndex = 0;
		let ruleIndex = 0;
		let startTime;
		if (DEBUG && cssRules.length > 1) {
			startTime = Date.now();
			log("  -- STARTED getMatchedElementsRules", " index =", sheetIndex, "rules.length =", cssRules.length);
		}
		cssRules.forEach(cssRule => {
			if (cssRule.block && cssRule.block.children && cssRule.prelude && cssRule.prelude.children) {
				if (cssRule.type == "Atrule" && cssRule.name == "media") {
					const mediaText = cssTree.generate(cssRule.prelude);
					const ruleMediaInfo = createMediaInfo(mediaText);
					mediaInfo.medias.set("rule-" + sheetIndex + "-" + mediaIndex + "-" + mediaText, ruleMediaInfo);
					mediaIndex++;
					getMatchedElementsRules(doc, cssRule.block.children, ruleMediaInfo, sheetIndex, docStyle, matchedElementsCache, stylesheet);
				} else if (cssRule.type == "Rule" && cssRule.prelude.children) {
					const selectors = cssRule.prelude.children.toArray();
					const selectorsText = cssRule.prelude.children.toArray().map(selector => cssTree.generate(selector));
					const ruleInfo = { cssRule, mediaInfo, ruleIndex, sheetIndex, matchedSelectors: new Set(), style: new Map(), selectors, selectorsText };
					if (!invalidSelector(selectorsText.join(","), stylesheet)) {
						for (let selector = cssRule.prelude.children.head, selectorIndex = 0; selector; selector = selector.next, selectorIndex++) {
							const selectorText = selectorsText[selectorIndex];
							const selectorInfo = { selector, selectorText, ruleInfo };
							getMatchedElementsSelector(doc, selectorInfo, docStyle, matchedElementsCache);
						}
					}
					ruleIndex++;
				}
			}
		});
		if (DEBUG && cssRules.length > 1) {
			log("  -- ENDED   getMatchedElementsRules", "delay =", Date.now() - startTime);
		}
	}

	function invalidSelector(selectorText, stylesheet) {
		let invalidSelector;
		try {
			stylesheet.insertRule(selectorText + "{}");
			stylesheet.deleteRule(0);
		} catch (error) {
			if (!selectorText.match(REGEXP_VENDOR_IDENTIFIER)) {
				invalidSelector = true;
			}
		}
		return invalidSelector;
	}

	function getMatchedElementsSelector(doc, selectorInfo, docStyle, matchedElementsCache) {
		let selectorText;
		const selectorData = cssTree.parse(cssTree.generate(selectorInfo.selector.data), { context: "selector" });
		const filteredSelectorText = getFilteredSelector({ data: selectorData });
		if (filteredSelectorText != selectorInfo.selectorText) {
			selectorText = filteredSelectorText;
		} else {
			selectorText = selectorInfo.selectorText;
		}
		const cachedMatchedElements = matchedElementsCache.get(selectorText);
		let matchedElements = cachedMatchedElements;
		if (!matchedElements) {
			try {
				matchedElements = doc.querySelectorAll(selectorText);
			} catch (error) {
				// ignored
				console.warn("(SingleFile) Invalid selector", selectorText); // eslint-disable-line no-console
			}
		}
		if (matchedElements) {
			if (!cachedMatchedElements) {
				matchedElementsCache.set(selectorText, matchedElements);
			}
			if (matchedElements.length) {
				if (filteredSelectorText == selectorInfo.selectorText) {
					matchedElements.forEach(element => addRule(element, selectorInfo, docStyle.styles));
				} else {
					let pseudoSelectors = selectorInfo.ruleInfo.mediaInfo.pseudoRules.get(selectorInfo.ruleInfo.cssRule);
					if (!pseudoSelectors) {
						pseudoSelectors = new Set();
						selectorInfo.ruleInfo.mediaInfo.pseudoRules.set(selectorInfo.ruleInfo.cssRule, pseudoSelectors);
					}
					pseudoSelectors.add(selectorInfo.selectorText);
					matchedElements.forEach(element => addPseudoRule(element, selectorInfo));
				}
			}
		}
	}

	function getFilteredSelector(selector) {
		const removedSelectors = [];
		selector = { data: cssTree.parse(cssTree.generate(selector.data), { context: "selector" }) };
		filterPseudoClasses(selector);
		if (removedSelectors.length) {
			removedSelectors.forEach(({ parentSelector, selector }) => {
				if (parentSelector.data.children.getSize() == 0 || !selector.prev || selector.prev.data.type == "Combinator") {
					parentSelector.data.children.replace(selector, cssTree.parse("*", { context: "selector" }).children.head);
				} else {
					parentSelector.data.children.remove(selector);
				}
			});
		}
		const selectorText = cssTree.generate(selector.data).trim();
		return selectorText;

		function filterPseudoClasses(selector, parentSelector) {
			if (selector.data.children) {
				for (let childSelector = selector.data.children.head; childSelector; childSelector = childSelector.next) {
					filterPseudoClasses(childSelector, selector);
				}
			}
			if ((selector.data.type == "PseudoClassSelector") ||
				(selector.data.type == "PseudoElementSelector" && (testVendorPseudo(selector) || IGNORED_PSEUDO_ELEMENTS.includes(selector.data.name)))) {
				removedSelectors.push({ parentSelector, selector });
			}
		}

		function testVendorPseudo(selector) {
			const name = selector.data.name;
			return name.startsWith("-") || name.startsWith("\\-");
		}
	}

	function addRule(element, selectorInfo, styles) {
		const mediaInfo = selectorInfo.ruleInfo.mediaInfo;
		const elementStyle = styles.get(element);
		let elementInfo = mediaInfo.elements.get(element);
		if (!elementInfo) {
			elementInfo = [];
			if (elementStyle) {
				elementInfo.push({ styleInfo: { cssStyle: elementStyle, style: new Map() } });
			}
			mediaInfo.elements.set(element, elementInfo);
		}
		const specificity = computeSpecificity(selectorInfo.selector.data);
		specificity.ruleIndex = selectorInfo.ruleInfo.ruleIndex;
		specificity.sheetIndex = selectorInfo.ruleInfo.sheetIndex;
		selectorInfo.specificity = specificity;
		elementInfo.push(selectorInfo);
	}

	function addPseudoRule(element, selectorInfo) {
		let elementInfo = selectorInfo.ruleInfo.mediaInfo.pseudos.get(element);
		if (!elementInfo) {
			elementInfo = [];
			selectorInfo.ruleInfo.mediaInfo.pseudos.set(element, elementInfo);
		}
		elementInfo.push(selectorInfo);
	}

	function computeCascade(mediaInfo, parentMediaInfo, mediaAllInfo, stylesheet) {
		mediaInfo.elements.forEach((elementInfo, element) => getStylesInfo(elementInfo, stylesheet, element).forEach((declarations, property) => {
			if (declarations.selectorInfo.ruleInfo || mediaInfo == mediaAllInfo) {
				let info;
				if (declarations.selectorInfo.ruleInfo) {
					info = declarations.selectorInfo.ruleInfo;
					const cssRule = info.cssRule;
					const ascendantMedia = [mediaInfo, ...parentMediaInfo].find(media => media.rules.get(cssRule)) || mediaInfo;
					ascendantMedia.rules.set(cssRule, info);
					if (cssRule) {
						info.matchedSelectors.add(declarations.selectorInfo.selectorText);
					}
				} else {
					info = declarations.selectorInfo.styleInfo;
					const cssStyle = info.cssStyle;
					const matchedStyleInfo = mediaAllInfo.matchedStyles.get(cssStyle);
					if (!matchedStyleInfo) {
						mediaAllInfo.matchedStyles.set(cssStyle, info);
					}
				}
				const styleValue = info.style.get(property);
				if (!styleValue) {
					info.style.set(property, declarations.styleValue);
				}
			}
		}));
		delete mediaInfo.elements;
		mediaInfo.medias.forEach(childMediaInfo => computeCascade(childMediaInfo, [mediaInfo, ...parentMediaInfo], mediaAllInfo, stylesheet));
	}

	function getStylesInfo(elementInfo, stylesheet/*, element */) {
		const stylesInfo = new Map();
		elementInfo.forEach(selectorInfo => {
			if (selectorInfo.styleInfo) {
				processDeclarations(selectorInfo.styleInfo.cssStyle.children, selectorInfo);
			} else {
				processDeclarations(selectorInfo.ruleInfo.cssRule.block.children, selectorInfo);
			}
		});
		return stylesInfo;

		function processDeclarations(declarations, selectorInfo) {
			const processedProperties = new Set();
			for (let declaration = declarations.tail; declaration; declaration = declaration.prev) {
				const declarationData = declaration.data;
				if (declarationData.type == "Declaration" && !processedProperties.has(declarationData.property) && !invalidDeclaration(cssTree.generate(declarationData), stylesheet)) {
					const styleValue = cssTree.generate(declarationData.value);
					const elementStyleInfo = stylesInfo.get(declarationData);
					if (styleValue.trim() && (!elementStyleInfo || (declarationData.important && !elementStyleInfo.important))) {
						stylesInfo.set(declarationData, { selectorInfo, styleValue, important: declarationData.important });
						processedProperties.add(declarationData.property);
					}
				}
			}
		}
	}

	function invalidDeclaration(declarationText, stylesheet) {
		let invalidDeclaration;
		stylesheet.insertRule("single-file-declaration { " + declarationText + "}");
		if (!stylesheet.cssRules[0].style.length) {
			if (!declarationText.match(REGEXP_VENDOR_IDENTIFIER)) {
				invalidDeclaration = true;
			}
		}
		stylesheet.deleteRule(0);
		return invalidDeclaration;
	}

	function sortRules(media) {
		media.elements.forEach(elementRules => elementRules.sort((ruleInfo1, ruleInfo2) =>
			ruleInfo1.styleInfo && !ruleInfo2.styleInfo ? -1 :
				!ruleInfo1.styleInfo && ruleInfo2.styleInfo ? 1 :
					compareSpecificity(ruleInfo1.specificity, ruleInfo2.specificity)));
		media.medias.forEach(sortRules);
	}

	function computeSpecificity(selector, specificity = { a: 0, b: 0, c: 0 }) {
		if (selector.type == "IdSelector") {
			specificity.a++;
		}
		if (selector.type == "ClassSelector" || selector.type == "AttributeSelector" || (selector.type == "PseudoClassSelector" && selector.name != "not")) {
			specificity.b++;
		}
		if ((selector.type == "TypeSelector" && selector.name != "*") || selector.type == "PseudoElementSelector") {
			specificity.c++;
		}
		if (selector.children) {
			selector.children.forEach(selector => computeSpecificity(selector, specificity));
		}
		return specificity;
	}

	function compareSpecificity(specificity1, specificity2) {
		if (specificity1.a > specificity2.a) {
			return -1;
		} else if (specificity1.a < specificity2.a) {
			return 1;
		} else if (specificity1.b > specificity2.b) {
			return -1;
		} else if (specificity1.b < specificity2.b) {
			return 1;
		} else if (specificity1.c > specificity2.c) {
			return -1;
		} else if (specificity1.c < specificity2.c) {
			return 1;
		} else if (specificity1.sheetIndex > specificity2.sheetIndex) {
			return -1;
		} else if (specificity1.sheetIndex < specificity2.sheetIndex) {
			return 1;
		} else if (specificity1.ruleIndex > specificity2.ruleIndex) {
			return -1;
		} else if (specificity1.ruleIndex < specificity2.ruleIndex) {
			return 1;
		} else {
			return -1;
		}
	}

	function log(...args) {
		console.log("S-File <css-mat>", ...args); // eslint-disable-line no-console
	}

})();