fix: take snippets into account when scoping CSS

fixes #10143

Author: dummdidumm

.changeset/green-cameras-bake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: take snippets into account when scoping CSS

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

@@ -136,9 +136,10 @@ function truncate(node) {
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {boolean} [contains_render_tag]
  * @returns {boolean}
  */
-function apply_selector(relative_selectors, rule, element, stylesheet) {
+function apply_selector(relative_selectors, rule, element, stylesheet, contains_render_tag) {
 	const parent_selectors = relative_selectors.slice();
 	const relative_selector = parent_selectors.pop();
 
@@ -152,7 +153,19 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 	);
 
 	if (!possible_match) {
-		return false;
+		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;
+		}
 	}
 
 	if (relative_selector.combinator) {
@@ -171,6 +184,13 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 						crossed_component_boundary = true;
 					}
 
+					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;
+					}
+
 					if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
 						if (apply_selector(parent_selectors, rule, parent, stylesheet)) {
 							// TODO the `name === ' '` causes false positives, but removing it causes false negatives...
@@ -222,6 +242,10 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 		}
 	}
 
+	// 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];

packages/svelte/tests/css/samples/snippets/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "span div"',
+			start: {
+				line: 31,
+				column: 1,
+				character: 461
+			},
+			end: {
+				line: 31,
+				column: 9,
+				character: 469
+			}
+		}
+	]
+});

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

@@ -0,0 +1,19 @@
+
+	div > span.svelte-xyz {
+		color: green;
+	}
+	div span.svelte-xyz {
+		color: green;
+	}
+	div.svelte-xyz span {
+		color: green;
+	}
+	p.svelte-xyz span:where(.svelte-xyz) {
+		color: green;
+	}
+	p.svelte-xyz .foo:where(.svelte-xyz) {
+		color: purple; /* doesn't match, but our static analysis doesn't handle this currently */
+	}
+	/* (unused) span div {
+		color: red;
+	}*/

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

@@ -0,0 +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>

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

@@ -0,0 +1,34 @@
+{#snippet my_snippet()}
+  <span>Hello world</span>
+{/snippet}
+
+<div>{@render my_snippet()}</div>
+
+<p>
+	{#snippet my_snippet()}
+		<span>Hello world</span>
+	{/snippet}
+
+	<strong>{@render my_snippet()}</strong>
+</p>
+
+<style>
+	div > span {
+		color: green;
+	}
+	div span {
+		color: green;
+	}
+	div :global(span) {
+		color: green;
+	}
+	p span {
+		color: green;
+	}
+	p .foo {
+		color: purple; /* doesn't match, but our static analysis doesn't handle this currently */
+	}
+	span div {
+		color: red;
+	}
+</style>