single-file-core 1.5.80 → 1.5.82

package/modules/css-rules-minifier.js

@@ -24,12 +24,14 @@
 import * as cssTree from "./../vendor/css-tree.js";
 import { computeMaxSpecificity } from "./css-specificity.js";
 import { parsePrelude } from "./css-scope-prelude-parser.js";
-import { sanitizeSelector, DYNAMIC_STATE_PSEUDO_CLASSES } from "./css-selector-sanitizer.js";
+import { sanitizeSelector, matchUnqueryablePseudoClass } from "./css-selector-sanitizer.js";
 
 const DEBUG = false;
 
-const CANONICAL_PSEUDO_ELEMENT_NAMES = new Set(["after", "before", "first-letter", "first-line", "placeholder", "selection", "part", "marker"]);
-const CONDITIONAL_AT_RULE_NAMES = new Set(["media", "supports", "container"]);
+const PSEUDO_ELEMENT_SYNONYMS = new Set(["after", "before", "first-letter", "first-line"]);
+const MEDIA_AT_RULE_NAME = "media";
+const SUPPORTS_AT_RULE_NAME = "supports";
+const CONDITIONAL_AT_RULE_NAMES = new Set([MEDIA_AT_RULE_NAME, SUPPORTS_AT_RULE_NAME, "container"]);
 const RULE_TYPE = "Rule";
 const AT_RULE_TYPE = "Atrule";
 const NESTING_SELECTOR_TYPE = "NestingSelector";
@@ -51,7 +53,6 @@ const SELECTOR_CONTEXT = "selector";
 const DECLARATION_LIST_CONTEXT = "declarationList";
 const PARSE_CSS_ERROR_MESSAGE = "Failed to parse CSS";
 const QSA_ERROR_MESSAGE = "Failed to match selector";
-const ROOT_PSEUDO_CLASS = ":root";
 const PRELUDE_SEPARATOR = ",";
 const NESTING_SELECTOR = "&";
 const VENDOR_PREFIX = "-";
@@ -84,9 +85,8 @@ function process(doc, stylesheets) {
 		selectorData: new Map(),
 		selectorTexts: new Map(),
 		preludeTexts: new Map(),
-		scopeRoots: new Map(),
-		scopeSpecificities: new Map(),
 		rulesCounter: 0,
+		scopeIdCounter: 0
 	};
 	collectLayerOrder(stylesheets, docContext);
 	buildEffectiveLayerOrder(docContext);
