@tsrx/core 0.1.9 → 0.1.11

package/src/analyze/prune.js

@@ -0,0 +1,1151 @@
+/** @import * as AST from 'estree' */
+/** @import { Visitors, TopScopedClasses, StyleClasses } from '../../types/index' */
+/** @typedef {0 | 1} Direction */
+
+import { walk } from 'zimmerframe';
+
+const regex_backslash_and_following_character = /\\(.)/g;
+/** @type {Direction} */
+const FORWARD = 0;
+/** @type {Direction} */
+const BACKWARD = 1;
+
+// this will be set for every prune_css call
+// since the code is synchronous, this is safe
+/** @type {string} */
+let css_hash;
+/** @type {StyleClasses} */
+let style_identifier_classes;
+/** @type {TopScopedClasses} */
+let top_scoped_classes;
+
+/**
+ * Returns true if node is a DOM element (not a component).
+ * @param {AST.Node} node
+ * @returns {boolean}
+ */
+function is_element_dom_element(node) {
+	const id = /** @type {AST.Element} */ (node).id;
+	return (
+		id.type === 'Identifier' &&
+		id.name[0].toLowerCase() === id.name[0] &&
+		id.name !== 'children' &&
+		!id.tracked
+	);
+}
+
+/**
+ * Returns true if element is dynamic.
+ * @param {AST.Element} node
+ * @returns {boolean}
+ */
+function is_element_dynamic(node) {
+	return node.id.type === 'Identifier' ? !!node.id.tracked : false;
+}
+
+// CSS selector constants
+/**
+ * @param {number} start
+ * @param {number} end
+ * @returns {AST.CSS.Combinator}
+ */
+function create_descendant_combinator(start, end) {
+	return { name: ' ', type: 'Combinator', start, end };
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector} relative_selector
+ * @param {AST.CSS.ClassSelector} selector
+ * @returns {boolean}
+ */
+function is_standalone_class_selector(relative_selector, selector) {
+	return relative_selector.selectors.length === 1 && relative_selector.selectors[0] === selector;
+}
+
+/**`
+ * @param {number} start
+ * @param {number} end
+ * @returns {AST.CSS.RelativeSelector}
+ */
+function create_nesting_selector(start, end) {
+	return {
+		type: 'RelativeSelector',
+		selectors: [{ type: 'NestingSelector', name: '&', start, end }],
+		combinator: null,
+		metadata: { is_global: false, is_global_like: false, scoped: false },
+		start,
+		end,
+	};
+}
+
+/**
+ * @param {number} start
+ * @param {number} end
+ * @returns {AST.CSS.RelativeSelector}
+ */
+function create_any_selector(start, end) {
+	return {
+		type: 'RelativeSelector',
+		selectors: [{ type: 'TypeSelector', name: '*', start, end }],
+		combinator: null,
+		metadata: { is_global: false, is_global_like: false, scoped: false },
+		start,
+		end,
+	};
+}
+
+// Whitelist for attribute selectors on specific elements
+const whitelist_attribute_selector = new Map([
+	['details', ['open']],
+	['dialog', ['open']],
+	['form', ['novalidate']],
+	['iframe', ['allow', 'allowfullscreen', 'allowpaymentrequest', 'loading', 'referrerpolicy']],
+	['img', ['loading']],
+	[
+		'input',
+		[
+			'accept',
+			'autocomplete',
+			'capture',
+			'checked',
+			'disabled',
+			'max',
+			'maxlength',
+			'min',
+			'minlength',
+			'multiple',
+			'pattern',
+			'placeholder',
+			'readonly',
+			'required',
+			'size',
+			'step',
+		],
+	],
+	['object', ['typemustmatch']],
+	['ol', ['reversed', 'start', 'type']],
+	['optgroup', ['disabled']],
+	['option', ['disabled', 'selected']],
+	['script', ['async', 'defer', 'nomodule', 'type']],
+	['select', ['disabled', 'multiple', 'required', 'size']],
+	[
+		'textarea',
+		[
+			'autocomplete',
+			'disabled',
+			'maxlength',
+			'minlength',
+			'placeholder',
+			'readonly',
+			'required',
+			'rows',
+			'wrap',
+		],
+	],
+	['video', ['autoplay', 'controls', 'loop', 'muted', 'playsinline']],
+]);
+
+/**
+ * @param {AST.CSS.ComplexSelector} node
+ */
+function get_relative_selectors(node) {
+	const selectors = truncate(node);
+
+	if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) {
+		let has_explicit_nesting_selector = false;
+
+		// nesting could be inside pseudo classes like :is, :has or :where
+		for (let selector of selectors) {
+			walk(
+				selector,
+				null,
+				/** @type {Visitors<AST.CSS.Node, null>} */ ({
+					NestingSelector() {
+						has_explicit_nesting_selector = true;
+					},
+				}),
+			);
+
+			// if we found one we can break from the others
+			if (has_explicit_nesting_selector) break;
+		}
+
+		if (!has_explicit_nesting_selector) {
+			if (selectors[0].combinator === null) {
+				selectors[0] = {
+					...selectors[0],
+					combinator: create_descendant_combinator(selectors[0].start, selectors[0].end),
+				};
+			}
+
+			selectors.unshift(create_nesting_selector(selectors[0].start, selectors[0].end));
+		}
+	}
+
+	return selectors;
+}
+
+/**
+ *
+ * @param {AST.CSS.ComplexSelector} node
+ * @returns {AST.CSS.RelativeSelector[]}
+ */
+function truncate(node) {
+	const i = node.children.findLastIndex(({ metadata, selectors }) => {
+		const first = selectors[0];
+		return (
+			// not after a :global selector
+			!metadata.is_global_like &&
+			!(first.type === 'PseudoClassSelector' && first.name === 'global' && first.args === null) &&
+			// not a :global(...) without a :has/is/where(...) modifier that is scoped
+			!metadata.is_global
+		);
+	});
+
+	return node.children.slice(0, i + 1).map((child) => {
+		// In case of `:root.y:has(...)`, `y` is unscoped, but everything in `:has(...)` should be scoped (if not global).
+		// To properly accomplish that, we gotta filter out all selector types except `:has`.
+		const root = child.selectors.find((s) => s.type === 'PseudoClassSelector' && s.name === 'root');
+		if (!root || child.metadata.is_global_like) return child;
+
+		return {
+			...child,
+			selectors: child.selectors.filter(
+				(s) => s.type === 'PseudoClassSelector' && s.name === 'has',
+			),
+		};
+	});
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector[]} relative_selectors
+ * @param {AST.CSS.Rule} rule
+ * @param {AST.Element} element
+ * @param {Direction} direction
+ * @returns {boolean}
+ */
+function apply_selector(relative_selectors, rule, element, direction) {
+	const rest_selectors = relative_selectors.slice();
+	const relative_selector = direction === FORWARD ? rest_selectors.shift() : rest_selectors.pop();
+
+	const matched =
+		!!relative_selector &&
+		relative_selector_might_apply_to_node(relative_selector, rule, element, direction) &&
+		apply_combinator(relative_selector, rest_selectors, rule, element, direction);
+
+	if (matched) {
+		if (!is_outer_global(relative_selector)) {
+			relative_selector.metadata.scoped = true;
+
+			// Store scoped class information on element for language server features
+			if (!relative_selector.metadata.is_global && !relative_selector.metadata.is_global_like) {
+				// Extract class selectors from the relative selector
+				for (const selector of relative_selector.selectors) {
+					if (selector.type === 'ClassSelector') {
+						const name = selector.name.replace(regex_backslash_and_following_character, '$1');
+
+						if (!element.metadata.css) {
+							element.metadata.css = {
+								scopedClasses: new Map(),
+								hash: css_hash,
+							};
+						}
+
+						// Store class name → CSS location in scopedClasses
+						if (!element.metadata.css.scopedClasses.has(name)) {
+							element.metadata.css.scopedClasses.set(name, {
+								start: selector.start,
+								end: selector.end,
+								selector: selector,
+							});
+						}
+					}
+				}
+			}
+		}
+
+		element.metadata.scoped = true;
+	}
+
+	return matched;
+}
+
+/**
+ * @param {AST.Element} node
+ * @param {boolean} adjacent_only
+ * @returns {AST.Element[]}
+ */
+function get_ancestor_elements(node, adjacent_only) {
+	/** @type {AST.Element[]} */
+	const ancestors = [];
+
+	const path = node.metadata.path;
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'Element') {
+			ancestors.push(parent);
+			if (adjacent_only) {
+				break;
+			}
+		}
+	}
+
+	return ancestors;
+}
+
+/**
+ * @param {AST.Element} node
+ * @param {boolean} adjacent_only
+ * @returns {AST.Element[]}
+ */
+function get_descendant_elements(node, adjacent_only) {
+	/** @type {AST.Element[]} */
+	const descendants = [];
+
+	/**
+	 * @param {AST.Node} current_node
+	 * @param {number} depth
+	 * @returns {void}
+	 */
+	function visit(current_node, depth = 0) {
+		if (current_node.type === 'Element' && current_node !== node) {
+			descendants.push(current_node);
+			if (adjacent_only) return; // Only direct children for '>' combinator
+		}
+
+		// Visit children based on TSRX's template AST structure
+		if (/** @type {AST.Element} */ (current_node).children) {
+			for (const child of /** @type {AST.Element} */ (current_node).children) {
+				visit(child, depth + 1);
+			}
+		}
+
+		if (/** @type {AST.Component} */ (current_node).body) {
+			for (const child of /** @type {AST.Component} */ (current_node).body) {
+				visit(child, depth + 1);
+			}
+		}
+
+		// For template nodes and interpolation expressions
+		if (
+			(current_node.type === 'TSRXExpression' ||
+				current_node.type === 'Text' ||
+				current_node.type === 'Html') &&
+			/** @type {AST.TSRXExpression | AST.Html | AST.TextNode} */ (current_node).expression &&
+			typeof (
+				/** @type {AST.TSRXExpression | AST.Html | AST.TextNode} */ (current_node).expression
+			) === 'object'
+		) {
+			visit(
+				/** @type {AST.TSRXExpression | AST.Html | AST.TextNode} */ (current_node).expression,
+				depth + 1,
+			);
+		}
+	}
+
+	// Start from node's children
+	if (node.children) {
+		for (const child of node.children) {
+			visit(child);
+		}
+	}
+
+	return descendants;
+}
+
+/**
+ * Check if an element can render dynamic content that might affect CSS matching
+ * @param {AST.Node} element
+ * @param {boolean} check_classes - Whether to check for dynamic class attributes
+ * @returns {boolean}
+ */
+function can_render_dynamic_content(element, check_classes = false) {
+	if (!is_element_dom_element(element)) {
+		return true;
+	}
+
+	// Either a dynamic element or component (only can tell at runtime)
+	// But dynamic elements should return false ideally
+	if (is_element_dynamic(/** @type {AST.Element} */ (element))) {
+		return true;
+	}
+
+	// Check for dynamic class attributes if requested (for class-based selectors)
+	if (check_classes && /** @type {AST.Element} */ (element).attributes) {
+		for (const attr of /** @type {AST.Element} */ (element).attributes) {
+			if (attr.type === 'Attribute' && attr.name.name === 'class') {
+				// Check if class value is an expression (not a static string)
+				if (attr.value && typeof attr.value === 'object') {
+					// If it's a CallExpression or other dynamic value, it's dynamic
+					if (attr.value.type !== 'Literal' && attr.value.type !== 'Text') {
+						return true;
+					}
+				}
+			}
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.Node} node
+ * @param {Direction} direction
+ * @param {boolean} adjacent_only
+ * @returns {Map<AST.Element, boolean>}
+ */
+function get_possible_element_siblings(node, direction, adjacent_only) {
+	const siblings = new Map();
+	// Parent has to be an Element not a Component
+	const parent = get_element_parent(node);
+
+	if (!parent) {
+		return siblings;
+	}
+
+	// Get the container that holds the siblings
+	const container = parent.children || [];
+	const node_index = container.indexOf(node);
+
+	if (node_index === -1) return siblings;
+
+	// Determine which siblings to check based on direction
+	let start, end, step;
+	if (direction === FORWARD) {
+		start = node_index + 1;
+		end = container.length;
+		step = 1;
+	} else {
+		start = node_index - 1;
+		end = -1;
+		step = -1;
+	}
+
+	// Collect siblings
+	for (let i = start; i !== end; i += step) {
+		const sibling = container[i];
+
+		if (sibling.type === 'Element' || sibling.type === 'Component') {
+			siblings.set(sibling, true);
+			// Don't break for dynamic elements (children, Components, dynamic components)
+			// as they can render dynamic content or might render nothing
+			const isDynamic = can_render_dynamic_content(sibling, false);
+			if (adjacent_only && !isDynamic) {
+				break; // Only immediate sibling for '+' combinator
+			}
+		}
+		// Stop at non-whitespace text nodes for adjacent selectors
+		else if (
+			adjacent_only &&
+			(sibling.type === 'TSRXExpression' || sibling.type === 'Text') &&
+			sibling.expression.type === 'Literal' &&
+			typeof sibling.expression.value === 'string' &&
+			sibling.expression.value.trim()
+		) {
+			break;
+		}
+	}
+
+	return siblings;
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector} relative_selector
+ * @param {AST.CSS.RelativeSelector[]} rest_selectors
+ * @param {AST.CSS.Rule} rule
+ * @param {AST.Element} node
+ * @param {Direction} direction
+ * @returns {boolean}
+ */
+function apply_combinator(relative_selector, rest_selectors, rule, node, direction) {
+	const combinator =
+		direction == FORWARD ? rest_selectors[0]?.combinator : relative_selector.combinator;
+	if (!combinator) return true;
+
+	switch (combinator.name) {
+		case ' ':
+		case '>': {
+			const is_adjacent = combinator.name === '>';
+			const parents =
+				direction === FORWARD
+					? get_descendant_elements(node, is_adjacent)
+					: get_ancestor_elements(node, is_adjacent);
+			let parent_matched = false;
+
+			for (const parent of parents) {
+				if (apply_selector(rest_selectors, rule, parent, direction)) {
+					parent_matched = true;
+				}
+			}
+
+			return (
+				parent_matched ||
+				(direction === BACKWARD &&
+					(!is_adjacent || parents.length === 0) &&
+					rest_selectors.every((selector) => is_global(selector, rule)))
+			);
+		}
+
+		case '+':
+		case '~': {
+			const siblings = get_possible_element_siblings(node, direction, combinator.name === '+');
+
+			let sibling_matched = false;
+
+			for (const possible_sibling of siblings.keys()) {
+				// Check if this sibling can render dynamic content
+				// For class selectors, also check if element has dynamic classes
+				const has_class_selector = rest_selectors.some((sel) =>
+					sel.selectors?.some((s) => s.type === 'ClassSelector'),
+				);
+				const is_dynamic = can_render_dynamic_content(possible_sibling, has_class_selector);
+
+				if (is_dynamic) {
+					if (rest_selectors.length > 0) {
+						// Check if the first selector in the rest is global
+						const first_rest_selector = rest_selectors[0];
+						if (is_global(first_rest_selector, rule)) {
+							// Global selector followed by possibly more selectors
+							// Check if remaining selectors could match elements after this component
+							const remaining = rest_selectors.slice(1);
+							if (remaining.length === 0) {
+								// Just a global selector, mark as matched
+								sibling_matched = true;
+							} else {
+								// Check if there are any elements after this component that could match the remaining selectors
+								const parent = get_element_parent(node);
+								if (parent) {
+									const container = parent.children || [];
+									const component_index = container.indexOf(possible_sibling);
+
+									// For adjacent combinator, only check immediate next element
+									// For general sibling, check all following elements
+									const search_start = component_index + 1;
+									const search_end = combinator.name === '+' ? search_start + 1 : container.length;
+
+									for (let i = search_start; i < search_end; i++) {
+										const subsequent = container[i];
+										if (subsequent.type === 'Element') {
+											if (apply_selector(remaining, rule, subsequent, direction)) {
+												sibling_matched = true;
+												break;
+											}
+											if (combinator.name === '+') break; // For adjacent, only check first element
+										} else if (subsequent.type === 'Component') {
+											// Skip components when looking for the target element
+											if (combinator.name === '+') {
+												// For adjacent, continue looking
+												continue;
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+					// Don't apply_selector for dynamic elements - they won't match regular element selectors
+				} else if (
+					possible_sibling.type === 'Element' &&
+					apply_selector(rest_selectors, rule, possible_sibling, direction)
+				) {
+					sibling_matched = true;
+				}
+			}
+
+			return (
+				sibling_matched ||
+				(direction === BACKWARD &&
+					get_element_parent(node) === null &&
+					rest_selectors.every((selector) => is_global(selector, rule)))
+			);
+		}
+
+		default:
+			// TODO other combinators
+			return true;
+	}
+}
+/**
+ * @param {AST.Node} node
+ * @returns {AST.Element | null}
+ */
+function get_element_parent(node) {
+	// Check if metadata and path exist
+	if (!node.metadata || !node.metadata.path || !node.metadata.path.length) {
+		return null;
+	}
+
+	let path = node.metadata.path;
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'Element') {
+			return parent;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * `true` if is a pseudo class that cannot be or is not scoped
+ * @param {AST.CSS.SimpleSelector} selector
+ * @returns {boolean}
+ */
+function is_unscoped_pseudo_class(selector) {
+	return (
+		selector.type === 'PseudoClassSelector' &&
+		// These make the selector scoped
+		((selector.name !== 'has' &&
+			selector.name !== 'is' &&
+			selector.name !== 'where' &&
+			// :not is special because we want to scope as specific as possible, but because :not
+			// inverses the result, we want to leave the unscoped, too. The exception is more than
+			// one selector in the :not (.e.g :not(.x .y)), then .x and .y should be scoped
+			(selector.name !== 'not' ||
+				selector.args === null ||
+				selector.args.children.every((c) => c.children.length === 1))) ||
+			// selectors with has/is/where/not can also be global if all their children are global
+			selector.args === null ||
+			selector.args.children.every((c) => c.children.every((r) => is_global_simple(r))))
+	);
+}
+
+/**
+ * True if is `:global(...)` or `:global` and no pseudo class that is scoped.
+ * @param {AST.CSS.RelativeSelector} relative_selector
+ */
+function is_global_simple(relative_selector) {
+	const first = relative_selector.selectors[0];
+
+	return (
+		first.type === 'PseudoClassSelector' &&
+		first.name === 'global' &&
+		(first.args === null ||
+			// Only these two selector types keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					is_unscoped_pseudo_class(selector) || selector.type === 'PseudoElementSelector',
+			))
+	);
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector} selector
+ * @param {AST.CSS.Rule} rule
+ * @return {boolean}
+ */
+function is_global(selector, rule) {
+	if (selector.metadata.is_global || selector.metadata.is_global_like) {
+		return true;
+	}
+
+	let explicitly_global = false;
+
+	for (const s of selector.selectors) {
+		/** @type {AST.CSS.SelectorList | null} */
+		let selector_list = null;
+		let can_be_global = false;
+		let owner = rule;
+
+		if (s.type === 'PseudoClassSelector') {
+			if ((s.name === 'is' || s.name === 'where') && s.args) {
+				selector_list = s.args;
+			} else {
+				can_be_global = is_unscoped_pseudo_class(s);
+			}
+		}
+
+		if (s.type === 'NestingSelector') {
+			owner = /** @type {AST.CSS.Rule} */ (rule.metadata.parent_rule);
+			selector_list = owner.prelude;
+		}
+
+		const has_global_selectors = !!selector_list?.children.some((complex_selector) => {
+			return complex_selector.children.every((relative_selector) =>
+				is_global(relative_selector, owner),
+			);
+		});
+		explicitly_global ||= has_global_selectors;
+
+		if (!has_global_selectors && !can_be_global) {
+			return false;
+		}
+	}
+
+	return explicitly_global || selector.selectors.length === 0;
+}
+
+/**
+ * @param {AST.Attribute} attribute
+ * @returns {attribute is AST.Attribute & { value: AST.Literal & { value: string } }}
+ */
+function is_text_attribute(attribute) {
+	return attribute.value?.type === 'Literal' && typeof attribute.value.value === 'string';
+}
+
+/**
+ * @param {string | null} operator
+ * @param {string} expected_value
+ * @param {boolean} case_insensitive
+ * @param {string} value
+ * @returns {boolean}
+ */
+function test_attribute(operator, expected_value, case_insensitive, value) {
+	if (case_insensitive) {
+		expected_value = expected_value.toLowerCase();
+		value = value.toLowerCase();
+	}
+	switch (operator) {
+		case '=':
+			return value === expected_value;
+		case '~=':
+			return value.split(/\s/).includes(expected_value);
+		case '|=':
+			return `${value}-`.startsWith(`${expected_value}-`);
+		case '^=':
+			return value.startsWith(expected_value);
+		case '$=':
+			return value.endsWith(expected_value);
+		case '*=':
+			return value.includes(expected_value);
+		default:
+			throw new Error("this shouldn't happen");
+	}
+}
+
+/**
+ * @param {AST.Element} node
+ * @param {string} name
+ * @param {string | null} expected_value
+ * @param {string | null} operator
+ * @param {boolean} case_insensitive
+ * @returns {boolean}
+ */
+function attribute_matches(node, name, expected_value, operator, case_insensitive) {
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'SpreadAttribute') return true;
+
+		if (attribute.type !== 'Attribute') continue;
+
+		const lowerCaseName = name.toLowerCase();
+		if (![lowerCaseName, `$${lowerCaseName}`].includes(attribute.name.name.toLowerCase())) continue;
+
+		if (expected_value === null) return true;
+
+		if (is_text_attribute(attribute)) {
+			return test_attribute(operator, expected_value, case_insensitive, attribute.value.value);
+		} else {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector} relative_selector
+ * @returns {boolean}
+ */
+function is_outer_global(relative_selector) {
+	const first = relative_selector.selectors[0];
+
+	return (
+		first &&
+		first.type === 'PseudoClassSelector' &&
+		first.name === 'global' &&
+		(first.args === null ||
+			// Only these two selector types can keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector',
+			))
+	);
+}
+
+/**
+ * @param {AST.CSS.RelativeSelector} relative_selector
+ * @param {AST.CSS.Rule} rule
+ * @param {AST.Element} element
+ * @param {Direction} direction
+ * @return {boolean}
+ */
+function relative_selector_might_apply_to_node(relative_selector, rule, element, direction) {
+	// Sort :has(...) selectors in one bucket and everything else into another
+	const has_selectors = [];
+	const other_selectors = [];
+
+	for (const selector of relative_selector.selectors) {
+		if (selector.type === 'PseudoClassSelector' && selector.name === 'has' && selector.args) {
+			has_selectors.push(selector);
+		} else {
+			other_selectors.push(selector);
+		}
+	}
+
+	// If we're called recursively from a :has(...) selector, we're on the way of checking if the other selectors match.
+	// In that case ignore this check (because we just came from this) to avoid an infinite loop.
+	if (has_selectors.length > 0) {
+		// If this is a :has inside a global selector, we gotta include the element itself, too,
+		// because the global selector might be for an element that's outside the component,
+		// e.g. :root:has(.scoped), :global(.foo):has(.scoped), or :root { &:has(.scoped) {} }
+		const rules = get_parent_rules(rule);
+		const include_self =
+			rules.some((r) => r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))) ||
+			rules[rules.length - 1].prelude.children.some((c) =>
+				c.children.some((r) =>
+					r.selectors.some(
+						(s) =>
+							s.type === 'PseudoClassSelector' &&
+							(s.name === 'root' || (s.name === 'global' && s.args)),
+					),
+				),
+			);
+
+		// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
+		// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
+		// selector in a way that is similar to ancestor matching. In a sense, we're treating `.x:has(.y)` as `.x .y`.
+		for (const has_selector of has_selectors) {
+			const complex_selectors = /** @type {AST.CSS.SelectorList} */ (has_selector.args).children;
+			let matched = false;
+
+			for (const complex_selector of complex_selectors) {
+				const [first, ...rest] = truncate(complex_selector);
+				// if it was just a :global(...)
+				if (!first) {
+					complex_selector.metadata.used = true;
+					matched = true;
+					continue;
+				}
+
+				if (include_self) {
+					const selector_including_self = [
+						first.combinator ? { ...first, combinator: null } : first,
+						...rest,
+					];
+					if (apply_selector(selector_including_self, rule, element, FORWARD)) {
+						complex_selector.metadata.used = true;
+						matched = true;
+					}
+				}
+
+				const selector_excluding_self = [
+					create_any_selector(first.start, first.end),
+					first.combinator
+						? first
+						: { ...first, combinator: create_descendant_combinator(first.start, first.end) },
+					...rest,
+				];
+				if (apply_selector(selector_excluding_self, rule, element, FORWARD)) {
+					complex_selector.metadata.used = true;
+					matched = true;
+				}
+			}
+
+			if (!matched) {
+				return false;
+			}
+		}
+	}
+
+	for (const selector of other_selectors) {
+		if (selector.type === 'Percentage' || selector.type === 'Nth') continue;
+
+		const name = selector.name.replace(regex_backslash_and_following_character, '$1');
+
+		switch (selector.type) {
+			case 'PseudoClassSelector': {
+				if (name === 'host' || name === 'root') return false;
+
+				if (
+					name === 'global' &&
+					selector.args !== null &&
+					relative_selector.selectors.length === 1
+				) {
+					const args = selector.args;
+					const complex_selector = args.children[0];
+					return apply_selector(complex_selector.children, rule, element, BACKWARD);
+				}
+
+				// We came across a :global, everything beyond it is global and therefore a potential match
+				if (name === 'global' && selector.args === null) return true;
+
+				// :not(...) contents should stay unscoped. Scoping them would achieve the opposite of what we want,
+				// because they are then _more_ likely to bleed out of the component. The exception is complex selectors
+				// with descendants, in which case we scope them all.
+				if (name === 'not' && selector.args) {
+					for (const complex_selector of selector.args.children) {
+						walk(complex_selector, null, {
+							ComplexSelector(node, context) {
+								node.metadata.used = true;
+								context.next();
+							},
+						});
+						const relative = truncate(complex_selector);
+
+						if (complex_selector.children.length > 1) {
+							// foo:not(bar foo) means that bar is an ancestor of foo (side note: ending with foo is the only way the selector make sense).
+							// We can't fully check if that actually matches with our current algorithm, so we just assume it does.
+							// The result may not match a real element, so the only drawback is the missing prune.
+							for (const selector of relative) {
+								selector.metadata.scoped = true;
+							}
+
+							/** @type {AST.Element | null} */
+							let el = element;
+							while (el) {
+								el.metadata.scoped = true;
+								el = get_element_parent(el);
+							}
+						}
+					}
+
+					break;
+				}
+
+				if ((name === 'is' || name === 'where') && selector.args) {
+					let matched = false;
+
+					for (const complex_selector of selector.args.children) {
+						const relative = truncate(complex_selector);
+						const is_global = relative.length === 0;
+
+						if (is_global) {
+							complex_selector.metadata.used = true;
+							matched = true;
+						} else if (apply_selector(relative, rule, element, BACKWARD)) {
+							complex_selector.metadata.used = true;
+							matched = true;
+						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
+							// foo :is(bar baz) can also mean that bar is an ancestor of foo, and baz a descendant.
+							// We can't fully check if that actually matches with our current algorithm, so we just assume it does.
+							// The result may not match a real element, so the only drawback is the missing prune.
+							complex_selector.metadata.used = true;
+							matched = true;
+							for (const selector of relative) {
+								selector.metadata.scoped = true;
+							}
+						}
+					}
+
+					if (!matched) {
+						return false;
+					}
+				}
+
+				break;
+			}
+
+			case 'PseudoElementSelector': {
+				break;
+			}
+
+			case 'AttributeSelector': {
+				const whitelisted = whitelist_attribute_selector.get(
+					/** @type {AST.Identifier} */ (element.id).name.toLowerCase(),
+				);
+				if (
+					!whitelisted?.includes(selector.name.toLowerCase()) &&
+					!attribute_matches(
+						element,
+						selector.name,
+						selector.value && unquote(selector.value),
+						selector.matcher,
+						selector.flags?.includes('i') ?? false,
+					)
+				) {
+					return false;
+				}
+				break;
+			}
+
+			case 'ClassSelector': {
+				if (
+					!attribute_matches(element, 'class', name, '~=', false) &&
+					(!style_identifier_classes.has(name) ||
+						!is_standalone_class_selector(relative_selector, selector))
+				) {
+					return false;
+				}
+
+				break;
+			}
+
+			case 'IdSelector': {
+				if (!attribute_matches(element, 'id', name, '=', false)) {
+					return false;
+				}
+
+				break;
+			}
+
+			case 'TypeSelector': {
+				if (
+					element.id.type === 'Identifier' &&
+					element.id.name.toLowerCase() !== name.toLowerCase() &&
+					name !== '*'
+				) {
+					return false;
+				}
+
+				break;
+			}
+
+			case 'NestingSelector': {
+				let matched = false;
+
+				const parent = /** @type {AST.CSS.Rule} */ (rule.metadata.parent_rule);
+
+				for (const complex_selector of parent.prelude.children) {
+					if (
+						apply_selector(get_relative_selectors(complex_selector), parent, element, direction) ||
+						complex_selector.children.every((s) => is_global(s, parent))
+					) {
+						complex_selector.metadata.used = true;
+						matched = true;
+					}
+				}
+
+				if (!matched) {
+					return false;
+				}
+
+				break;
+			}
+		}
+	}
+
+	// possible match
+	return true;
+}
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function unquote(str) {
+	if (
+		(str[0] === '"' && str[str.length - 1] === '"') ||
+		(str[0] === "'" && str[str.length - 1] === "'")
+	) {
+		return str.slice(1, -1);
+	}
+	return str;
+}
+
+/**
+ * @param {AST.CSS.Rule} rule
+ * @returns {AST.CSS.Rule[]}
+ */
+function get_parent_rules(rule) {
+	const rules = [rule];
+	let current = rule;
+
+	while (current.metadata.parent_rule) {
+		current = current.metadata.parent_rule;
+		rules.unshift(current);
+	}
+
+	return rules;
+}
+
+/**
+ * Check if a CSS rule contains animation or animation-name properties
+ * @param {AST.CSS.Rule} rule
+ * @returns {boolean}
+ */
+function rule_has_animation(rule) {
+	if (!rule.block) return false;
+
+	for (const child of rule.block.children) {
+		if (child.type === 'Declaration') {
+			const prop = child.property?.toLowerCase();
+			if (prop === 'animation' || prop === 'animation-name') {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.CSS.StyleSheet} css
+ * @param {AST.Element} element
+ * @param {StyleClasses} styleClasses
+ * @param {TopScopedClasses} topScopedClasses
+ * @return {void}
+ */
+export function prune_css(css, element, styleClasses, topScopedClasses) {
+	css_hash = css.hash;
+	style_identifier_classes = styleClasses;
+	top_scoped_classes = topScopedClasses;
+
+	/** @type {Visitors<AST.CSS.Node, null>} */
+	const visitors = {
+		Rule(node, context) {
+			if (node.metadata.is_global_block) {
+				context.visit(node.prelude);
+			} else {
+				context.next();
+			}
+		},
+		ComplexSelector(node, context) {
+			const selectors = get_relative_selectors(node);
+
+			const rule = /** @type {AST.CSS.Rule} */ (node.metadata.rule);
+
+			if (apply_selector(selectors, rule, element, BACKWARD) || rule_has_animation(rule)) {
+				node.metadata.used = true;
+			}
+
+			// Populate top_scoped_classes for truly standalone class selectors ({style} support).
+			// A class is standalone only when the entire effective selector chain (after resolving
+			// nesting and stripping :global) is a single RelativeSelector with a single ClassSelector.
+			// This prevents classes from compound selectors like `.wrapper .nested` or selectors
+			// inside :global() from being treated as valid {style} targets.
+			if (selectors.length === 1) {
+				const sole_selector = selectors[0];
+				if (
+					!sole_selector.metadata.is_global &&
+					!sole_selector.metadata.is_global_like &&
+					sole_selector.selectors.length === 1 &&
+					sole_selector.selectors[0].type === 'ClassSelector'
+				) {
+					const class_selector = sole_selector.selectors[0];
+					const name = class_selector.name.replace(regex_backslash_and_following_character, '$1');
+					if (!top_scoped_classes.has(name)) {
+						top_scoped_classes.set(name, {
+							start: class_selector.start,
+							end: class_selector.end,
+							selector: class_selector,
+						});
+					}
+				}
+			}
+
+			context.next();
+		},
+		PseudoClassSelector(node, context) {
+			// Visit nested selectors inside :has(), :is(), :where(), and :not()
+			if (
+				(node.name === 'has' ||
+					node.name === 'is' ||
+					node.name === 'where' ||
+					node.name === 'not') &&
+				node.args
+			) {
+				context.next();
+			}
+		},
+	};
+
+	walk(css, null, visitors);
+}