fix: better account for render tags when pruning CSS

.changeset/twelve-squids-wink.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better account for render tags when pruning CSS

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -314,7 +314,10 @@ function open(parser) {
 				name
 			},
 			parameters: function_expression.params,
-			body: create_fragment()
+			body: create_fragment(),
+			metadata: {
+				sites: new Set()
+			}
 		});
 		parser.stack.push(block);
 		parser.fragments.push(block.body);
@@ -605,7 +608,8 @@ function special(parser) {
 			metadata: {
 				dynamic: false,
 				args_with_call_expression: new Set(),
-				path: []
+				path: [],
+				snippets: new Set()
 			}
 		});
 	}

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -8,7 +8,6 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 /**
  * @typedef {{
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
- *   from_render_tag: boolean;
  * }} State
  */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
@@ -53,78 +52,40 @@ const nesting_selector = {
 /**
  *
  * @param {Compiler.Css.StyleSheet} stylesheet
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag} element
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  */
 export function prune(stylesheet, element) {
-	if (element.type === 'RenderTag') {
-		const parent = get_element_parent(element);
-		if (!parent) return;
-
-		walk(stylesheet, { element: parent, from_render_tag: true }, visitors);
-	} else {
-		walk(stylesheet, { element, from_render_tag: false }, visitors);
-	}
-}
-
-/** @type {Visitors<Compiler.Css.Node, State>} */
-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 inner = selectors[selectors.length - 1];
-
-		if (context.state.from_render_tag) {
-			// We're searching for a match that crosses a render tag boundary. That means we have to both traverse up
-			// the element tree (to see if we find an entry point) but also remove selectors from the end (assuming
-			// they are part of the render tag we don't see). We do all possible combinations of both until we find a match.
-			/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
-			let element = context.state.element;
-
-			while (element) {
-				const selectors_to_check = selectors.slice();
-
-				while (selectors_to_check.length > 0) {
-					selectors_to_check.pop();
-
-					if (
-						apply_selector(
-							selectors_to_check,
-							/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
-							element,
-							context.state
-						)
-					) {
-						mark(inner, element);
-						node.metadata.used = true;
-						return;
-					}
-				}
-
-				element = get_element_parent(element);
+	const state = { element };
+
+	walk(/** @type {Compiler.Css.Node} */ (stylesheet), state, {
+		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);
+
+			if (
+				apply_selector(
+					selectors,
+					/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
+					context.state.element,
+					context.state
+				)
+			) {
+				mark(selectors[selectors.length - 1], context.state.element);
+				node.metadata.used = true;
 			}
-		} else if (
-			apply_selector(
-				selectors,
-				/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
-				context.state.element,
-				context.state
-			)
-		) {
-			mark(inner, context.state.element);
-			node.metadata.used = true;
-		}
 
-		// note: we don't call context.next() here, we only recurse into
-		// selectors that don't belong to rules (i.e. inside `:is(...)` etc)
-		// when we encounter them below
-	}
-};
+			// note: we don't call context.next() here, we only recurse into
+			// selectors that don't belong to rules (i.e. inside `:is(...)` etc)
+			// when we encounter them below
+		}
+	});
+}
 
 /**
  * Retrieves the relative selectors (minus the trailing globals) from a complex selector.
@@ -147,6 +108,7 @@ function get_relative_selectors(node) {
 					has_explicit_nesting_selector = true;
 				}
 			});
+
 			// if we found one we can break from the others
 			if (has_explicit_nesting_selector) break;
 		}
@@ -269,10 +231,15 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 				}
 
 				if (parent.type === 'SnippetBlock') {
-					// We assume the snippet might be rendered in a place where the parent selectors match.
-					// (We could do more static analysis and check the render tag reference to see if this snippet block continues
-					// with elements that actually match the selector, but that would be a lot of work for little gain)
-					return true;
+					for (const site of parent.metadata.sites) {
+						if (
+							apply_combinator(combinator, relative_selector, parent_selectors, rule, site, state)
+						) {
+							return true;
+						}
+					}
+
+					return false;
 				}
 
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
@@ -877,7 +844,7 @@ function get_element_parent(node) {
 }
 
 /**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} node
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
  */
@@ -929,7 +896,28 @@ function get_possible_element_siblings(node, adjacent_only) {
 
 		current = path[i];
 
-		if (!current || !is_block(current)) break;
+		if (!current) break;
+
+		if (
+			current.type === 'Component' ||
+			current.type === 'SvelteComponent' ||
+			current.type === 'SvelteSelf'
+		) {
+			continue;
+		}
+
+		if (current.type === 'SnippetBlock') {
+			for (const site of current.metadata.sites) {
+				const siblings = get_possible_element_siblings(site, adjacent_only);
+				add_to_map(siblings, result);
+
+				if (adjacent_only && current.metadata.sites.size === 1 && has_definite_elements(siblings)) {
+					return result;
+				}
+			}
+		}
+
+		if (!is_block(current)) break;
 
 		if (current.type === 'EachBlock' && fragment === current.body) {
 			// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -438,7 +438,9 @@ export function analyze_component(root, source, options) {
 				: '',
 			keyframes: []
 		},
-		source
+		source,
+		snippet_renderers: new Map(),
+		snippets: new Set()
 	};
 
 	if (!runes) {
@@ -698,6 +700,16 @@ export function analyze_component(root, source, options) {
 		);
 	}
 
