proper solution

Author: dummdidumm

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

@@ -9,6 +9,7 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
  * @typedef {{
  *   stylesheet: Compiler.Css.StyleSheet;
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
+ *   from_render_tag: boolean;
  * }} State
  */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
@@ -53,10 +54,17 @@ const nesting_selector = {
 /**
  *
  * @param {Compiler.Css.StyleSheet} stylesheet
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag} element
  */
 export function prune(stylesheet, element) {
-	walk(stylesheet, { stylesheet, element }, visitors);
+	if (element.type === 'RenderTag') {
+		const parent = get_element_parent(element);
+		if (!parent) return;
+
+		walk(stylesheet, { stylesheet, element: parent, from_render_tag: true }, visitors);
+	} else {
+		walk(stylesheet, { stylesheet, element, from_render_tag: false }, visitors);
+	}
 }
 
 /** @type {Visitors<Compiler.Css.Node, State>} */
@@ -101,7 +109,37 @@ const visitors = {
 			}
 		}
 
-		if (
+		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.stylesheet,
+							true
+						)
+					) {
+						mark(inner, element);
+						node.metadata.used = true;
+						return;
+					}
+				}
+
+				element = get_element_parent(element);
+			}
+		} else if (
 			apply_selector(
 				selectors,
 				/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
@@ -144,17 +182,9 @@ function truncate(node) {
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  * @param {Compiler.Css.StyleSheet} stylesheet
  * @param {boolean} check_has Whether or not to check the `:has(...)` selectors
- * @param {boolean} [contains_render_tag]
  * @returns {boolean}
  */
-function apply_selector(
-	relative_selectors,
-	rule,
-	element,
-	stylesheet,
-	check_has,
-	contains_render_tag
-) {
+function apply_selector(relative_selectors, rule, element, stylesheet, check_has) {
 	const parent_selectors = relative_selectors.slice();
 	const relative_selector = parent_selectors.pop();
 
@@ -169,19 +199,7 @@ function apply_selector(
 	);
 
 	if (!possible_match) {
-		contains_render_tag ??= element.fragment.nodes.some((node) => node.type === 'RenderTag');
-		if (contains_render_tag) {
-			// If the element contains a render tag then we assume the selector might match something inside the rendered snippet
-			// and traverse the blocks upwards to see if the present blocks match our node further upwards.
-			// (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)
-			const possible = apply_selector(parent_selectors, rule, element, stylesheet, true);
-			if (possible) return true; // e.g `div span` matched for element `<div>{@render tag()}</div>`
-			// Continue checking if a parent element might match the selector.
-			// Example: Selector is `p span`, which matches `<p><strong>{@render tag()}</strong></p>` and we're currently at `strong`
-		} else {
-			return false;
-		}
+		return false;
 	}
 
 	if (relative_selector.combinator) {
@@ -196,10 +214,6 @@ function apply_selector(
 		);
 	}
 
-	// We got to the end of this under the assumption higher up might start matching,
-	// but turns out it didn't - therefore the selector doesn't apply after all.
-	if (contains_render_tag) return false;
-
 	// if this is the left-most non-global selector, mark it — we want
 	// `x y z {...}` to become `x.blah y z.blah {...}`
 	const parent = parent_selectors[parent_selectors.length - 1];
@@ -705,7 +719,7 @@ function unquote(str) {
 }
 
 /**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} node
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag} node
  * @returns {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null}
  */
 function get_element_parent(node) {

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

@@ -691,6 +691,8 @@ export function analyze_component(root, source, options) {
 		}
 
 		outer: for (const element of analysis.elements) {
+			if (element.type === 'RenderTag') continue;
+
 			if (element.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

@@ -12,6 +12,8 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function RenderTag(node, context) {
 	validate_opening_tag(node, context.state, '@');
 
+	context.state.analysis.elements.push(node);
+
 	const callee = unwrap_optional(node.expression).callee;
 
 	node.metadata.dynamic =

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

@@ -36,7 +36,8 @@ export interface ComponentAnalysis extends Analysis {
 	root: ScopeRoot;
 	instance: Js;
 	template: Template;
-	elements: Array<AST.RegularElement | AST.SvelteElement>;
+	/** Used for CSS pruning and scoping */
+	elements: Array<AST.RegularElement | AST.SvelteElement | AST.RenderTag>;
 	runes: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */

packages/svelte/tests/css/samples/snippets/expected.css

@@ -1,8 +1,8 @@
 
-	div > span.svelte-xyz {
+	div.svelte-xyz > span:where(.svelte-xyz) {
 		color: green;
 	}
-	div span.svelte-xyz {
+	div.svelte-xyz span:where(.svelte-xyz) {
 		color: green;
 	}
 	div.svelte-xyz span {

packages/svelte/tests/css/samples/snippets/expected.html

@@ -1,2 +1,2 @@
 <div class="svelte-xyz"><span class="svelte-xyz">Hello world</span></div>
-<p class="svelte-xyz"><strong class="svelte-xyz"><span class="svelte-xyz">Hello world</span></strong></p>
+<p class="svelte-xyz"><strong><span class="svelte-xyz">Hello world</span></strong></p>