/* * Copyright 2018 Gildas Lormeau * contact : gildas.lormeau 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 . */ /* global CSSRule, cssWhat, parseCss */ this.RulesMatcher = this.RulesMatcher || (() => { const MEDIA_ALL = "all"; const PRIORITY_IMPORTANT = "important"; const IGNORED_PSEUDO_CLASSES = [":focus", ":focus-within", ":hover", ":link", ":visited", ":active"]; class RulesMatcher { constructor(doc) { this.doc = doc; this.mediaAllInfo = createMediaInfo(MEDIA_ALL); const matchedElementsCache = new Map(); const unmatchedSelectorsCache = []; doc.querySelectorAll("style").forEach((styleElement, styleIndex) => { if (styleElement.sheet) { if (styleElement.media && styleElement.media != MEDIA_ALL) { const mediaInfo = createMediaInfo(styleElement.media); this.mediaAllInfo.medias.set(styleIndex + "-" + styleElement.media, mediaInfo); getMatchedElementsRules(doc, styleElement.sheet.cssRules, mediaInfo, styleIndex, matchedElementsCache, unmatchedSelectorsCache); } else { getMatchedElementsRules(doc, styleElement.sheet.cssRules, this.mediaAllInfo, styleIndex, matchedElementsCache, unmatchedSelectorsCache); } } }); sortRules(this.mediaAllInfo); computeCascade(this.mediaAllInfo, [], this.mediaAllInfo); } getAllMatchedRules() { return this.mediaAllInfo; } getMatchedRules(element) { this.mediaAllInfo.elements.get(element); } } return { create(doc) { return new RulesMatcher(doc); } }; function getMatchedElementsRules(doc, cssRules, mediaInfo, sheetIndex, matchedElementsCache, unmatchedSelectorsCache) { Array.from(cssRules).forEach((cssRule, ruleIndex) => { if (cssRule.type == CSSRule.MEDIA_RULE) { const ruleMediaInfo = createMediaInfo(cssRule.media); mediaInfo.medias.set(cssRule.media, ruleMediaInfo); getMatchedElementsRules(doc, cssRule.cssRules, ruleMediaInfo, sheetIndex, matchedElementsCache, unmatchedSelectorsCache); } else if (cssRule.type == CSSRule.STYLE_RULE) { if (cssRule.selectorText) { let selectors = cssWhat.parse(cssRule.selectorText); const selectorsText = selectors.map(selector => cssWhat.stringify([selector])); selectors.forEach((selector, selectorIndex) => getMatchedElementsSelector(doc, cssRule, selector, selectorsText[selectorIndex], selectorsText, mediaInfo, ruleIndex, sheetIndex, matchedElementsCache, unmatchedSelectorsCache)); } } }); } function getMatchedElementsSelector(doc, cssRule, selector, selectorText, selectorsText, mediaInfo, ruleIndex, sheetIndex, matchedElementsCache, unmatchedSelectorsCache) { let matchedElements = matchedElementsCache.get(selectorText); if (!matchedElements) { if (unmatchedSelectorsCache.find(selector => selectorText.startsWith(selector))) { matchedElements = []; } else { matchedElements = doc.querySelectorAll(selectorText); if (!matchedElements.length) { unmatchedSelectorsCache.push(selectorText + " "); } } matchedElementsCache.set(selectorText, matchedElements); } if (matchedElements.length) { matchedElements.forEach(element => { let elementInfo; if (mediaInfo.elements.has(element)) { elementInfo = mediaInfo.elements.get(element); } else { elementInfo = []; const elementStyle = element.getAttribute("style"); if (elementStyle) { elementInfo.push({ cssStyle: element.style }); } mediaInfo.elements.set(element, elementInfo); } const specificity = computeSpecificity(selector); specificity.ruleIndex = ruleIndex; specificity.sheetIndex = sheetIndex; let ruleInfo = elementInfo.find(ruleInfo => ruleInfo.cssRule == cssRule); if (ruleInfo) { if (!IGNORED_PSEUDO_CLASSES.find(pseudoClass => selectorText.includes(pseudoClass)) && compareSpecificity(ruleInfo.specificity, specificity) == 1) { ruleInfo.specificity = specificity; ruleInfo.selectorText = selectorText; } } else { ruleInfo = { cssRule, specificity, selectorText, selectorsText }; elementInfo.push(ruleInfo); } }); } } function computeCascade(mediaInfo, parentMediaInfos, mediaAllInfo) { mediaInfo.elements.forEach(elementInfo => getStylesInfo(elementInfo).forEach((elementStyleInfo, styleName) => { let ruleInfo, ascendantMedia; if (elementStyleInfo.cssRule) { ascendantMedia = [mediaInfo, ...parentMediaInfos].find(media => media.rules.get(elementStyleInfo.cssRule)) || mediaInfo; ruleInfo = ascendantMedia.rules.get(elementStyleInfo.cssRule); } else if (mediaInfo == mediaAllInfo) { ruleInfo = mediaAllInfo.styles.get(elementStyleInfo.cssStyle); } if (!ruleInfo) { ruleInfo = { style: new Map(), matchedSelectors: new Set(), selectorsText: elementStyleInfo.selectorsText }; } if (elementStyleInfo.cssRule) { ascendantMedia.rules.set(elementStyleInfo.cssRule, ruleInfo); } else if (mediaInfo == mediaAllInfo) { mediaAllInfo.styles.set(elementStyleInfo.cssStyle, ruleInfo); } if (elementStyleInfo.selectorText) { ruleInfo.matchedSelectors.add(elementStyleInfo.selectorText); } const styleValue = ruleInfo.style.get(styleName); if (!styleValue) { ruleInfo.style.set(styleName, elementStyleInfo.styleValue); } })); mediaInfo.medias.forEach(childMediaInfo => computeCascade(childMediaInfo, [mediaInfo, ...parentMediaInfos])); } function getStylesInfo(elementInfo) { const elementStylesInfo = new Map(); elementInfo.forEach(ruleInfo => { if (ruleInfo.cssStyle) { const cssStyle = ruleInfo.cssStyle; const stylesInfo = parseCss.parseAListOfDeclarations(cssStyle.cssText); stylesInfo.forEach(styleInfo => { const important = cssStyle.getPropertyPriority(styleInfo.name) == PRIORITY_IMPORTANT; const styleValue = cssStyle.getPropertyValue(styleInfo.name) + (important ? "!" + PRIORITY_IMPORTANT : ""); elementStylesInfo.set(styleInfo.name, { styleValue, cssStyle: ruleInfo.cssStyle, important }); }); } else { const cssStyle = ruleInfo.cssRule.style; const stylesInfo = parseCss.parseAListOfDeclarations(cssStyle.cssText); stylesInfo.forEach(styleInfo => { const important = cssStyle.getPropertyPriority(styleInfo.name) == PRIORITY_IMPORTANT; const styleValue = cssStyle.getPropertyValue(styleInfo.name) + (important ? "!" + PRIORITY_IMPORTANT : ""); let elementStyleInfo = elementStylesInfo.get(styleInfo.name); if (!elementStyleInfo || (important && !elementStyleInfo.important)) { elementStylesInfo.set(styleInfo.name, { styleValue, cssRule: ruleInfo.cssRule, selectorText: ruleInfo.selectorText, selectorsText: ruleInfo.selectorsText, important }); } }); } }); return elementStylesInfo; } function createMediaInfo(media) { const mediaInfo = { media: media, elements: new Map(), medias: new Map(), rules: new Map() }; if (media == MEDIA_ALL) { mediaInfo.styles = new Map(); } return mediaInfo; } function sortRules(media) { media.elements.forEach(elementRules => elementRules.sort((ruleInfo1, ruleInfo2) => ruleInfo1.cssStyle && !ruleInfo2.cssStyle ? -1 : !ruleInfo1.cssStyle && ruleInfo2.cssStyle ? 1 : compareSpecificity(ruleInfo1.specificity, ruleInfo2.specificity))); media.medias.forEach(sortRules); } function computeSpecificity(selector, specificity = { a: 0, b: 0, c: 0 }) { selector.forEach(token => { if (token.expandedSelector && token.type == "attribute" && token.name === "id" && token.action === "equals") { specificity.a++; } if ((!token.expandedSelector && token.type == "attribute") || (token.expandedSelector && token.type == "attribute" && token.name === "class" && token.action === "element") || (token.type == "pseudo" && token.name != "not")) { specificity.b++; } if ((token.type == "tag" && token.value != "*") || (token.type == "pseudo-element")) { specificity.c++; } if (token.data) { if (Array.isArray(token.data)) { token.data.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; } } })();