@@ -124,10 +124,11 @@ function minifyRules(stylesheets, docContext) {
 	stylesheets.forEach((stylesheetInfo, key) => {
 		if (!stylesheetInfo.scoped && stylesheetInfo.stylesheet && !key.urlNode) {
 			if (hasChildNodes(stylesheetInfo.stylesheet)) {
-				const topConditionalStack = stylesheetInfo.mediaText ? [{ name: "media", prelude: stylesheetInfo.mediaText }] : [];
+				const topConditionalStack = stylesheetInfo.mediaText ? [{ name: MEDIA_AT_RULE_NAME, prelude: stylesheetInfo.mediaText }] : [];
 				minifyStylesheetRules(stylesheetInfo.stylesheet.children, stylesheets, {
 					ancestorsSelectors: [],
 					layerStack: [],
+					scopeStack: [],
 					conditionalStack: topConditionalStack
 				}, docContext);
 			}
@@ -218,12 +219,12 @@ function minifyRule(ruleData, cssRule, stylesheets, processingContext, removedRu
 
 function minifyImportRule(ruleData, _cssRule, stylesheets, processingContext, _removedRules, docContext) {
 	const urlNode = ruleData.prelude.children.head.data;
-	const topConditionalStack = urlNode.importedMediaText ? [{ name: "media", prelude: urlNode.importedMediaText }] : [];
+	const topConditionalStack = urlNode.importedMediaText ? [{ name: MEDIA_AT_RULE_NAME, prelude: urlNode.importedMediaText }] : [];
 	if (urlNode.importedLayerName !== undefined) {
-		topConditionalStack.push({ name: "layer", prelude: urlNode.importedLayerName });
+		topConditionalStack.push({ name: LAYER_NAME, prelude: urlNode.importedLayerName });
 	}
 	if (urlNode.importedSupportsCondition !== undefined) {
-		topConditionalStack.push({ name: "supports", prelude: urlNode.importedSupportsCondition });
+		topConditionalStack.push({ name: SUPPORTS_AT_RULE_NAME, prelude: urlNode.importedSupportsCondition });
 	}
 	minifyStylesheetRules(urlNode.importedChildren, stylesheets, {
 		...processingContext,
@@ -243,16 +244,24 @@ function minifyLayerRule(ruleData, cssRule, stylesheets, processingContext, remo
 }
 
 function minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
-	const parsedPrelude = parsePrelude(ruleData.prelude);
-	const includeLists = parsedPrelude.include.map(item => item.text);
-	const excludeLists = parsedPrelude.exclude.map(item => item.text);
-	const newConditionalStack = buildConditionalStack(processingContext.conditionalStack, ruleData, docContext);
+	let scopeContext;
+	try {
+		const parsedPrelude = parsePrelude(ruleData.prelude);
+		scopeContext = buildScopeContext(parsedPrelude, processingContext, docContext);
+	} catch (error) {
+		if (DEBUG) {
+			// eslint-disable-next-line no-console
+			console.error(PARSE_CSS_ERROR_MESSAGE, { ruleData, error });
+		}
+	}
+	if (!scopeContext) {
+		docContext.stats.discarded++;
+		removedRules.add(cssRule);
+		return;
+	}
 	const newProcessingContext = {
 		...processingContext,
-		conditionalStack: newConditionalStack,
-		scopeIncludeLists: [...(processingContext.scopeIncludeLists || []), includeLists],
-		scopeExclusionLists: [...(processingContext.scopeExclusionLists || []), excludeLists],
-		scopeNestingLevel: (processingContext.scopeNestingLevel || 0) + 1
+		scopeStack: [...(processingContext.scopeStack || []), scopeContext]
 	};
 	expandRawCssRules(ruleData);
 	minifyStylesheetRules(ruleData.block.children, stylesheets, newProcessingContext, docContext);
@@ -262,6 +271,67 @@ function minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, remo
 	}
 }
 
+function buildScopeContext(parsedPrelude, processingContext, docContext) {
+	const scopeStack = processingContext.scopeStack || [];
+	const includeSelectors = parsedPrelude && parsedPrelude.include ? parsedPrelude.include : [];
+	let rootElements = [];
+	if (includeSelectors.length) {
+		rootElements = collectScopeRootElements(includeSelectors, scopeStack, docContext);
+	} else if (scopeStack.length) {
+		rootElements = Array.from(scopeStack[scopeStack.length - 1].rootElements);
+	} else {
+		rootElements = getDefaultScopeRoots(docContext);
+	}
+	const uniqueRoots = Array.from(new Set(rootElements.filter(Boolean)));
+	if (!uniqueRoots.length) {
+		return null;
+	}
+	const boundaryElements = collectScopeBoundaryElements(parsedPrelude.exclude || [], uniqueRoots, docContext);
+	return {
+		id: docContext.scopeIdCounter++,
+		rootElements: new Set(uniqueRoots),
+		stopElements: boundaryElements,
+	};
+}
+
+function collectScopeRootElements(includeSelectors, scopeStack, docContext) {
+	const roots = new Set();
+	includeSelectors.forEach(selectorInfo => {
+		const selectorText = sanitizeSelector(selectorInfo, null, docContext);
+		const matchedNodes = querySelectorAll(docContext.doc, selectorText);
+		filterElementsByScopes(matchedNodes, scopeStack).forEach(match => roots.add(match));
+	});
+	return Array.from(roots);
+}
+
+function collectScopeBoundaryElements(excludeSelectors, rootElements, docContext) {
+	const boundaries = new Set();
+	if (!excludeSelectors.length || !rootElements.length) {
+		return boundaries;
+	}
+	excludeSelectors.forEach(selectorInfo => {
+		const selectorText = sanitizeSelector(selectorInfo, null, docContext);
+		rootElements.forEach(root => {
+			matchSelectorWithinRoot(root, selectorText).forEach(node => boundaries.add(node));
+		});
+	});
+	return boundaries;
+}
+
+function getDefaultScopeRoots(docContext) {
+	const roots = [];
+	if (docContext.doc && docContext.doc.documentElement) {
+		roots.push(docContext.doc.documentElement);
+	}
+	if (!roots.length && docContext.doc && docContext.doc.body) {
+		roots.push(docContext.doc.body);
+	}
+	if (!roots.length && docContext.doc && docContext.doc.children) {
+		roots.push(...Array.from(docContext.doc.children).filter(node => node.nodeType === 1));
+	}
+	return roots;
+}
+
 function minifyAtRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
 	const newConditionalStack = buildConditionalStack(processingContext.conditionalStack, ruleData, docContext);
 	const newProcessingContext = { ...processingContext, conditionalStack: newConditionalStack };
@@ -288,16 +358,17 @@ function processSelectors(ruleData, processingContext, docContext) {
 	for (let selector = ruleData.prelude.children.head, selectorIndex = 0; selector; selector = selector.next, selectorIndex++) {
 		const {
 			startsWithCombinator,
-			hasCanonicalPseudoElement,
-			hasDynamicStatePseudoClass,
-			scopeRelative
+			hasUnqueryableSelector
 		} = analyzeSelector(selector.data);
-		registerSelector(selector, ruleData, scopeRelative, processingContext, docContext);
-		if (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length) {
-			const matchedElements = matchElements(selector, ancestorsSelectors, docContext);
-			if (matchedElements.length && !(hasCanonicalPseudoElement || hasDynamicStatePseudoClass)) {
+		if (hasUnqueryableSelector) {
+			ruleData.hasUnqueryableSelector = true;
+		}
+		registerSelector(selector, ruleData, processingContext, docContext);
+		if (!hasUnqueryableSelector && (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length)) {
+			const matchedElements = matchElements(selector, ancestorsSelectors, processingContext.scopeStack, docContext);
+			if (matchedElements.length) {
 				updateMatchingSelectors(matchedElements, selector, docContext);
-			} else if (!matchedElements.length) {
+			} else {
 				removedSelectors.push(selector);
 			}
 		}
@@ -306,31 +377,22 @@ function processSelectors(ruleData, processingContext, docContext) {
 }
 
 function analyzeSelector(selector) {
-	let hasCanonicalPseudoElement = false;
-	let hasDynamicStatePseudoClass = false;
-	let hasNestingOrScope = false;
+	let hasUnqueryableSelector = false;
 	let startsWithCombinator = false;
 	cssTree.walk(selector, {
 		enter(node) {
 			if (node.type === PSEUDO_ELEMENT_SELECTOR_TYPE) {
-				hasCanonicalPseudoElement = true;
+				hasUnqueryableSelector = true;
 			} else if (node.type === PSEUDO_CLASS_SELECTOR_TYPE) {
-				if (CANONICAL_PSEUDO_ELEMENT_NAMES.has(node.name)) {
-					hasCanonicalPseudoElement = true;
-				} else if (DYNAMIC_STATE_PSEUDO_CLASSES.includes(node.name)) {
-					hasDynamicStatePseudoClass = true;
-				} else if (node.name === SCOPE_NAME) {
-					hasNestingOrScope = true;
+				if (PSEUDO_ELEMENT_SYNONYMS.has(node.name) || matchUnqueryablePseudoClass(node)) {
+					hasUnqueryableSelector = true;
 				}
-			} else if (node.type === NESTING_SELECTOR_TYPE) {
-				hasNestingOrScope = true;
 			}
 		}
 	});
 	const firstChild = selector.children.head.data;
 	startsWithCombinator = firstChild && firstChild.type === COMBINATOR_NAME;
-	const scopeRelative = !startsWithCombinator && !hasNestingOrScope;
-	return { hasCanonicalPseudoElement, hasDynamicStatePseudoClass, startsWithCombinator, scopeRelative };
+	return { hasUnqueryableSelector, startsWithCombinator };
 }
 
 function updateMatchingSelectors(matchedElements, selector, docContext) {
@@ -352,24 +414,18 @@ function processNestedRules(ruleData, stylesheets, processingContext, docContext
 	minifyStylesheetRules(ruleData.block.children, stylesheets, newProcessingContext, docContext);
 }
 
-function registerSelector(selector, ruleData, scopeRelative, processingContext, docContext) {
+function registerSelector(selector, ruleData, processingContext, docContext) {
 	const {
 		ancestorsSelectors,
 		layerStack,
-		conditionalStack,
-		scopeIncludeLists,
-		scopeExclusionLists,
-		scopeNestingLevel
+		scopeStack,
+		conditionalStack
 	} = processingContext;
 	docContext.selectorData.set(selector, {
-		specificity: computeMaxSpecificity(selector.data, ancestorsSelectors),
+		specificity: computeMaxSpecificity(selector.data, ancestorsSelectors, scopeStack),
 		rule: ruleData,
 		layerStack,
-		conditionalStack,
-		scopeIncludeLists,
-		scopeExclusionLists,
-		scopeNestingLevel,
-		scopeRelative
+		conditionalStack
 	});
 }
 
@@ -414,35 +470,36 @@ function collectDeclarationItemsForElement(element, docContext) {
 			for (let declaration = declarations.head; declaration; declaration = declaration.next) {
 				const { type, value } = declaration.data;
 				if (type === DECLARATION_TYPE && value) {
-					const isRawValue = value.type === RAW_TYPE;
-					const isSingleValue = value.type === VALUE_TYPE &&
-						hasChildNodes(value) &&
-						value.children.length == 1 &&
-						value.children.head.data.name;
-					const isVendorValue = isSingleValue && value.children.head.data.name.startsWith(VENDOR_PREFIX);
-					const isInvalidValue = isSingleValue && INVALID_CSS_ESCAPE_TEST.test(value.children.head.data.name);
-					if (!isRawValue && !isVendorValue && !isInvalidValue) {
-						allDeclarations.push({
-							declaration,
-							selector,
-							effectiveSpecificity: computeEffectiveSpecificity(
-								docContext.selectorData.get(selector), element, docContext),
-							isInline: false
-						});
-					}
+					addDeclaration(declaration, docContext.selectorData.get(selector).specificity, false, selector);
 				}
 			}
 		}
 	});
 	const inlineDeclarations = getInlineStyleDeclarations(element);
 	for (const declaration of inlineDeclarations) {
-		allDeclarations.push({
-			declaration: declaration.declaration,
-			effectiveSpecificity: declaration.effectiveSpecificity,
-			isInline: true
-		});
+		addDeclaration(declaration.declaration, declaration.specificity, true);
 	}
 	return allDeclarations;
+
+	function addDeclaration(declaration, specificity, isInline, selector) {
+		const { value } = declaration.data;
+		const isRawValue = value.type === RAW_TYPE;
+		const hasValueChildNodes = hasChildNodes(value) || value.type === RAW_TYPE;
+		const isSingleValue = value.type === VALUE_TYPE &&
+			hasValueChildNodes &&
+			value.children.length == 1 &&
+			value.children.head.data.name;
+		const isVendorValue = isSingleValue && value.children.head.data.name.startsWith(VENDOR_PREFIX);
+		const isInvalidValue = isSingleValue && INVALID_CSS_ESCAPE_TEST.test(value.children.head.data.name);
+		if (hasValueChildNodes && !isRawValue && !isVendorValue && !isInvalidValue) {
+			allDeclarations.push({
+				declaration,
+				selector,
+				specificity,
+				isInline
+			});
+		}
+	}
 }
 
 function getConditionalStackForSelector(selector, docContext) {
@@ -456,132 +513,169 @@ function getConditionalStackForSelector(selector, docContext) {
 	return conditionalStack;
 }
 
-function matchElements(selector, ancestorsSelectors, docContext) {
+function matchElements(selector, ancestorsSelectors, scopeStack, docContext) {
 	const selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
-	const selectorData = docContext.selectorData.get(selector);
-	const hasScope = selectorData && ((selectorData.scopeIncludeLists && selectorData.scopeIncludeLists.length) || selectorData.scopeNestingLevel > 0);
-	const cacheKey = createMatchCacheKey(hasScope, selectorData, selectorText);
-	const cached = docContext.matchedSelectors.get(cacheKey);
-	if (cached) {
-		return cached;
+	const cacheKey = createScopeCacheKey(selectorText, scopeStack);
+	const cachedNodes = docContext.matchedSelectors.get(cacheKey);
+	if (cachedNodes) {
+		return cachedNodes;
+	}
+	let nodes;
+	if (scopeStack && scopeStack.length) {
+		nodes = matchElementsInScope(selectorText, scopeStack);
+		nodes = filterElementsByScopes(nodes, scopeStack);
 	} else {
-		if (hasScope) {
-			return collectScopedMatches(cacheKey, selector, docContext);
-		} else {
-			const nodes = querySelectorAll(docContext.doc, selectorText, docContext.scopeRoots);
-			docContext.matchedSelectors.set(cacheKey, nodes);
-			return nodes;
-		}
+		nodes = querySelectorAll(docContext.doc, selectorText);
 	}
+	docContext.matchedSelectors.set(cacheKey, nodes);
+	return nodes;
 }
 
-function createSelectorText(selector, ancestorsSelectors, docContext) {
-	let selectorText;
-	if (ancestorsSelectors && ancestorsSelectors.length) {
-		selectorText = combineSelectorWithAncestors(selector.data, ancestorsSelectors, docContext);
-		const combinedAst = parseCss(selectorText, SELECTOR_LIST_CONTEXT);
-		selectorText = sanitizeSelector({ data: combinedAst }, ancestorsSelectors, docContext);
+function createScopeCacheKey(selectorText, scopeStack) {
+	if (!scopeStack || !scopeStack.length) {
+		return selectorText;
 	}
-	if (!selectorText) {
-		selectorText = sanitizeSelector(selector, ancestorsSelectors, docContext);
+	const signature = scopeStack.map(scope => scope.id).join(CONTEXT_KEY_SEPARATOR);
+	return `${selectorText}${CONTEXT_KEY_SEPARATOR}${signature}`;
+}
+
+function matchElementsInScope(selectorText, scopeStack) {
+	const currentScope = scopeStack[scopeStack.length - 1];
+	const roots = Array.from(currentScope.rootElements);
+	if (!roots.length) {
+		return [];
 	}
-	return selectorText;
+	const matchedNodes = new Set();
+	roots.forEach(root => {
+		matchSelectorWithinRoot(root, selectorText).forEach(node => matchedNodes.add(node));
+	});
+	return Array.from(matchedNodes);
 }
 
-function createMatchCacheKey(hasScope, selectorData, selectorText) {
-	if (hasScope) {
-		const include = selectorData.scopeIncludeLists || [];
-		const exclude = selectorData.scopeExclusionLists || [];
-		const relative = selectorData.scopeRelative ? 1 : 0;
-		const nesting = selectorData.scopeNestingLevel || 0;
-		return [
-			selectorText,
-			JSON.stringify(include),
-			JSON.stringify(exclude), String(relative), String(nesting)
-		].join(CONTEXT_KEY_SEPARATOR);
-	} else {
-		return selectorText;
+function matchSelectorWithinRoot(root, selectorText) {
+	const matchedNodes = new Set();
+	if (!root || root.nodeType !== 1) {
+		return matchedNodes;
+	}
+	if (matches(root, selectorText)) {
+		matchedNodes.add(root);
+	}
+	let nodes;
+	try {
+		nodes = root.querySelectorAll(selectorText);
+	} catch {
+		if (DEBUG) {
+			// eslint-disable-next-line no-console
+			console.error(QSA_ERROR_MESSAGE, { root, selectorText });
+		}
+		nodes = matchByTraversal([root], selectorText, true);
 	}
+	for (const node of nodes) {
+		matchedNodes.add(node);
+	}
+	return Array.from(matchedNodes);
 }
 
-function collectScopedMatches(cacheKey, selector, docContext) {
-	const selectorData = docContext.selectorData.get(selector);
-	const includeLists = selectorData.scopeIncludeLists && selectorData.scopeIncludeLists.length ? selectorData.scopeIncludeLists[selectorData.scopeIncludeLists.length - 1] : [];
-	const excludeLists = selectorData.scopeExclusionLists && selectorData.scopeExclusionLists.length ? selectorData.scopeExclusionLists[selectorData.scopeExclusionLists.length - 1] : [];
-	const matchedSet = new Set();
-	const includes = includeLists.length ? includeLists : [ROOT_PSEUDO_CLASS];
-	for (const includeSelector of includes) {
-		collectMatchesForInclude(includeSelector, selector, excludeLists, docContext, matchedSet);
+function matches(element, selectorText) {
+	if (!element || element.nodeType !== 1) {
+		return false;
+	}
+	try {
+		return element.matches(selectorText);
+	} catch {
+		return false;
 	}
-	const matchedElements = Array.from(matchedSet);
-	docContext.matchedSelectors.set(cacheKey, matchedElements);
-	return matchedElements;
 }
 
-function collectMatchesForInclude(includeSelector, selector, excludeLists, docContext, matchedSet) {
-	const rootsForInclude = getScopeRoots(includeSelector, docContext);
-	for (const rootForInclude of rootsForInclude) {
-		const roots = querySelectorForRoot(rootForInclude, normalizeForRoot(selector), docContext.scopeRoots);
-		if (roots.length) {
-			if (excludeLists && excludeLists.length) {
-				const filteredRoots = filterExcludedRoots(roots, excludeLists, docContext);
-				filteredRoots.forEach(root => matchedSet.add(root));
-			} else {
-				roots.forEach(root => matchedSet.add(root));
-			}
+function matchByTraversal(roots, selectorText, skipFirst) {
+	const results = [];
+	const visited = new Set();
+	const stack = [];
+	roots.forEach(root => {
+		if (root && root.nodeType === 1) {
+			stack.push({ node: root, include: !skipFirst });
+		}
+	});
+	while (stack.length) {
+		const { node, include } = stack.pop();
+		if (!node || visited.has(node)) {
+			continue;
+		}
+		visited.add(node);
+		if (include && matches(node, selectorText)) {
+			results.push(node);
+		}
+		for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
+			stack.push({ node: child, include: true });
 		}
 	}
+	return results;
 }
 
-function querySelectorForRoot(root, selector, cache) {
-	const nodes = querySelectorAll(root, selector, cache);
-	if (root.matches && root.matches(selector)) {
-		if (nodes.indexOf(root) === -1) {
-			nodes.unshift(root);
+function getTraversalRoots(root) {
+	if (!root) {
+		return [];
+	}
+	if (root.nodeType === 9 || root.nodeType === 11) {
+		const roots = [];
+		if (root.documentElement) {
+			roots.push(root.documentElement);
+		}
+		if (root.body && (!roots.length || root.body !== roots[0])) {
+			roots.push(root.body);
 		}
+		if (!roots.length && root.children) {
+			roots.push(...Array.from(root.children).filter(node => node.nodeType === 1));
+		}
+		return roots;
 	}
-	return nodes;
+	return [root];
 }
 
-function normalizeForRoot(selector) {
-	const selectorData = cssTree.clone(selector.data);
-	cssTree.walk(selectorData, {
-		visit: NESTING_SELECTOR_TYPE,
-		enter(_node, item, list) {
-			const scope = { type: PSEUDO_CLASS_SELECTOR_TYPE, name: SCOPE_NAME };
-			list.insertData(scope, item);
-			list.remove(item);
-		}
-	});
-	for (let selectorChild = selectorData.children.head; selectorChild; selectorChild = selectorChild.next) {
-		const childData = selectorChild.data;
-		if (hasChildNodes(childData)) {
-			const head = childData.children.head;
-			const headData = head.data;
-			if (headData && headData.type === COMBINATOR_NAME) {
-				const scope = { type: PSEUDO_CLASS_SELECTOR_TYPE, name: SCOPE_NAME };
-				childData.children.insertData(scope, head);
-			}
+function filterElementsByScopes(elements, scopeStack) {
+	if (!scopeStack || !scopeStack.length) {
+		return elements;
+	}
+	return elements.filter(element => isElementWithinScopes(element, scopeStack));
+}
+
+function isElementWithinScopes(element, scopeStack) {
+	if (!element) {
+		return false;
+	}
+	for (let index = 0; index < scopeStack.length; index++) {
+		if (!isElementWithinScope(element, scopeStack[index])) {
+			return false;
 		}
 	}
-	return cssTree.generate(selectorData);
+	return true;
 }
 
-function getScopeRoots(selector, docContext) {
-	let roots = docContext.scopeRoots.get(selector);
-	if (!roots) {
-		roots = querySelectorAll(docContext.doc, selector, docContext.scopeRoots);
+function isElementWithinScope(element, scopeContext) {
+	let current = element;
+	while (current && current.nodeType === 1) {
+		if (scopeContext.stopElements && scopeContext.stopElements.has(current)) {
+			return false;
+		}
+		if (scopeContext.rootElements.has(current)) {
+			return true;
+		}
+		current = current.parentElement;
 	}
-	return roots;
+	return false;
 }
 
-function filterExcludedRoots(roots, excludeLists, docContext) {
-	const excludeRoots = new Set();
-	for (const excludeSelector of excludeLists) {
-		const rootsForExclude = getScopeRoots(excludeSelector, docContext);
-		rootsForExclude.forEach(root => excludeRoots.add(root));
+function createSelectorText(selector, ancestorsSelectors, docContext) {
+	let selectorText;
+	if (ancestorsSelectors && ancestorsSelectors.length) {
+		selectorText = combineSelectorWithAncestors(selector.data, ancestorsSelectors, docContext);
+		const combinedAst = parseCss(selectorText, SELECTOR_LIST_CONTEXT);
+		selectorText = sanitizeSelector({ data: combinedAst }, ancestorsSelectors, docContext);
+	}
+	if (!selectorText) {
+		selectorText = sanitizeSelector(selector, ancestorsSelectors, docContext);
 	}
-	return roots.filter(node => !Array.from(excludeRoots).some(excludedRoot => excludedRoot.contains(node)));
+	return selectorText;
 }
 
 function compareDeclarations(declarationA, declarationB, docContext) {
@@ -599,8 +693,8 @@ function compareDeclarations(declarationA, declarationB, docContext) {
 		if (layerComparison !== 0) {
 			return importantA ? -layerComparison : layerComparison;
 		}
-		const specificityA = declarationA.effectiveSpecificity;
-		const specificityB = declarationB.effectiveSpecificity;
+		const specificityA = declarationA.specificity;
+		const specificityB = declarationB.specificity;
 		if (specificityA.a !== specificityB.a) {
 			return specificityA.a - specificityB.a;
 		}
@@ -615,8 +709,8 @@ function compareDeclarations(declarationA, declarationB, docContext) {
 		}
 		return 0;
 	} else {
-		const specificityA = declarationA.effectiveSpecificity;
-		const specificityB = declarationB.effectiveSpecificity;
+		const specificityA = declarationA.specificity;
+		const specificityB = declarationB.specificity;
 		if (specificityA.a !== specificityB.a) {
 			return specificityA.a - specificityB.a;
 		}
@@ -718,7 +812,7 @@ function removeLosingDeclarations(winningDeclarations, docContext) {
 						if (declaration.data.type === DECLARATION_TYPE) {
 							allDeclarations.set(declaration, declarations);
 							const { property, value } = declaration.data;
-							if (property && property.startsWith(CUSTOM_PROPERTY_PREFIX) || (value && value.type === RAW_TYPE)) {
+							if (property && property.startsWith(CUSTOM_PROPERTY_PREFIX) || (value && value.type === RAW_TYPE) || cssRule.hasUnqueryableSelector) {
 								protectedDeclarations.add(declaration);
 							}
 						}
@@ -822,36 +916,6 @@ function combineSelectors(parentSelectorText, childSelectorText) {
 	return cssTree.generate(combinedSelector);
 }
 
-function computeEffectiveSpecificity(selectorData, element, docContext) {
-	const baseSpecificity = selectorData.specificity;
-	let effectiveSpecificity = { a: baseSpecificity.a, b: baseSpecificity.b, c: baseSpecificity.c };
-	const includeLists = selectorData && selectorData.scopeIncludeLists && selectorData.scopeIncludeLists.length ? selectorData.scopeIncludeLists[selectorData.scopeIncludeLists.length - 1] : [];
-	if (includeLists && includeLists.length) {
-		for (const includeSelector of includeLists) {
-			const roots = getScopeRoots(includeSelector, docContext);
-			if (roots.some(root => root.contains(element))) {
-				const includeSpecificity = getIncludeSpecificity(includeSelector, docContext);
-				effectiveSpecificity = {
-					a: effectiveSpecificity.a + includeSpecificity.a,
-					b: effectiveSpecificity.b + includeSpecificity.b,
-					c: effectiveSpecificity.c + includeSpecificity.c
-				};
-			}
-		}
-	}
-	return effectiveSpecificity;
-}
-
-function getIncludeSpecificity(includeSelector, docContext) {
-	let specificity = docContext.scopeSpecificities.get(includeSelector);
-	if (!specificity) {
-		const selector = parseCss(includeSelector);
-		specificity = computeMaxSpecificity(selector, []);
-		docContext.scopeSpecificities.set(includeSelector, specificity);
-	}
-	return specificity;
-}
-
 function hasChildNodes(node) {
 	return Boolean(node && node.children && node.children.head);
 }
@@ -883,42 +947,39 @@ function parseCss(text, context = SELECTOR_CONTEXT) {
 	return cssTree.parse(text, options);
 }
 
-function querySelectorAll(root, selector, cache) {
-	if (cache && cache !== root) {
-		let rootCache = cache.get(root);
-		if (!rootCache) {
-			rootCache = new Map();
-			cache.set(root, rootCache);
-		}
-		if (rootCache.has(selector)) {
-			return rootCache.get(selector);
-		} else {
-			try {
-				const nodes = Array.from(root.querySelectorAll(selector));
-				rootCache.set(selector, nodes);
-				return nodes;
-			} catch {
-				if (DEBUG) {
-					// eslint-disable-next-line no-console
-					console.warn(QSA_ERROR_MESSAGE, selector, root.tagName ? root.tagName : EMPTY_STRING);
-				}
-				rootCache.set(selector, []);
-				return [];
-			}
-		}
-	} else {
-		try {
-			return Array.from(root.querySelectorAll(selector));
-		} catch {
-			if (DEBUG) {
-				// eslint-disable-next-line no-console
-				console.warn(QSA_ERROR_MESSAGE, selector);
-			}
-			return [];
+function querySelectorAll(root, selectorText) {
+	if (!root) {
+		return [];
+	}
+	const isDocumentNode = root.nodeType === 9 || root.nodeType === 11;
+	const hasScopePseudo = Boolean(selectorText && selectorText.indexOf(":scope") !== -1);
+	if (isDocumentNode && hasScopePseudo) {
+		return matchDocumentScopeSelector(root, selectorText);
+	}
+	try {
+		return Array.from(root.querySelectorAll(selectorText));
+	} catch {
+		if (DEBUG) {
+			// eslint-disable-next-line no-console
+			console.warn(QSA_ERROR_MESSAGE, selectorText, root.nodeType === 1 && root.tagName ? root.tagName : EMPTY_STRING);
 		}
+		const traversalRoots = getTraversalRoots(root);
+		return matchByTraversal(traversalRoots, selectorText, false);
 	}
 }
 
+function matchDocumentScopeSelector(root, selectorText) {
+	const traversalRoots = getTraversalRoots(root);
+	if (!traversalRoots.length) {
+		return [];
+	}
+	const matchedNodes = new Set();
+	traversalRoots.forEach(scopeRoot => {
+		matchSelectorWithinRoot(scopeRoot, selectorText).forEach(node => matchedNodes.add(node));
+	});
+	return Array.from(matchedNodes);
+}
+
 function getInlineStyleDeclarations(element) {
 	const style = element.getAttribute(STYLE_ATTRIBUTE_NAME);
 	if (style) {
@@ -933,7 +994,7 @@ function getInlineStyleDeclarations(element) {
 			if (node.data.type === DECLARATION_TYPE) {
 				declarations.push({
 					declaration: node,
-					effectiveSpecificity: { a: 1, b: 0, c: 0 },
+					specificity: { a: 1, b: 0, c: 0 },
 					isInline: true
 				});
 			}

package/modules/css-scope-prelude-parser.js

@@ -20,8 +20,7 @@
  *   notice and a URL through which recipients can access the Corresponding 
  *   Source.
  */
-
-import * as cssTree from "./../vendor/css-tree.js";
+import * as cssTree from "../vendor/css-tree.js";
 
 const CANONICAL_PSEUDO_ELEMENT_NAMES = new Set(["after", "before", "first-letter", "first-line", "placeholder", "selection", "part", "marker"]);
 
@@ -34,52 +33,13 @@ function parsePrelude(prelude) {
     return { include: [], exclude: [] };
   }
 
-  // Normalize prelude to a string then split on a top-level `to` keyword.
-  // Using generated string is pragmatic: `to` as an at-rule keyword is expected
-  // to appear at top-level with surrounding whitespace. We split on whitespace+to+whitespace.
-  const preludeText = cssTree.generate(prelude).trim();
-  if (!preludeText) return { include: [], exclude: [] };
-
-  // Split on top-level ' to ' (case-insensitive) — join remaining parts if multiple 'to' appear
-  const parts = preludeText.split(/\s+to\s+/i);
-  const includeText = parts[0].trim();
-  const excludeText = parts.length > 1 ? parts.slice(1).join(" to ").trim() : "";
-
-  function parseSelectorList(text) {
-    if (!text) return [];
-    // Strip balanced outer parentheses that css-tree may produce in generated preludes
-    function stripOuterParens(s) {
-      let str = s.trim();
-      while (str.length >= 2 && str[0] === "(" && str[str.length - 1] === ")") {
-        // ensure they are balanced pairs for the whole string
-        let depth = 0;
-        let balanced = true;
-        for (let i = 0; i < str.length; i++) {
-          if (str[i] === "(") depth++;
-          else if (str[i] === ")") depth--;
-          if (depth === 0 && i < str.length - 1) { balanced = false; break; }
-        }
-        if (!balanced) break;
-        str = str.substring(1, str.length - 1).trim();
-      }
-      return str;
-    }
-
-    const cleaned = stripOuterParens(text);
-    // css-tree expects a selectorList context
-    const ast = cssTree.parse(cleaned, { context: "selectorList" });
-    const selectors = [];
-    if (ast && ast.children) {
-      for (let node = ast.children.head; node; node = node.next) {
-        const sel = node.data;
-        selectors.push({ ast: sel, text: cssTree.generate(sel) });
-      }
-    }
-    return selectors;
+  const scopeNode = findScopeNode(prelude);
+  if (!scopeNode) {
+    return { include: [], exclude: [] };
   }
 
-  const include = parseSelectorList(includeText);
-  const exclude = parseSelectorList(excludeText);
+  const include = extractSelectorList(scopeNode.root);
+  const exclude = extractSelectorList(scopeNode.limit);
 
   // Validate: pseudo-elements are not allowed in scope start/end selectors
   function containsPseudoElement(selectorAst) {
@@ -105,15 +65,39 @@ function parsePrelude(prelude) {
   }
 
   for (const s of include) {
-    if (containsPseudoElement(s.ast)) {
+    if (containsPseudoElement(s.data)) {
       throw new Error("Pseudo-elements are not allowed in @scope prelude (scope-start)");
     }
   }
   for (const s of exclude) {
-    if (containsPseudoElement(s.ast)) {
+    if (containsPseudoElement(s.data)) {
       throw new Error("Pseudo-elements are not allowed in @scope prelude (scope-end)");
     }
   }
 
   return { include, exclude };
 }
+
+function findScopeNode(prelude) {
+  if (!prelude || !prelude.children) {
+    return null;
+  }
+  for (let node = prelude.children.head; node; node = node.next) {
+    if (node.data && node.data.type === "Scope") {
+      return node.data;
+    }
+  }
+  return null;
+}
+
+function extractSelectorList(selectorList) {
+  if (!selectorList || !selectorList.children) {
+    return [];
+  }
+  const selectors = [];
+  for (let node = selectorList.children.head; node; node = node.next) {
+    const selector = node.data;
+    selectors.push({ data: selector, text: cssTree.generate(selector) });
+  }
+  return selectors;
+}

package/modules/css-selector-sanitizer.js

@@ -23,70 +23,35 @@
  */
 
 import * as cssTree from "./../vendor/css-tree.js";
-const DYNAMIC_STATE_PSEUDO_CLASSES = [
-    "active-view-transition",
-    "active-view-transition-type",
-    "blank",
-    "buffering",
-    "current",
-    "first",
-    "future",
-    "has-slotted",
-    "host-context",
+
+const TREE_STRUCTURAL_PSEUDO_CLASSES = [
+    "root",
+    "empty",
+    "first-child",
+    "last-child",
+    "only-child",
+    "first-of-type",
+    "last-of-type",
+    "only-of-type"
+];
+const TREE_STRUCTURAL_FUNCTIONAL_PSEUDO_CLASSES = [
+    "nth-child",
+    "nth-last-child",
     "heading",
-    "left",
-    "muted",
-    "open",
-    "past",
-    "paused",
-    "picture-in-picture",
-    "playing",
-    "right",
-    "seeking",
-    "stalled",
-    "volume-locked",
-    "after",
-    "before",
-    "visited",
-    "link",
-    "any-link",
-    "local-link",
-    "target",
-    "scope",
-    "hover",
-    "active",
-    "focus",
-    "focus-within",
-    "focus-visible",
-    "target-current",
-    "enabled",
-    "disabled",
-    "read-only",
-    "read-write",
-    "placeholder-shown",
-    "autofill",
-    "default",
-    "checked",
-    "indeterminate",
-    "blank",
-    "valid",
-    "invalid",
-    "in-range",
-    "out-of-range",
-    "required",
-    "optional",
-    "user-valid",
-    "user-invalid"
+    "nth-of-type",
+    "nth-last-of-type"
+];
+const FUNCTIONAL_PSEUDO_CLASSES = [
+    "not",
+    "is",
+    "where",
+    "has"
 ];
-
 export {
-    DYNAMIC_STATE_PSEUDO_CLASSES,
+    matchUnqueryablePseudoClass,
     sanitizeSelector,
 };
-/**
- * Sanitize a selector AST into a QSA-safe selector string.
- * Optional `ancestors` array may be provided to expand nesting selectors (`&`).
- */
+
 function sanitizeSelector(selector, ancestors, docContext) {
     if (!docContext.normalizedSelectorText) {
         docContext.normalizedSelectorText = new WeakMap();
@@ -94,7 +59,7 @@ function sanitizeSelector(selector, ancestors, docContext) {
     if (docContext.normalizedSelectorText.has(selector)) {
         return docContext.normalizedSelectorText.get(selector);
     }
-    const ast = cssTree.clone(selector.data);
+    const ast = cssTree.parse(cssTree.generate(selector.data), { context: "selectorList" });
     normalizeSelectorNode(ast, ancestors);
     let normalized = cssTree.generate(ast);
     if (!normalized || !normalized.trim()) {
@@ -103,6 +68,7 @@ function sanitizeSelector(selector, ancestors, docContext) {
     docContext.normalizedSelectorText.set(selector, normalized);
     return normalized;
 }
+
 function normalizeSelectorNode(selector, ancestors) {
     let current = selector.children.head;
     while (current) {
@@ -128,11 +94,28 @@ function normalizeSelectorNode(selector, ancestors) {
         } else if (childNode.type === "PseudoElementSelector") {
             selector.children.remove(current);
         } else if (childNode.type === "PseudoClassSelector") {
-            const pseudoName = (childNode.name || "").toLowerCase();
-            if (DYNAMIC_STATE_PSEUDO_CLASSES.includes(pseudoName)) {
-                selector.children.remove(current);
+            if (matchUnqueryablePseudoClass(childNode)) {
+                removeNode(selector.children, current);
             }
+        } else if (childNode.type === "Selector") {
+            normalizeSelectorNode(childNode, ancestors);
         }
         current = next;
     }
 }
+
+function removeNode(list, item) {
+    if (item.prev == null || item.prev.data.type == "Combinator" || item.prev.data.type == "WhiteSpace") {
+        list.replace(item, cssTree.parse("*", { context: "selector" }).children.head);
+    } else {
+        list.remove(item);
+    }
+}
+
+function matchUnqueryablePseudoClass(pseudoClass) {
+    const name = pseudoClass.name.toLowerCase();
+    return pseudoClass.children ? (
+        !TREE_STRUCTURAL_FUNCTIONAL_PSEUDO_CLASSES.includes(name) &&
+        !FUNCTIONAL_PSEUDO_CLASSES.includes(name)
+    ) : !TREE_STRUCTURAL_PSEUDO_CLASSES.includes(name);
+}

package/modules/css-specificity.js

@@ -139,7 +139,7 @@ function getMaxSpecificityFromList(selectorList) {
     return maxSpec;
 }
 
-function computeMaxSpecificity(selector, ancestorsSelectors) {
+function computeMaxSpecificity(selector, ancestorsSelectors, scopeStack) {
     // If no ancestors provided, keep existing behavior
     if (!ancestorsSelectors || !ancestorsSelectors.length) {
         let maxSpecificity = { a: 0, b: 0, c: 0 };
@@ -162,6 +162,9 @@ function computeMaxSpecificity(selector, ancestorsSelectors) {
                 stack.pop();
             }
         });
+        if (scopeStack && scopeStack.length) {
+            maxSpecificity.b++;
+        }
         return maxSpecificity;
     }
 

package/package.json

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

package/single-file-infobar.js

@@ -29,17 +29,21 @@ import { appendInfobar, refreshInfobarInfo, extractInfobarData } from "./core/in
 
 	const browser = globalThis.browser;
 	const MutationObserver = globalThis.MutationObserver;
+	let mutationObserver;
 	init();
 
 	function init() {
 		if (globalThis.window == globalThis.top) {
-			if (document.readyState == "loading") {
-				document.addEventListener("DOMContentLoaded", displayIcon, false);
+			document.addEventListener("single-file-display-infobar", displayIcon, false);
+			if (document.documentElement.getAttribute("data-sfz") == "" && !mutationObserver) {
+				mutationObserver = new MutationObserver(init).observe(document, { childList: true });
 			} else {
-				displayIcon();
+				if (document.readyState == "loading") {
+					document.addEventListener("DOMContentLoaded", displayIcon, false);
+				} else {
+					displayIcon();
+				}
 			}
-			document.addEventListener("single-file-display-infobar", displayIcon, false);
-			new MutationObserver(init).observe(document, { childList: true });
 		}
 		if (globalThis.singlefile) {
 			globalThis.singlefile.infobar = {