single-file-core 1.6.9 → 1.6.11

package/modules/css-rules-minifier.js

@@ -25,14 +25,17 @@ import * as cssTree from "./../vendor/css-tree.js";
 import { computeMaxSpecificity } from "./css-specificity.js";
 import { parsePrelude } from "./css-scope-prelude-parser.js";
 import { sanitizeSelector, matchUnqueryableAttributeSelector, matchUnqueryablePseudoClass } from "./css-selector-sanitizer.js";
+import { ESCAPE_CHARACTER, decodeIdentifier, decodeName } from "./css-identifier.js";
 
 const DEBUG = false;
 
 const PSEUDO_ELEMENT_SYNONYMS = new Set(["after", "before", "first-letter", "first-line"]);
-const FUNCTIONAL_PSEUDO_CLASS_NAMES = new Set(["not", "is", "where", "has"]);
+const FUNCTIONAL_PSEUDO_CLASS_NAMES = new Set(["not", "is", "where", "has", "nth-child", "nth-last-child"]);
 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 STARTING_STYLE_AT_RULE_NAME = "starting-style";
+const CONDITIONAL_AT_RULE_NAMES = new Set([MEDIA_AT_RULE_NAME, SUPPORTS_AT_RULE_NAME, "container", STARTING_STYLE_AT_RULE_NAME]);
+const UNCERTAIN_CONDITIONAL_AT_RULE_NAMES = new Set([MEDIA_AT_RULE_NAME, SUPPORTS_AT_RULE_NAME, STARTING_STYLE_AT_RULE_NAME]);
 const RULE_TYPE = "Rule";
 const AT_RULE_TYPE = "Atrule";
 const NESTING_SELECTOR_TYPE = "NestingSelector";
@@ -41,6 +44,7 @@ const ATTRIBUTE_SELECTOR_TYPE = "AttributeSelector";
 const DECLARATION_TYPE = "Declaration";
 const RAW_TYPE = "Raw";
 const VALUE_TYPE = "Value";
+const IDENTIFIER_TYPE = "Identifier";
 const PSEUDO_ELEMENT_SELECTOR_TYPE = "PseudoElementSelector";
 const LAYER_NAME = "layer";
 const SCOPE_NAME = "scope";
@@ -51,35 +55,58 @@ const COMBINATOR_NAME = "Combinator";
 const TYPE_SELECTOR_TYPE = "TypeSelector";
 const STYLE_ATTRIBUTE_NAME = "style";
 const SELECTOR_LIST_CONTEXT = "selectorList";
+const SCOPE_PRELUDE_OPTIONS = { context: "atrulePrelude", atrule: SCOPE_NAME };
 const STYLESHEET_CONTEXT = "stylesheet";
 const SELECTOR_CONTEXT = "selector";
 const DECLARATION_LIST_CONTEXT = "declarationList";
 const UNKNOWN_PROPERTY_ERROR_NAME = "SyntaxReferenceError";
+const VALUE_MISMATCH_ERROR_NAME = "SyntaxMatchError";
+const VAR_FUNCTION_NAME = "var";
+const FUNCTION_TYPE = "Function";
+const VALIDITY_VALID = "valid";
+const VALIDITY_UNKNOWN = "unknown";
+const VALIDITY_INVALID = "invalid";
 const PARSE_CSS_ERROR_MESSAGE = "Failed to parse CSS";
 const QSA_ERROR_MESSAGE = "Failed to match selector";
 const PRELUDE_SEPARATOR = ",";
-const NESTING_SELECTOR = "&";
+const DECLARATION_SEPARATOR = ":";
+const IS_PSEUDO_CLASS_PREFIX = ":is(";
+const IS_PSEUDO_CLASS_SUFFIX = ")";
+const NO_ELEMENT_SELECTOR = ":not(*)";
 const SCOPE_PSEUDO_CLASS = ":scope";
+const SCOPE_PSEUDO_CLASS_NAME = "scope";
+const DESCENDANT_COMBINATOR = " ";
 const NAMESPACE_SEPARATOR = "|";
 const SELECTOR_SUPPORTS_PREFIX = "selector(";
 const SELECTOR_SUPPORTS_SUFFIX = ")";
 const VENDOR_PREFIX = "-";
 const CUSTOM_PROPERTY_PREFIX = "--";
 const LAYER_NAME_SEPARATOR = ".";
-const DECLARATION_KEY_SEPARATOR = ":";
+const LAYER_NAME_KEY_SEPARATOR = "\u0000";
 const CONTEXT_KEY_SEPARATOR = "|";
+const REVERT_LAYER_KEYWORD = "revert-layer";
+const REVERT_LAYER_TEST = /(^|[^-\w])revert-layer([^-\w]|$)/i;
+const NAMESPACE_AT_RULE_NAME = "namespace";
+const URL_TYPE = "Url";
+const STRING_TYPE = "String";
+const UNSCOPED_PROXIMITY = Infinity;
 const BLOCK_OPEN = "{";
 const BLOCK_CLOSE = "}";
 const EMPTY_STRING = "";
 const CSS_IMPORTANCE_NOT_IMPORTANT = 0;
 const CSS_IMPORTANCE_IMPORTANT = 1;
 const INVALID_CSS_ESCAPE_TEST = /\\(?![0-9a-fA-F]{1,6}\s|[^0-9a-zA-Z])/;