+	for (const [node, resolved] of analysis.snippet_renderers) {
+		if (!resolved) {
+			node.metadata.snippets = analysis.snippets;
+		}
+
+		for (const snippet of node.metadata.snippets) {
+			snippet.metadata.sites.add(node);
+		}
+	}
+
 	if (
 		analysis.uses_render_tags &&
 		(analysis.uses_slots || (!analysis.custom_element && analysis.slot_names.size > 0))
@@ -726,8 +738,6 @@ export function analyze_component(root, source, options) {
 		}
 
 		outer: for (const node of analysis.elements) {
-			if (node.type === 'RenderTag') continue;
-
 			if (node.metadata.scoped) {
 				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
 				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server

packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js

@@ -13,13 +13,31 @@ export function RenderTag(node, context) {
 	validate_opening_tag(node, context.state, '@');
 
 	node.metadata.path = [...context.path];
-	context.state.analysis.elements.push(node);
 
 	const callee = unwrap_optional(node.expression).callee;
 
-	node.metadata.dynamic =
-		callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
+	const binding = callee.type === 'Identifier' ? context.state.scope.get(callee.name) : undefined;
+
+	node.metadata.dynamic = binding?.kind !== 'normal';
+
+	/** If we can't unambiguously resolve this to a declaration, we
+	 * must assume the worst and link the render tag to every snippet
+	 */
+	let resolved =
+		callee.type === 'Identifier' &&
+		(!binding ||
+			binding.declaration_kind === 'import' ||
+			binding.kind === 'prop' ||
+			binding.kind === 'rest_prop' ||
+			binding.kind === 'bindable_prop' ||
+			binding?.initial?.type === 'SnippetBlock');
+
+	if (binding?.initial?.type === 'SnippetBlock') {
+		// if this render tag unambiguously references a local snippet, our job is easy
+		node.metadata.snippets.add(binding.initial);
+	}
 
+	context.state.analysis.snippet_renderers.set(node, resolved);
 	context.state.analysis.uses_render_tags = true;
 
 	const raw_args = unwrap_optional(node.expression).arguments;

packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js

@@ -8,6 +8,8 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function SnippetBlock(node, context) {
+	context.state.analysis.snippets.add(node);
+
 	validate_block_not_empty(node.body, context);
 
 	if (context.state.analysis.runes) {

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js

@@ -1,4 +1,5 @@
 /** @import { AST } from '#compiler' */
+/** @import { Expression } from 'estree' */
 /** @import { AnalysisState, Context } from '../../types' */
 import * as e from '../../../../errors.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
@@ -15,6 +16,70 @@ import { mark_subtree_dynamic } from './fragment.js';
  * @param {Context} context
  */
 export function visit_component(node, context) {
+	node.metadata.path = [...context.path];
+
+	// link this node to all the snippets that it could render, so that we can prune CSS correctly
+	node.metadata.snippets = new Set();
+
+	let resolved = true;
+
+	for (const attribute of node.attributes) {
+		/** @type {Expression | undefined} */
+		let expression;
+
+		if (attribute.type === 'SpreadAttribute' || attribute.type === 'BindDirective') {
+			resolved = false;
+			continue;
+		}
+
+		if (attribute.type !== 'Attribute' || attribute.value === true) {
+			continue;
+		}
+
+		if (Array.isArray(attribute.value)) {
+			if (attribute.value.length === 1 && attribute.value[0].type === 'ExpressionTag') {
+				expression = attribute.value[0].expression;
+			}
+		} else {
+			expression = attribute.value.expression;
+		}
+
+		if (!expression) continue;
+
+		if (expression.type === 'Identifier') {
+			const binding = context.state.scope.get(expression.name);
+
+			if (
+				binding &&
+				binding.declaration_kind !== 'import' &&
+				binding.kind !== 'prop' &&
+				binding.kind !== 'rest_prop' &&
+				binding.kind !== 'bindable_prop' &&
+				binding.initial?.type !== 'SnippetBlock'
+			) {
+				resolved = false;
+			}
+
+			if (binding?.initial?.type === 'SnippetBlock') {
+				node.metadata.snippets.add(binding.initial);
+			}
+		} else {
+			// we can't safely know which snippets this component could render,
+			// so we deopt. this _could_ result in unused CSS not being discarded
+			resolved = false;
+		}
+	}
+
+	if (resolved) {
+		for (const child of node.fragment.nodes) {
+			if (child.type === 'SnippetBlock') {
+				node.metadata.snippets.add(child);
+			}
+		}
+	}
+
+	context.state.analysis.snippet_renderers.set(node, resolved);
+
 	mark_subtree_dynamic(context.path);
 
 	for (const attribute of node.attributes) {

packages/svelte/src/compiler/phases/types.d.ts

@@ -37,7 +37,7 @@ export interface ComponentAnalysis extends Analysis {
 	instance: Js;
 	template: Template;
 	/** Used for CSS pruning and scoping */
-	elements: Array<AST.RegularElement | AST.SvelteElement | AST.RenderTag>;
+	elements: Array<AST.RegularElement | AST.SvelteElement>;
 	runes: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */
@@ -72,6 +72,17 @@ export interface ComponentAnalysis extends Analysis {
 		keyframes: string[];
 	};
 	source: string;
+	/**
+	 * Every render tag/component, and whether it could be definitively resolved or not
+	 */
+	snippet_renderers: Map<
+		AST.RenderTag | AST.Component | AST.SvelteComponent | AST.SvelteSelf,
+		boolean
+	>;
+	/**
+	 * Every snippet that is declared locally
+	 */
+	snippets: Set<AST.SnippetBlock>;
 }
 
 declare module 'estree' {