-const ANONYMOUS_LAYER_PLACEHOLDER = "\u0000";
+const ANONYMOUS_LAYER_PREFIX = "\u0000";
+const UNCERTAIN_LAYER_ORDER = null;
+const UNDECLARED_LAYER_POSITION = Infinity;
 
 export {
 	process,
 	isUnsupportedPropertyValue,
-	isUnsupportedVendorValue
+	getValueValidity,
+	VALIDITY_VALID,
+	VALIDITY_UNKNOWN,
+	VALIDITY_INVALID
 };
 
 function isUnsupportedPropertyValue(property, value) {
@@ -87,28 +114,41 @@ function isUnsupportedPropertyValue(property, value) {
 	return Boolean(!match.matched && match.error && match.error.name !== UNKNOWN_PROPERTY_ERROR_NAME);
 }
 
-// A vendor-prefixed VALUE is dropped only when this browser cannot actually use it. Dropping every
-// one of them was the overreach: `display:-ms-flexbox` is genuinely dead here and worth removing,
-// but `display:-webkit-box` is alive and load-bearing — `-webkit-line-clamp` does nothing without
-// it, so a page keeps its clamp rules and silently stops clamping. On anandabazar.com that expanded
-// 80 clamped headlines by a line each and moved the page 150px, with nothing wrong-looking left in
-// the saved CSS. Four of the five sites in a fifteen-site sweep that use line-clamp were affected.
-function isUnsupportedVendorValue(property, name) {
-	if (!name.startsWith(VENDOR_PREFIX)) {
-		return false;
+function getValueValidity(property, value) {
+	const singleNode = value.children.size === 1 ? value.children.head.data : null;
+	const name = singleNode && typeof singleNode.name === "string" ? singleNode.name : null;
+	if (name && INVALID_CSS_ESCAPE_TEST.test(name)) {
+		return VALIDITY_INVALID;
 	}
-	// unknown fails open, the same rule the unknown-property branch follows: a dropped valid
-	// declaration breaks rendering, a kept invalid one is ignored. With no browser to ask, keep.
-	if (!globalThis.CSS || !globalThis.CSS.supports) {
-		return false;
+	const isVendorValue = Boolean(name && name.startsWith(VENDOR_PREFIX));
+	if (globalThis.CSS && globalThis.CSS.supports) {
+		let supported;
+		try {
+			supported = globalThis.CSS.supports(property, cssTree.generate(value));
+		} catch {
+			return VALIDITY_UNKNOWN;
+		}
+		if (supported) {
+			return VALIDITY_VALID;
+		}
+		return isVendorValue ? VALIDITY_INVALID : VALIDITY_UNKNOWN;
 	}
+	if (cssTree.find(value, node => node.type === FUNCTION_TYPE && decodeName(node.name) === VAR_FUNCTION_NAME)) {
+		return VALIDITY_VALID;
+	}
+	let match;
 	try {
-		return !globalThis.CSS.supports(property, name);
-	// eslint-disable-next-line no-unused-vars
-	} catch (error) {
-		// a value CSS.supports will not even take as an argument tells us nothing either way
-		return false;
+		match = cssTree.lexer.matchProperty(property, value);
+	} catch {
+		return VALIDITY_UNKNOWN;
 	}
+	if (match.matched) {
+		return VALIDITY_VALID;
+	}
+	if (match.error && match.error.name === VALUE_MISMATCH_ERROR_NAME && !isVendorValue && !property.startsWith(VENDOR_PREFIX)) {
+		return VALIDITY_INVALID;
+	}
+	return VALIDITY_UNKNOWN;
 }
 
 function process(doc, stylesheets) {
@@ -116,20 +156,30 @@ function process(doc, stylesheets) {
 		doc,
 		stats: { processed: 0, discarded: 0 },
 		matchedElements: new Set(),
+		revertLayerElements: new Set(),
+		revertLayerRules: new WeakMap(),
+		revertLayerDeclarations: new WeakMap(),
+		hasIndeterminateRevertLayer: false,
 		matchedSelectors: new Map(),
 		matchingSelectors: new Map(),
+		scopeProximities: new Map(),
+		scopeProximityKeys: new Map(),
 		layerDeclarationCounter: 0,
-		layerDeclarations: [],
+		anonymousLayerCounter: 0,
 		layerOrder: new Map(),
+		layerComparisons: new Map(),
 		selectorData: new Map(),
 		selectorTexts: new Map(),
+		nestingParentTexts: new Map(),
+		nestingParentNodes: new Map(),
+		scopedSelectorTexts: new Map(),
 		supportedSelectors: new Map(),
+		valueValidities: new Map(),
 		preludeTexts: new Map(),
 		rulesCounter: 0,
 		scopeIdCounter: 0
 	};
 	collectLayerOrder(stylesheets, docContext);
-	buildEffectiveLayerOrder(docContext);
 	minifyRules(stylesheets, docContext);
 	computeCascade(docContext);
 	removeEmptyRules(stylesheets, docContext);
@@ -140,36 +190,27 @@ function collectLayerOrder(stylesheets, docContext) {
 	stylesheets.forEach((stylesheetInfo, key) => {
 		if (!stylesheetInfo.scoped && stylesheetInfo.stylesheet && !key.urlNode) {
 			if (hasChildNodes(stylesheetInfo.stylesheet)) {
-				collectStylesheetLayerOrder(stylesheetInfo.stylesheet.children, { layerStack: [], conditionalStack: [] }, docContext);
+				collectStylesheetLayerOrder(stylesheetInfo.stylesheet.children, { layerStack: [], conditionalStack: getTopConditionalStack(stylesheetInfo) }, docContext);
 			}
 		}
 	});
 }
 
-function buildEffectiveLayerOrder(docContext) {
-	const layerNames = [];
-	for (let indexDeclaration = 0; indexDeclaration < docContext.layerDeclarations.length; indexDeclaration++) {
-		const declaration = docContext.layerDeclarations[indexDeclaration];
-		layerNames.push(declaration.name);
-	}
-	for (let indexLayerName = 0; indexLayerName < layerNames.length; indexLayerName++) {
-		const name = layerNames[indexLayerName];
-		if (!docContext.layerOrder.has(name)) {
-			docContext.layerOrder.set(name, docContext.layerOrder.size);
-		}
-	}
+function getTopConditionalStack(stylesheetInfo) {
+	return stylesheetInfo.mediaText ? [{ name: MEDIA_AT_RULE_NAME, prelude: stylesheetInfo.mediaText }] : [];
 }
 
 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_AT_RULE_NAME, prelude: stylesheetInfo.mediaText }] : [];
 				minifyStylesheetRules(stylesheetInfo.stylesheet.children, stylesheets, {
 					ancestorsSelectors: [],
 					layerStack: [],
 					scopeStack: [],
-					conditionalStack: topConditionalStack
+					conditionalStack: getTopConditionalStack(stylesheetInfo),
+					ownerElement: getStylesheetOwnerElement(key),
+					hasDefaultNamespace: hasDefaultNamespace(stylesheetInfo.stylesheet.children)
 				}, docContext);
 			}
 		}
@@ -179,7 +220,9 @@ function minifyRules(stylesheets, docContext) {
 function computeCascade(docContext) {
 	const winningDeclarations = new Set();
 	docContext.matchedElements.forEach(element => computeCascadedStylesForElement(element, winningDeclarations, docContext));
-	removeLosingDeclarations(winningDeclarations, docContext);
+	if (!docContext.hasIndeterminateRevertLayer) {
+		removeLosingDeclarations(winningDeclarations, docContext);
+	}
 }
 
 function removeEmptyRules(stylesheets, docContext) {
@@ -196,8 +239,10 @@ function collectStylesheetLayerOrder(cssRules, layerContext, docContext) {
 	const { layerStack, conditionalStack } = layerContext;
 	for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
 		const ruleData = cssRule.data;
-		if (ruleData.type === AT_RULE_TYPE && ruleData.name === LAYER_NAME) {
+		if (ruleData.type === AT_RULE_TYPE && decodeName(ruleData.name) === LAYER_NAME) {
 			collectStylesheetLayerRule(ruleData, layerStack, conditionalStack, docContext);
+		} else if (isImportRule(ruleData)) {
+			collectImportLayerOrder(ruleData, layerContext, docContext);
 		} else if (ruleData.type === AT_RULE_TYPE && hasChildNodes(ruleData.block)) {
 			const newConditionalStack = buildConditionalStack(conditionalStack, ruleData, docContext);
 			collectStylesheetLayerOrder(ruleData.block.children, { layerStack, conditionalStack: newConditionalStack }, docContext);
@@ -209,48 +254,136 @@ function collectStylesheetLayerOrder(cssRules, layerContext, docContext) {
 
 function collectStylesheetLayerRule(ruleData, layerStack, conditionalStack, docContext) {
 	if (ruleData.block) {
-		const layerName = getPreludeText(ruleData.prelude, docContext);
-		registerLayerDeclaration(layerStack, layerName, conditionalStack, docContext);
-		collectStylesheetLayerOrder(ruleData.block.children, { layerStack: [...layerStack, layerName], conditionalStack }, docContext);
+		const layerSegments = getLayerSegments(ruleData, docContext);
+		registerLayerDeclaration(layerStack, layerSegments, conditionalStack, docContext);
+		collectStylesheetLayerOrder(ruleData.block.children, { layerStack: [...layerStack, ...layerSegments], conditionalStack }, docContext);
 	} else if (ruleData.prelude) {
-		const layerNames = getPreludeText(ruleData.prelude, docContext).split(PRELUDE_SEPARATOR);
-		layerNames.forEach(layerName => registerLayerDeclaration(layerStack, layerName, conditionalStack, docContext));
+		getPreludeText(ruleData.prelude, docContext).split(PRELUDE_SEPARATOR).forEach(layerName => registerLayerDeclaration(layerStack, splitLayerName(layerName), conditionalStack, docContext));
+	}
+}
+
+function collectImportLayerOrder(ruleData, layerContext, docContext) {
+	const urlNode = ruleData.prelude.children.head.data;
+	const conditionalStack = buildImportConditionalStack(layerContext.conditionalStack, urlNode);
+	const layerSegments = getImportLayerSegments(ruleData, urlNode, docContext);
+	let { layerStack } = layerContext;
+	if (layerSegments) {
+		registerLayerDeclaration(layerStack, layerSegments, conditionalStack, docContext);
+		layerStack = [...layerStack, ...layerSegments];
+	}
+	collectStylesheetLayerOrder(urlNode.importedChildren, { layerStack, conditionalStack }, docContext);
+}
+
+function getLayerSegments(ruleData, docContext) {
+	if (!ruleData.layerSegments) {
+		ruleData.layerSegments = ruleData.prelude ? splitLayerName(getPreludeText(ruleData.prelude, docContext)) : [createAnonymousLayerSegment(docContext)];
 	}
+	return ruleData.layerSegments;
+}
+
+function splitLayerName(layerName) {
+	const name = layerName.trim();
+	const segments = [];
+	let segment = EMPTY_STRING;
+	for (let index = 0; index < name.length; index++) {
+		const character = name.charAt(index);
+		if (character === ESCAPE_CHARACTER && index + 1 < name.length) {
+			segment += character + name.charAt(index + 1);
+			index++;
+		} else if (character === LAYER_NAME_SEPARATOR) {
+			segments.push(decodeIdentifier(segment));
+			segment = EMPTY_STRING;
+		} else {
+			segment += character;
+		}
+	}
+	segments.push(decodeIdentifier(segment));
+	return segments;
+}
+
+function createAnonymousLayerSegment(docContext) {
+	return ANONYMOUS_LAYER_PREFIX + docContext.anonymousLayerCounter++;
 }
 
 function buildConditionalStack(conditionalStack, ruleData, docContext) {
-	const isConditional = CONDITIONAL_AT_RULE_NAMES.has(ruleData.name);
+	const isConditional = CONDITIONAL_AT_RULE_NAMES.has(decodeName(ruleData.name));
 	return isConditional
 		? [...conditionalStack, { name: ruleData.name, prelude: getPreludeText(ruleData.prelude, docContext) }]
 		: conditionalStack;
 }
 
-function registerLayerDeclaration(layerStack, layerName, conditionalStack, docContext) {
-	const fullLayerName = getFullLayerName([...layerStack, layerName]);
-	docContext.layerDeclarations.push({
-		name: fullLayerName,
-		order: docContext.layerDeclarationCounter++,
-		conditionalStack: conditionalStack.slice()
-	});
+function buildImportConditionalStack(conditionalStack, urlNode) {
+	const importConditionalStack = [...conditionalStack];
+	if (urlNode.importedMediaText) {
+		importConditionalStack.push({ name: MEDIA_AT_RULE_NAME, prelude: urlNode.importedMediaText });
+	}
+	if (urlNode.importedSupportsCondition !== undefined) {
+		importConditionalStack.push({ name: SUPPORTS_AT_RULE_NAME, prelude: urlNode.importedSupportsCondition });
+	}
+	return importConditionalStack;
+}
+
+function getImportLayerSegments(ruleData, urlNode, docContext) {
+	if (urlNode.importedLayerName !== undefined) {
+		return splitLayerName(urlNode.importedLayerName);
+	}
+	if (!urlNode.anonymousLayerSegments) {
+		const layerKeyword = cssTree.find(ruleData.prelude, node => node.type === IDENTIFIER_TYPE && decodeName(node.name) === LAYER_NAME);
+		urlNode.anonymousLayerSegments = layerKeyword ? [createAnonymousLayerSegment(docContext)] : null;
+	}
+	return urlNode.anonymousLayerSegments;
+}
+
+function isImportRule(ruleData) {
+	return ruleData.type === AT_RULE_TYPE && decodeName(ruleData.name) === IMPORT_NAME && hasChildNodes(ruleData.prelude) && Boolean(ruleData.prelude.children.head.data.importedChildren);
+}
+
+function registerLayerDeclaration(layerStack, layerSegments, conditionalStack, docContext) {
+	const position = docContext.layerDeclarationCounter++;
+	const certain = !conditionalStack.some(context => UNCERTAIN_CONDITIONAL_AT_RULE_NAMES.has(decodeName(context.name)));
+	const segments = [...layerStack, ...layerSegments];
+	for (let length = layerStack.length + 1; length <= segments.length; length++) {
+		const fullLayerName = getFullLayerName(segments.slice(0, length));
+		const layerPosition = docContext.layerOrder.get(fullLayerName);
+		if (!layerPosition) {
+			docContext.layerOrder.set(fullLayerName, { first: position, firstCertain: certain ? position : UNDECLARED_LAYER_POSITION });
+		} else if (certain && layerPosition.firstCertain === UNDECLARED_LAYER_POSITION) {
+			layerPosition.firstCertain = position;
+		}
+	}
 }
 
 function minifyStylesheetRules(cssRules, stylesheets, processingContext, docContext) {
 	const removedRules = new Set();
+	let nestedRuleSeen = false;
+	let declarationsOrder;
 	for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
 		docContext.stats.processed++;
-		minifyRule(cssRule.data, cssRule, stylesheets, processingContext, removedRules, docContext);
+		if (cssRule.data.type === DECLARATION_TYPE) {
+			if (nestedRuleSeen) {
+				if (declarationsOrder === undefined) {
+					declarationsOrder = docContext.rulesCounter++;
+				}
+				cssRule.data.order = declarationsOrder;
+			}
+		} else {
+			minifyRule(cssRule.data, cssRule, stylesheets, processingContext, removedRules, docContext);
+			nestedRuleSeen = true;
+			declarationsOrder = undefined;
+		}
 	}
 	removedRules.forEach(cssRule => cssRules.remove(cssRule));
 }
 
 function minifyRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
-	if (ruleData.type === AT_RULE_TYPE && ruleData.name === IMPORT_NAME && hasChildNodes(ruleData.prelude) && ruleData.prelude.children.head.data.importedChildren) {
+	const atRuleName = decodeName(ruleData.name);
+	if (isImportRule(ruleData)) {
 		minifyImportRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext);
-	} else if (ruleData.type === AT_RULE_TYPE && ruleData.name === LAYER_NAME && hasChildNodes(ruleData.block)) {
+	} else if (ruleData.type === AT_RULE_TYPE && atRuleName === LAYER_NAME && hasChildNodes(ruleData.block)) {
 		minifyLayerRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext);
-	} else if (ruleData.type === AT_RULE_TYPE && ruleData.name === SCOPE_NAME && hasChildNodes(ruleData.block)) {
+	} else if (ruleData.type === AT_RULE_TYPE && atRuleName === SCOPE_NAME && hasChildNodes(ruleData.block)) {
 		minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext);
-	} else if (ruleData.type === AT_RULE_TYPE && ruleData.name !== FONT_FACE_NAME && ruleData.name !== KEYFRAMES_NAME && !ruleData.name.startsWith(VENDOR_PREFIX) && hasChildNodes(ruleData.block)) {
+	} else if (ruleData.type === AT_RULE_TYPE && atRuleName !== FONT_FACE_NAME && atRuleName !== KEYFRAMES_NAME && !atRuleName.startsWith(VENDOR_PREFIX) && hasChildNodes(ruleData.block)) {
 		minifyAtRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext);
 	} else if (ruleData.type === RULE_TYPE && hasChildNodes(ruleData.prelude)) {
 		minifyStylesheetRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext);
@@ -259,34 +392,52 @@ 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_AT_RULE_NAME, prelude: urlNode.importedMediaText }] : [];
-	if (urlNode.importedLayerName !== undefined) {
-		topConditionalStack.push({ name: LAYER_NAME, prelude: urlNode.importedLayerName });
-	}
-	if (urlNode.importedSupportsCondition !== undefined) {
-		topConditionalStack.push({ name: SUPPORTS_AT_RULE_NAME, prelude: urlNode.importedSupportsCondition });
-	}
+	const conditionalStack = buildImportConditionalStack(processingContext.conditionalStack, urlNode);
+	const layerSegments = getImportLayerSegments(ruleData, urlNode, docContext);
+	const layerStack = layerSegments ? [...processingContext.layerStack, ...layerSegments] : processingContext.layerStack;
 	minifyStylesheetRules(urlNode.importedChildren, stylesheets, {
 		...processingContext,
-		conditionalStack: topConditionalStack
+		layerStack,
+		conditionalStack,
+		hasDefaultNamespace: processingContext.hasDefaultNamespace || hasDefaultNamespace(urlNode.importedChildren)
 	}, docContext);
 }
 
 function minifyLayerRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
-	const layerName = getPreludeText(ruleData.prelude, docContext);
-	const newProcessingContext = { ...processingContext, layerStack: [...processingContext.layerStack, layerName] };
+	const layerSegments = getLayerSegments(ruleData, docContext);
+	const layerStack = [...processingContext.layerStack, ...layerSegments];
+	if (!docContext.layerOrder.has(getFullLayerName(layerStack))) {
+		registerLayerDeclaration(processingContext.layerStack, layerSegments, processingContext.conditionalStack, docContext);
+	}
+	const newProcessingContext = { ...processingContext, layerStack };
 	expandRawCssRules(ruleData);
 	minifyStylesheetRules(ruleData.block.children, stylesheets, newProcessingContext, docContext);
 	if (!hasChildNodes(ruleData.block)) {
+		removeEmptyLayerRule(ruleData, cssRule, removedRules, docContext);
+	}
+}
+
+function removeEmptyLayerRule(ruleData, cssRule, removedRules, docContext) {
+	if (hasChildNodes(ruleData.prelude)) {
+		ruleData.block = null;
+	} else {
 		docContext.stats.discarded++;
 		removedRules.add(cssRule);
 	}
 }
 
+function getScopePrelude(ruleData) {
+	const { prelude } = ruleData;
+	if (prelude && prelude.type === RAW_TYPE) {
+		return cssTree.parse(cssTree.generate(prelude), SCOPE_PRELUDE_OPTIONS);
+	}
+	return prelude;
+}
+
 function minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, removedRules, docContext) {
 	let scopeContext;
 	try {
-		const parsedPrelude = parsePrelude(ruleData.prelude);
+		const parsedPrelude = parsePrelude(getScopePrelude(ruleData));
 		scopeContext = buildScopeContext(parsedPrelude, processingContext, docContext);
 	} catch (error) {
 		if (DEBUG) {
@@ -301,7 +452,9 @@ function minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, remo
 	}
 	const newProcessingContext = {
 		...processingContext,
-		scopeStack: [...(processingContext.scopeStack || []), scopeContext]
+		scopeStack: [...(processingContext.scopeStack || []), scopeContext],
+		hasUnqueryableSelector: processingContext.hasUnqueryableSelector || scopeContext.hasUnqueryableSelector,
+		hasNestedUnqueryablePseudoClass: processingContext.hasNestedUnqueryablePseudoClass || scopeContext.hasNestedUnqueryablePseudoClass
 	};
 	expandRawCssRules(ruleData);
 	minifyStylesheetRules(ruleData.block.children, stylesheets, newProcessingContext, docContext);
@@ -314,50 +467,102 @@ function minifyScopeRule(ruleData, cssRule, stylesheets, processingContext, remo
 function buildScopeContext(parsedPrelude, processingContext, docContext) {
 	const scopeStack = processingContext.scopeStack || [];
 	const includeSelectors = parsedPrelude && parsedPrelude.include ? parsedPrelude.include : [];
+	const excludeSelectors = parsedPrelude && parsedPrelude.exclude ? parsedPrelude.exclude : [];
+	const includeAnalysis = analyzeScopeSelectors(includeSelectors, processingContext.hasDefaultNamespace);
+	const excludeAnalysis = analyzeScopeSelectors(excludeSelectors, processingContext.hasDefaultNamespace);
 	let rootElements = [];
 	if (includeSelectors.length) {
 		rootElements = collectScopeRootElements(includeSelectors, scopeStack, docContext);
-	} else if (scopeStack.length) {
-		rootElements = Array.from(scopeStack[scopeStack.length - 1].rootElements);
+		if (!rootElements.length && includeAnalysis.hasNestedUnqueryablePseudoClass) {
+			rootElements = scopeStack.length ? Array.from(scopeStack[scopeStack.length - 1].rootElements) : getDefaultScopeRoots(docContext);
+		}
 	} else {
-		rootElements = getDefaultScopeRoots(docContext);
+		rootElements = getImplicitScopeRoots(processingContext.ownerElement, docContext);
 	}
 	const uniqueRoots = Array.from(new Set(rootElements.filter(Boolean)));
 	if (!uniqueRoots.length) {
 		return null;
 	}
-	const boundaryElements = collectScopeBoundaryElements(parsedPrelude.exclude || [], uniqueRoots, docContext);
+	const boundaryElements = collectScopeBoundaryElements(excludeSelectors, uniqueRoots, docContext, processingContext.hasDefaultNamespace);
 	return {
 		id: docContext.scopeIdCounter++,
 		rootElements: new Set(uniqueRoots),
 		stopElements: boundaryElements,
+		hasUnqueryableSelector: includeAnalysis.hasUnqueryableSelector || excludeAnalysis.hasUnqueryableSelector,
+		hasNestedUnqueryablePseudoClass: includeAnalysis.hasNestedUnqueryablePseudoClass
 	};
 }
 
+function analyzeScopeSelectors(selectors, defaultNamespace) {
+	const analysis = { hasUnqueryableSelector: false, hasNestedUnqueryablePseudoClass: false };
+	selectors.forEach(selectorInfo => {
+		const { hasUnqueryableSelector, hasNestedUnqueryablePseudoClass } = analyzeSelector(selectorInfo.data, defaultNamespace);
+		analysis.hasUnqueryableSelector ||= hasUnqueryableSelector;
+		analysis.hasNestedUnqueryablePseudoClass ||= hasNestedUnqueryablePseudoClass;
+	});
+	return analysis;
+}
+
 function collectScopeRootElements(includeSelectors, scopeStack, docContext) {
 	const roots = new Set();
 	includeSelectors.forEach(selectorInfo => {
-		const selectorText = sanitizeSelector(selectorInfo, null, docContext);
-		const matchedNodes = querySelectorAll(docContext.doc, selectorText);
+		const selectorText = sanitizeSelector(selectorInfo, docContext);
+		const matchedNodes = scopeStack.length
+			? matchElementsInScope(getScopedSelectorText(selectorText, docContext), scopeStack)
+			: 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();
+function collectScopeBoundaryElements(excludeSelectors, rootElements, docContext, defaultNamespace) {
+	const boundaries = new Map();
 	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));
-		});
+		const { hasUnqueryableSelector, hasNestedUnqueryablePseudoClass } = analyzeSelector(selectorInfo.data, defaultNamespace);
+		if (!hasUnqueryableSelector && !hasNestedUnqueryablePseudoClass) {
+			const selectorText = getScopedSelectorText(sanitizeSelector(selectorInfo, docContext), docContext);
+			rootElements.forEach(root => {
+				const rootBoundaries = boundaries.get(root) || new Set();
+				matchSelectorWithinRoot(root, selectorText).forEach(node => rootBoundaries.add(node));
+				if (rootBoundaries.size) {
+					boundaries.set(root, rootBoundaries);
+				}
+			});
+		}
 	});
 	return boundaries;
 }
 
+function hasDefaultNamespace(cssRules) {
+	for (let cssRule = cssRules.head; cssRule; cssRule = cssRule.next) {
+		const ruleData = cssRule.data;
+		if (ruleData.type === AT_RULE_TYPE && ruleData.name && decodeName(ruleData.name) === NAMESPACE_AT_RULE_NAME) {
+			const prelude = ruleData.prelude && ruleData.prelude.children && ruleData.prelude.children.head;
+			if (prelude && (prelude.data.type === URL_TYPE || prelude.data.type === STRING_TYPE)) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+function getStylesheetOwnerElement(key) {
+	if (key && key.element) {
+		return key.element;
+	}
+	return key && key.nodeType === 1 ? key : null;
+}
+
+function getImplicitScopeRoots(ownerElement, docContext) {
+	if (ownerElement && ownerElement.parentElement) {
+		return [ownerElement.parentElement];
+	}
+	return getDefaultScopeRoots(docContext);
+}
+
 function getDefaultScopeRoots(docContext) {
 	const roots = [];
 	if (docContext.doc && docContext.doc.documentElement) {
@@ -388,7 +593,8 @@ function minifyStylesheetRule(ruleData, cssRule, stylesheets, processingContext,
 	if (!isPreludeSupported(ruleData.prelude, docContext)) {
 		return;
 	}
-	const removedSelectors = processSelectors(ruleData, processingContext, docContext);
+	expandRawCssRules(ruleData);
+	const removedSelectors = getRemovableSelectors(ruleData, processSelectors(ruleData, processingContext, docContext), docContext);
 	const wasDiscarded = removeUnmatchedSelectors(ruleData, removedSelectors, removedRules, cssRule, docContext);
 	if (!wasDiscarded && hasChildNodes(ruleData.block)) {
 		processNestedRules(ruleData, stylesheets, processingContext, docContext);
@@ -399,32 +605,70 @@ function processSelectors(ruleData, processingContext, docContext) {
 	const removedSelectors = [];
 	const { ancestorsSelectors, scopeStack } = processingContext;
 	for (let selector = ruleData.prelude.children.head, selectorIndex = 0; selector; selector = selector.next, selectorIndex++) {
-		const {
-			startsWithCombinator,
-			hasUnqueryableSelector,
-			hasNestedUnqueryablePseudoClass
-		} = analyzeSelector(selector.data);
+		const analysis = analyzeSelector(selector.data, processingContext.hasDefaultNamespace);
+		const { startsWithCombinator } = analysis;
+		const hasUnqueryableSelector = analysis.hasUnqueryableSelector || Boolean(processingContext.hasUnqueryableSelector);
+		const hasNestedUnqueryablePseudoClass = analysis.hasNestedUnqueryablePseudoClass || Boolean(processingContext.hasNestedUnqueryablePseudoClass);
 		if (hasUnqueryableSelector) {
 			ruleData.hasUnqueryableSelector = true;
 		}
-		registerSelector(selector, ruleData, processingContext, docContext);
-		if (!startsWithCombinator || !ancestorsSelectors || !ancestorsSelectors.length) {
-			const relativeToScope = startsWithCombinator && Boolean(scopeStack && scopeStack.length);
-			const matchedElements = matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope);
-			if (matchedElements.length) {
-				if (!hasUnqueryableSelector) {
-					updateMatchingSelectors(matchedElements, selector, docContext);
-				}
-			} else if (!hasNestedUnqueryablePseudoClass) {
-				removedSelectors.push(selector);
+		if (hasNestedUnqueryablePseudoClass) {
+			ruleData.hasNestedUnqueryablePseudoClass = true;
+		}
+		const nestedSelector = getNestedSelector(selector, ancestorsSelectors, docContext);
+		registerSelector(selector, nestedSelector, ruleData, processingContext, docContext);
+		const relativeToScope = startsWithCombinator && !(ancestorsSelectors && ancestorsSelectors.length) && Boolean(scopeStack && scopeStack.length);
+		const matchedElements = matchElements(selector, nestedSelector, scopeStack, docContext, relativeToScope);
+		if (hasNestedUnqueryablePseudoClass) {
+			registerIndeterminateRevertLayer(ruleData, docContext);
+		}
+		if (matchedElements.length) {
+			if (hasUnqueryableSelector) {
+				registerRevertLayerElements(ruleData, matchedElements, docContext);
+			} else {
+				updateMatchingSelectors(matchedElements, selector, docContext);
 			}
+		} else if (!hasNestedUnqueryablePseudoClass) {
+			removedSelectors.push(selector);
 		}
 	}
 	return removedSelectors;
 }
 
-function analyzeSelector(selector) {
-	let hasUnqueryableSelector = false;
+function getRemovableSelectors(ruleData, removedSelectors, docContext) {
+	if (!removedSelectors.length || removedSelectors.length === ruleData.prelude.children.size || !hasNestedRules(ruleData)) {
+		return removedSelectors;
+	}
+	const removedSet = new Set(removedSelectors);
+	let keptSpecificity = { a: 0, b: 0, c: 0 };
+	for (let selector = ruleData.prelude.children.head; selector; selector = selector.next) {
+		if (!removedSet.has(selector)) {
+			const { specificity } = docContext.selectorData.get(selector);
+			if (compareSpecificities(specificity, keptSpecificity) > 0) {
+				keptSpecificity = specificity;
+			}
+		}
+	}
+	return removedSelectors.filter(selector => compareSpecificities(docContext.selectorData.get(selector).specificity, keptSpecificity) <= 0);
+}
+
+function hasNestedRules(ruleData) {
+	if (hasChildNodes(ruleData.block)) {
+		for (let child = ruleData.block.children.head; child; child = child.next) {
+			if (child.data.type !== DECLARATION_TYPE) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+function compareSpecificities(specificityA, specificityB) {
+	return (specificityA.a - specificityB.a) || (specificityA.b - specificityB.b) || (specificityA.c - specificityB.c);
+}
+
+function analyzeSelector(selector, defaultNamespace) {
+	let hasUnqueryableSelector = Boolean(defaultNamespace);
 	let hasNestedUnqueryablePseudoClass = false;
 	let startsWithCombinator = false;
 	let functionalPseudoClassDepth = 0;
@@ -436,7 +680,7 @@ function analyzeSelector(selector) {
 					hasNestedUnqueryablePseudoClass = true;
 				}
 			} else if (node.type === PSEUDO_CLASS_SELECTOR_TYPE) {
-				if (PSEUDO_ELEMENT_SYNONYMS.has(node.name) || matchUnqueryablePseudoClass(node)) {
+				if (PSEUDO_ELEMENT_SYNONYMS.has(decodeName(node.name)) || matchUnqueryablePseudoClass(node)) {
 					hasUnqueryableSelector = true;
 					if (functionalPseudoClassDepth) {
 						hasNestedUnqueryablePseudoClass = true;
@@ -450,6 +694,11 @@ function analyzeSelector(selector) {
 				if (functionalPseudoClassDepth) {
 					hasNestedUnqueryablePseudoClass = true;
 				}
+			} else if (node.type === TYPE_SELECTOR_TYPE && typeof node.name === "string" && node.name.includes(NAMESPACE_SEPARATOR)) {
+				hasUnqueryableSelector = true;
+				if (functionalPseudoClassDepth) {
+					hasNestedUnqueryablePseudoClass = true;
+				}
 			}
 		},
 		leave(node) {
@@ -516,28 +765,31 @@ function updateMatchingSelectors(matchedElements, selector, docContext) {
 }
 
 function processNestedRules(ruleData, stylesheets, processingContext, docContext) {
-	expandRawCssRules(ruleData);
-	const newProcessingContext = { ...processingContext, ancestorsSelectors: [...processingContext.ancestorsSelectors, ruleData.prelude] };
+	const newProcessingContext = {
+		...processingContext,
+		ancestorsSelectors: [...processingContext.ancestorsSelectors, ruleData.prelude],
+		hasUnqueryableSelector: Boolean(ruleData.hasUnqueryableSelector),
+		hasNestedUnqueryablePseudoClass: Boolean(ruleData.hasNestedUnqueryablePseudoClass)
+	};
 	minifyStylesheetRules(ruleData.block.children, stylesheets, newProcessingContext, docContext);
 }
 
-function registerSelector(selector, ruleData, processingContext, docContext) {
+function registerSelector(selector, nestedSelector, ruleData, processingContext, docContext) {
 	const {
-		ancestorsSelectors,
 		layerStack,
 		scopeStack,
 		conditionalStack
 	} = processingContext;
 	docContext.selectorData.set(selector, {
-		specificity: computeMaxSpecificity(selector.data, ancestorsSelectors, scopeStack),
+		specificity: computeMaxSpecificity(nestedSelector === null ? selector.data : nestedSelector.data),
 		rule: ruleData,
 		layerStack,
+		scopeStack,
 		conditionalStack
 	});
 }
 
 function computeCascadedStylesForElement(element, winningDeclarations, docContext) {
-	const cascadedStyles = new Map();
 	const allDeclarations = collectDeclarationItemsForElement(element, docContext);
 	const contextGroups = new Map();
 	allDeclarations.forEach(declarationData => {
@@ -549,18 +801,109 @@ function computeCascadedStylesForElement(element, winningDeclarations, docContex
 		}
 		contextGroups.get(contextKey).push(declarationData);
 	});
+	let hasWinningRevertLayer = false;
 	contextGroups.forEach(declarations => {
 		declarations.sort((declarationA, declarationB) => compareDeclarations(declarationA, declarationB, docContext));
+		const propertyDeclarations = new Map();
 		declarations.forEach(declarationData => {
-			const { selector, declaration } = declarationData;
-			const conditionalStack = getConditionalStackForSelector(selector, docContext);
-			cascadedStyles.set(declaration.data.property + DECLARATION_KEY_SEPARATOR + createContextKey(conditionalStack), {
-				selector,
-				declaration
-			});
+			const { property } = declarationData.declaration.data;
+			if (!propertyDeclarations.has(property)) {
+				propertyDeclarations.set(property, []);
+			}
+			propertyDeclarations.get(property).push(declarationData);
 		});
+		propertyDeclarations.forEach(candidates => {
+			if (hasUncertainLayerOrder(candidates, docContext)) {
+				candidates.forEach(candidate => winningDeclarations.add(candidate.declaration));
+				return;
+			}
+			for (let indexCandidate = candidates.length - 1; indexCandidate >= 0; indexCandidate--) {
+				const { declaration, validity } = candidates[indexCandidate];
+				winningDeclarations.add(declaration);
+				if (validity === VALIDITY_VALID) {
+					hasWinningRevertLayer ||= hasRevertLayerKeyword(declaration, docContext);
+					break;
+				}
+			}
+		});
+	});
+	if (hasWinningRevertLayer || docContext.revertLayerElements.has(element)) {
+		allDeclarations.forEach(({ declaration }) => winningDeclarations.add(declaration));
+	}
+}
+
+function hasUncertainLayerOrder(candidates, docContext) {
+	const layerStacks = [new Map(), new Map()];
+	candidates.forEach(({ declaration, selector }) => {
+		if (selector) {
+			const { layerStack } = docContext.selectorData.get(selector);
+			layerStacks[declaration.data.important ? CSS_IMPORTANCE_IMPORTANT : CSS_IMPORTANCE_NOT_IMPORTANT].set(getFullLayerName(layerStack), layerStack);
+		}
+	});
+	return layerStacks.some(importanceStacks => {
+		const stacks = Array.from(importanceStacks.values());
+		for (let indexA = 0; indexA < stacks.length; indexA++) {
+			for (let indexB = indexA + 1; indexB < stacks.length; indexB++) {
+				if (compareLayers(stacks[indexA], stacks[indexB], docContext) === UNCERTAIN_LAYER_ORDER) {
+					return true;
+				}
+			}
+		}
+		return false;
 	});
-	cascadedStyles.forEach(({ declaration }) => winningDeclarations.add(declaration));
+}
+
+function registerRevertLayerElements(ruleData, matchedElements, docContext) {
+	if (hasRevertLayerDeclaration(ruleData, docContext)) {
+		matchedElements.forEach(element => docContext.revertLayerElements.add(element));
+	}
+}
+
+function registerIndeterminateRevertLayer(ruleData, docContext) {
+	if (hasRevertLayerDeclaration(ruleData, docContext)) {
+		docContext.hasIndeterminateRevertLayer = true;
+	}
+}
+
+function hasRevertLayerDeclaration(ruleData, docContext) {
+	let found = docContext.revertLayerRules.get(ruleData);
+	if (found === undefined) {
+		found = findRevertLayerDeclaration(ruleData, docContext);
+		docContext.revertLayerRules.set(ruleData, found);
+	}
+	return found;
+}
+
+function findRevertLayerDeclaration(ruleData, docContext) {
+	if (!hasChildNodes(ruleData.block)) {
+		return false;
+	}
+	for (let child = ruleData.block.children.head; child; child = child.next) {
+		if (child.data.type === DECLARATION_TYPE && hasRevertLayerKeyword(child, docContext)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function hasRevertLayerKeyword(declaration, docContext) {
+	let found = docContext.revertLayerDeclarations.get(declaration);
+	if (found === undefined) {
+		found = findRevertLayerKeyword(declaration);
+		docContext.revertLayerDeclarations.set(declaration, found);
+	}
+	return found;
+}
+
+function findRevertLayerKeyword(declaration) {
+	const { value } = declaration.data;
+	if (!value) {
+		return false;
+	}
+	if (value.type === RAW_TYPE) {
+		return REVERT_LAYER_TEST.test(decodeIdentifier(value.value));
+	}
+	return Boolean(cssTree.find(value, node => node.type === IDENTIFIER_TYPE && decodeIdentifier(node.name).toLowerCase() === REVERT_LAYER_KEYWORD));
 }
 
 function createContextKey(conditionalStack) {
@@ -571,13 +914,15 @@ function collectDeclarationItemsForElement(element, docContext) {
 	const matchingSelectors = docContext.matchingSelectors.get(element);
 	const allDeclarations = [];
 	matchingSelectors.forEach(selector => {
-		const cssRule = docContext.selectorData.get(selector).rule;
+		const selectorData = docContext.selectorData.get(selector);
+		const cssRule = selectorData.rule;
 		if (hasChildNodes(cssRule.block)) {
+			const proximity = getScopeProximity(element, selector, docContext);
 			const declarations = cssRule.block.children;
 			for (let declaration = declarations.head; declaration; declaration = declaration.next) {
-				const { type, value } = declaration.data;
+				const { type, value, order } = declaration.data;
 				if (type === DECLARATION_TYPE && value) {
-					addDeclaration(declaration, docContext.selectorData.get(selector).specificity, false, selector);
+					addDeclaration(declaration, selectorData.specificity, false, selector, order === undefined ? cssRule.order : order, proximity);
 				}
 			}
 		}
@@ -588,36 +933,41 @@ function collectDeclarationItemsForElement(element, docContext) {
 	}
 	return allDeclarations;
 
-	function addDeclaration(declaration, specificity, isInline, selector) {
+	function addDeclaration(declaration, specificity, isInline, selector, order, proximity) {
 		const { property, value } = declaration.data;
-		const isRawValue = value.type === RAW_TYPE;
-		const hasValueChildNodes = hasChildNodes(value) || value.type === RAW_TYPE;
-		let isInvalidValue;
-		if (value.type === VALUE_TYPE &&
-			hasValueChildNodes &&
-			value.children.size == 1) {
-			if (value.children.head.data.name) {
-				const name = value.children.head.data.name;
-				isInvalidValue = isUnsupportedVendorValue(property, name) || INVALID_CSS_ESCAPE_TEST.test(name);
-			} if (!property.startsWith(VENDOR_PREFIX) && value.children.head.data.value) {
-				try {
-					isInvalidValue = isUnsupportedPropertyValue(property, value);
-				} catch {
-					// ignored
-				}
+		if (value.type === VALUE_TYPE && hasChildNodes(value)) {
+			const validity = getCachedValueValidity(property, value, docContext);
+			if (validity !== VALIDITY_INVALID) {
+				allDeclarations.push({
+					declaration,
+					selector,
+					specificity,
+					isInline,
+					order,
+					proximity,
+					validity
+				});
 			}
 		}
-		if (hasValueChildNodes && !isRawValue && !isInvalidValue) {
-			allDeclarations.push({
-				declaration,
-				selector,
-				specificity,
-				isInline
-			});
-		}
 	}
 }
 
+function getCachedValueValidity(property, value, docContext) {
+	if (property.startsWith(CUSTOM_PROPERTY_PREFIX)) {
+		return VALIDITY_VALID;
+	}
+	if (!docContext.valueValidities.has(value)) {
+		docContext.valueValidities.set(value, getValueValidity(property, value));
+	}
+	return docContext.valueValidities.get(value);
+}
+
+function getScopeProximity(element, selector, docContext) {
+	const proximities = docContext.scopeProximities.get(docContext.scopeProximityKeys.get(selector));
+	const proximity = proximities && proximities.get(element);
+	return proximity === undefined ? UNSCOPED_PROXIMITY : proximity;
+}
+
 function getConditionalStackForSelector(selector, docContext) {
 	let conditionalStack = [];
 	if (selector) {
@@ -629,20 +979,27 @@ function getConditionalStackForSelector(selector, docContext) {
 	return conditionalStack;
 }
 
-function matchElements(selector, ancestorsSelectors, scopeStack, docContext, relativeToScope) {
-	let selectorText = createSelectorText(selector, ancestorsSelectors, docContext);
+function matchElements(selector, nestedSelector, scopeStack, docContext, relativeToScope) {
+	let selectorText = sanitizeSelector(nestedSelector === null ? selector : nestedSelector, docContext);
 	if (relativeToScope) {
 		selectorText = SCOPE_PSEUDO_CLASS + selectorText;
+	} else if (scopeStack && scopeStack.length) {
+		selectorText = getScopedSelectorText(selectorText, docContext);
 	}
 	const cacheKey = createScopeCacheKey(selectorText, scopeStack);
+	if (scopeStack && scopeStack.length) {
+		docContext.scopeProximityKeys.set(selector, cacheKey);
+	}
 	const cachedNodes = docContext.matchedSelectors.get(cacheKey);
 	if (cachedNodes) {
 		return cachedNodes;
 	}
 	let nodes;
 	if (scopeStack && scopeStack.length) {
-		nodes = matchElementsInScope(selectorText, scopeStack);
+		const proximities = new Map();
+		nodes = matchElementsInScope(selectorText, scopeStack, proximities);
 		nodes = filterElementsByScopes(nodes, scopeStack);
+		docContext.scopeProximities.set(cacheKey, proximities);
 	} else {
 		nodes = querySelectorAll(docContext.doc, selectorText);
 	}
@@ -650,6 +1007,26 @@ function matchElements(selector, ancestorsSelectors, scopeStack, docContext, rel
 	return nodes;
 }
 
+function getScopedSelectorText(selectorText, docContext) {
+	if (!docContext.scopedSelectorTexts.has(selectorText)) {
+		let scopedSelectorText = selectorText;
+		try {
+			const selectorList = parseCss(selectorText, SELECTOR_LIST_CONTEXT);
+			scopedSelectorText = selectorList.children.toArray().map(selector => {
+				const hasScopePseudoClass = cssTree.find(selector, node => node.type === PSEUDO_CLASS_SELECTOR_TYPE && decodeName(node.name) === SCOPE_PSEUDO_CLASS_NAME);
+				return hasScopePseudoClass ? cssTree.generate(selector) : SCOPE_PSEUDO_CLASS + DESCENDANT_COMBINATOR + cssTree.generate(selector);
+			}).join(PRELUDE_SEPARATOR);
+		} catch {
+			if (DEBUG) {
+				// eslint-disable-next-line no-console
+				console.warn(PARSE_CSS_ERROR_MESSAGE, selectorText);
+			}
+		}
+		docContext.scopedSelectorTexts.set(selectorText, scopedSelectorText);
+	}
+	return docContext.scopedSelectorTexts.get(selectorText);
+}
+
 function createScopeCacheKey(selectorText, scopeStack) {
 	if (!scopeStack || !scopeStack.length) {
 		return selectorText;
@@ -658,7 +1035,7 @@ function createScopeCacheKey(selectorText, scopeStack) {
 	return `${selectorText}${CONTEXT_KEY_SEPARATOR}${signature}`;
 }
 
-function matchElementsInScope(selectorText, scopeStack) {
+function matchElementsInScope(selectorText, scopeStack, proximities) {
 	const currentScope = scopeStack[scopeStack.length - 1];
 	const roots = Array.from(currentScope.rootElements);
 	if (!roots.length) {
@@ -666,7 +1043,19 @@ function matchElementsInScope(selectorText, scopeStack) {
 	}
 	const matchedNodes = new Set();
 	roots.forEach(root => {
-		matchSelectorWithinRoot(root, selectorText).forEach(node => matchedNodes.add(node));
+		const stopElements = currentScope.stopElements && currentScope.stopElements.get(root);
+		matchSelectorWithinRoot(root, selectorText).forEach(node => {
+			const proximity = getRootProximity(node, root, stopElements);
+			if (proximity !== UNSCOPED_PROXIMITY) {
+				matchedNodes.add(node);
+				if (proximities) {
+					const knownProximity = proximities.get(node);
+					if (knownProximity === undefined || proximity < knownProximity) {
+						proximities.set(node, proximity);
+					}
+				}
+			}
+		});
 	});
 	return Array.from(matchedNodes);
 }
@@ -674,7 +1063,7 @@ function matchElementsInScope(selectorText, scopeStack) {
 function matchSelectorWithinRoot(root, selectorText) {
 	const matchedNodes = new Set();
 	if (!root || root.nodeType !== 1) {
-		return matchedNodes;
+		return [];
 	}
 	if (matches(root, selectorText)) {
 		matchedNodes.add(root);
@@ -736,17 +1125,10 @@ function getTraversalRoots(root) {
 		return [];
 	}
 	if (root.nodeType === 9 || root.nodeType === 11) {
-		const roots = [];
 		if (root.documentElement) {
-			roots.push(root.documentElement);
+			return [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 root.children ? Array.from(root.children).filter(node => node.nodeType === 1) : [];
 	}
 	return [root];
 }
@@ -771,30 +1153,81 @@ function isElementWithinScopes(element, scopeStack) {
 }
 
 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)) {
+	const { rootElements, stopElements } = scopeContext;
+	for (let current = element; current && current.nodeType === 1; current = current.parentElement) {
+		if (rootElements.has(current) && getRootProximity(element, current, stopElements && stopElements.get(current)) !== UNSCOPED_PROXIMITY) {
 			return true;
 		}
-		current = current.parentElement;
 	}
 	return false;
 }
 
-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 getRootProximity(element, root, stopElements) {
+	const ancestors = [];
+	for (let current = element; current && current.nodeType === 1; current = current.parentElement) {
+		ancestors.push(current);
+		if (current === root) {
+			return isPathBlocked(ancestors, stopElements) ? UNSCOPED_PROXIMITY : ancestors.length - 1;
+		}
+	}
+	return UNSCOPED_PROXIMITY;
+}
+
+function isPathBlocked(ancestors, stopElements) {
+	return Boolean(stopElements) && ancestors.some(ancestor => stopElements.has(ancestor));
+}
+
+function getNestedSelector(selector, ancestorsSelectors, docContext) {
+	if (!ancestorsSelectors || !ancestorsSelectors.length) {
+		return null;
 	}
-	if (!selectorText) {
-		selectorText = sanitizeSelector(selector, ancestorsSelectors, docContext);
+	const nestedSelectorText = nestSelectorText(getSelectorText(selector.data, docContext), getNestingParentText(ancestorsSelectors, docContext), docContext);
+	return { data: parseCss(nestedSelectorText, SELECTOR_LIST_CONTEXT) };
+}
+
+function getNestingParentText(ancestorsSelectors, docContext) {
+	const prelude = ancestorsSelectors[ancestorsSelectors.length - 1];
+	if (!docContext.nestingParentTexts.has(prelude)) {
+		const grandParentText = ancestorsSelectors.length > 1 ? getNestingParentText(ancestorsSelectors.slice(0, -1), docContext) : null;
+		const selectorTexts = [];
+		for (let parentSelector = prelude.children.head; parentSelector; parentSelector = parentSelector.next) {
+			if (!hasPseudoElement(parentSelector.data)) {
+				const parentText = getSelectorText(parentSelector.data, docContext);
+				selectorTexts.push(grandParentText === null ? parentText : nestSelectorText(parentText, grandParentText, docContext));
+			}
+		}
+		docContext.nestingParentTexts.set(prelude, selectorTexts.length ? IS_PSEUDO_CLASS_PREFIX + selectorTexts.join(PRELUDE_SEPARATOR) + IS_PSEUDO_CLASS_SUFFIX : NO_ELEMENT_SELECTOR);
 	}
-	return selectorText;
+	return docContext.nestingParentTexts.get(prelude);
+}
+
+function hasPseudoElement(selector) {
+	return Boolean(cssTree.find(selector, node => node.type === PSEUDO_ELEMENT_SELECTOR_TYPE || (node.type === PSEUDO_CLASS_SELECTOR_TYPE && PSEUDO_ELEMENT_SYNONYMS.has(decodeName(node.name)))));
+}
+
+function nestSelectorText(selectorText, parentText, docContext) {
+	const selector = parseCss(selectorText);
+	let hasNestingSelector = false;
+	cssTree.walk(selector, {
+		visit: NESTING_SELECTOR_TYPE,
+		enter(_node, item, list) {
+			hasNestingSelector = true;
+			list.insertData(getNestingParentNode(parentText, docContext), item);
+			list.remove(item);
+		}
+	});
+	if (hasNestingSelector) {
+		return cssTree.generate(selector);
+	}
+	const startsWithCombinator = selector.children.head.data.type === COMBINATOR_NAME;
+	return parentText + (startsWithCombinator ? EMPTY_STRING : DESCENDANT_COMBINATOR) + selectorText;
+}
+
+function getNestingParentNode(parentText, docContext) {
+	if (!docContext.nestingParentNodes.has(parentText)) {
+		docContext.nestingParentNodes.set(parentText, parseCss(parentText).children.head.data);
+	}
+	return cssTree.clone(docContext.nestingParentNodes.get(parentText));
 }
 
 function compareDeclarations(declarationA, declarationB, docContext) {
@@ -809,7 +1242,7 @@ function compareDeclarations(declarationA, declarationB, docContext) {
 	const selectorDataB = declarationB.selector ? docContext.selectorData.get(declarationB.selector) : null;
 	if (selectorDataA && selectorDataB) {
 		const layerComparison = compareLayers(selectorDataA.layerStack, selectorDataB.layerStack, docContext);
-		if (layerComparison !== 0) {
+		if (layerComparison) {
 			return importantA ? -layerComparison : layerComparison;
 		}
 		const specificityA = declarationA.specificity;
@@ -823,8 +1256,11 @@ function compareDeclarations(declarationA, declarationB, docContext) {
 		if (specificityA.c !== specificityB.c) {
 			return specificityA.c - specificityB.c;
 		}
-		if (selectorDataA.rule.order !== selectorDataB.rule.order) {
-			return selectorDataA.rule.order - selectorDataB.rule.order;
+		if (declarationA.proximity !== declarationB.proximity) {
+			return declarationB.proximity - declarationA.proximity;
+		}
+		if (declarationA.order !== declarationB.order) {
+			return declarationA.order - declarationB.order;
 		}
 		return 0;
 	} else {
@@ -860,27 +1296,32 @@ function compareLayers(layersA, layersB, docContext) {
 	if (fullLayerNameA === fullLayerNameB) {
 		return 0;
 	}
+	const comparisonKey = fullLayerNameA + CONTEXT_KEY_SEPARATOR + fullLayerNameB;
+	if (!docContext.layerComparisons.has(comparisonKey)) {
+		docContext.layerComparisons.set(comparisonKey, compareLayerNames(layersA, layersB, docContext));
+	}
+	return docContext.layerComparisons.get(comparisonKey);
+}
+
+function compareLayerNames(layersA, layersB, docContext) {
 	const minLength = Math.min(layersA.length, layersB.length);
-	const effectiveMap = docContext.layerOrder;
 	for (let indexLayer = 0; indexLayer < minLength; indexLayer++) {
 		if (layersA[indexLayer] !== layersB[indexLayer]) {
-			const partialLayerA = getFullLayerName(layersA.slice(0, indexLayer + 1));
-			const partialLayerB = getFullLayerName(layersB.slice(0, indexLayer + 1));
-			const orderA = effectiveMap.get(partialLayerA);
-			const orderB = effectiveMap.get(partialLayerB);
-			if (orderA !== undefined && orderB !== undefined) {
-				return orderA - orderB;
+			const positionA = docContext.layerOrder.get(getFullLayerName(layersA.slice(0, indexLayer + 1)));
+			const positionB = docContext.layerOrder.get(getFullLayerName(layersB.slice(0, indexLayer + 1)));
+			if (!positionA || !positionB) {
+				return UNCERTAIN_LAYER_ORDER;
 			}
-			if (orderA !== undefined) {
+			if (positionA.firstCertain < positionB.first) {
 				return -1;
 			}
-			if (orderB !== undefined) {
+			if (positionB.firstCertain < positionA.first) {
 				return 1;
 			}
-			return 0;
+			return UNCERTAIN_LAYER_ORDER;
 		}
 	}
-	return layersA.length - layersB.length;
+	return layersB.length - layersA.length;
 }
 
 function removeStylesheetEmptyRules(cssRules, docContext) {
@@ -890,15 +1331,22 @@ function removeStylesheetEmptyRules(cssRules, docContext) {
 		if (ruleData.type === RULE_TYPE) {
 			if (hasChildNodes(ruleData.block)) {
 				removeStylesheetEmptyRules(ruleData.block.children, docContext);
-			} else {
+			}
+			if (!hasChildNodes(ruleData.block)) {
 				docContext.stats.discarded++;
 				removedRules.add(cssRule);
 			}
-		} else if (ruleData.type === AT_RULE_TYPE && ruleData.block && ruleData.name !== FONT_FACE_NAME && ruleData.name !== KEYFRAMES_NAME) {
+		} else if (isImportRule(ruleData)) {
+			removeStylesheetEmptyRules(ruleData.prelude.children.head.data.importedChildren, docContext);
+		} else if (ruleData.type === AT_RULE_TYPE && ruleData.block && decodeName(ruleData.name) !== FONT_FACE_NAME && decodeName(ruleData.name) !== KEYFRAMES_NAME) {
 			removeStylesheetEmptyRules(ruleData.block.children, docContext);
 			if (!hasChildNodes(ruleData.block)) {
-				docContext.stats.discarded++;
-				removedRules.add(cssRule);
+				if (decodeName(ruleData.name) === LAYER_NAME) {
+					removeEmptyLayerRule(ruleData, cssRule, removedRules, docContext);
+				} else {
+					docContext.stats.discarded++;
+					removedRules.add(cssRule);
+				}
 			}
 		}
 	}
@@ -951,22 +1399,18 @@ function expandRawCssRules(ruleData) {
 	const ruleChildren = [];
 	if (hasChildNodes(ruleData.block)) {
 		for (let cssRuleNode = ruleData.block.children.head; cssRuleNode; cssRuleNode = cssRuleNode.next) {
-			if (cssRuleNode.data.type === RAW_TYPE) {
-				if (cssRuleNode.data.value.indexOf(BLOCK_OPEN) !== -1 &&
-					cssRuleNode.data.value.indexOf(BLOCK_OPEN) < cssRuleNode.data.value.indexOf(BLOCK_CLOSE)) {
-					try {
-						const stylesheet = parseCss(cssRuleNode.data.value, STYLESHEET_CONTEXT);
-						for (let stylesheetChild = stylesheet.children.head; stylesheetChild; stylesheetChild = stylesheetChild.next) {
-							ruleChildren.push(stylesheetChild);
-						}
-					} catch (error) {
-						if (DEBUG) {
-							// eslint-disable-next-line no-console
-							console.warn(PARSE_CSS_ERROR_MESSAGE, cssRuleNode.data.value, error);
-						}
+			const rawRuleText = getRawRuleText(cssRuleNode.data);
+			if (rawRuleText !== null) {
+				try {
+					const stylesheet = parseCss(rawRuleText, STYLESHEET_CONTEXT);
+					for (let stylesheetChild = stylesheet.children.head; stylesheetChild; stylesheetChild = stylesheetChild.next) {
+						ruleChildren.push(stylesheetChild);
+					}
+				} catch (error) {
+					if (DEBUG) {
+						// eslint-disable-next-line no-console
+						console.warn(PARSE_CSS_ERROR_MESSAGE, rawRuleText, error);
 					}
-				} else {
-					ruleChildren.push(cssRuleNode);
 				}
 			} else {
 				ruleChildren.push(cssRuleNode);
@@ -977,62 +1421,19 @@ function expandRawCssRules(ruleData) {
 	ruleChildren.forEach(ruleChild => ruleData.block.children.appendData(ruleChild.data));
 }
 
-function combineSelectorWithAncestors(selector, ancestorsSelectors, docContext) {
-	const selectorText = getSelectorText(selector, docContext);
-	if (!ancestorsSelectors || !ancestorsSelectors.length) {
-		return selectorText;
-	} else {
-		let contexts = [EMPTY_STRING];
-		ancestorsSelectors.forEach(selectorList => {
-			if (hasChildNodes(selectorList)) {
-				const parentSelectors = selectorList.children.toArray();
-				const nextContexts = [];
-				contexts.forEach(context => parentSelectors.forEach(parentSelector => {
-					const parentText = getSelectorText(parentSelector, docContext);
-					const combined = context ? combineSelectors(context, parentText) : parentText;
-					if (!nextContexts.includes(combined)) {
-						nextContexts.push(combined);
-					}
-				}));
-				if (nextContexts.length) {
-					contexts = nextContexts;
-				}
-			}
-		});
-		const expandedSelectors = new Set();
-		contexts.forEach(context => {
-			const result = context ? combineSelectors(context, selectorText) : selectorText;
-			expandedSelectors.add(result);
-		});
-		return Array.from(expandedSelectors).join(PRELUDE_SEPARATOR);
+function getRawRuleText(node) {
+	if (node.type === RAW_TYPE && holdsBlock(node.value)) {
+		return node.value;
+	}
+	if (node.type === DECLARATION_TYPE && !node.property.startsWith(CUSTOM_PROPERTY_PREFIX) && node.value.type === RAW_TYPE && holdsBlock(node.value.value) && node.value.value.trimStart().indexOf(BLOCK_OPEN) > 0) {
+		return node.property + DECLARATION_SEPARATOR + node.value.value;
 	}
+	return null;
 }
 
-function combineSelectors(parentSelectorText, childSelectorText) {
-	const childSelector = parseCss(childSelectorText || NESTING_SELECTOR);
-	const parentSelector = parentSelectorText ? parseCss(parentSelectorText) : null;
-	let hasNesting = false;
-	cssTree.walk(childSelector, {
-		visit: NESTING_SELECTOR_TYPE,
-		enter(_node, item, list) {
-			hasNesting = true;
-			if (!parentSelector) {
-				list.remove(item);
-				return;
-			}
-			const nodes = parentSelector.children.toArray().map(parent => cssTree.clone(parent));
-			nodes.forEach(node => list.insertData(node, item));
-			list.remove(item);
-		}
-	});
-	if (hasNesting) {
-		return cssTree.generate(childSelector);
-	}
-	if (!parentSelector) {
-		return cssTree.generate(childSelector);
-	}
-	const combinedSelector = parseCss(`${parentSelectorText} ${childSelectorText}`);
-	return cssTree.generate(combinedSelector);
+function holdsBlock(text) {
+	const blockOpenIndex = text.indexOf(BLOCK_OPEN);
+	return blockOpenIndex !== -1 && blockOpenIndex < text.indexOf(BLOCK_CLOSE);
 }
 
 function hasChildNodes(node) {
@@ -1058,7 +1459,7 @@ function getPreludeText(prelude, docContext) {
 }
 
 function getFullLayerName(layers) {
-	return layers.map(layerName => layerName === EMPTY_STRING ? ANONYMOUS_LAYER_PLACEHOLDER : layerName).join(LAYER_NAME_SEPARATOR);
+	return layers.join(LAYER_NAME_KEY_SEPARATOR);
 }
 
 function parseCss(text, context = SELECTOR_CONTEXT) {