fix: mark nesting selectors of global parents as used (#13445)

fixes #13387

Author: dummdidumm

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

@@ -114,6 +114,19 @@ const css_visitors = {
 		node.metadata.used ||= node.children.every(
 			({ metadata }) => metadata.is_global || metadata.is_global_like
 		);
+
+		if (
+			node.metadata.rule?.metadata.parent_rule &&
+			node.children[0]?.selectors[0]?.type === 'NestingSelector'
+		) {
+			const parent_is_global = node.metadata.rule.metadata.parent_rule.prelude.children.some(
+				(child) => child.children.length === 1 && child.children[0].metadata.is_global
+			);
+			// mark `&:hover` in `:global(.foo) { &:hover { color: green }}` as used
+			if (parent_is_global) {
+				node.metadata.used = true;
+			}
+		}
 	},
 	RelativeSelector(node, context) {
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);

packages/svelte/tests/css/samples/global-nested-block/_config.js

@@ -2,32 +2,46 @@ import { test } from '../../test';
 
 export default test({
 	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused"',
+			start: {
+				line: 19,
+				column: 3,
+				character: 204
+			},
+			end: {
+				line: 19,
+				column: 10,
+				character: 211
+			}
+		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 25,
+				line: 34,
 				column: 2,
-				character: 229
+				character: 332
 			},
 			end: {
-				line: 25,
+				line: 34,
 				column: 17,
-				character: 244
+				character: 347
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global(.z)"',
 			start: {
-				line: 31,
+				line: 40,
 				column: 2,
-				character: 283
+				character: 386
 			},
 			end: {
-				line: 31,
+				line: 40,
 				column: 21,
-				character: 302
+				character: 405
 			}
 		}
 	]

packages/svelte/tests/css/samples/global-nested-block/expected.css

@@ -8,6 +8,15 @@
 
 		.x {
 			color: green;
+			&:hover {
+				color: green;
+			}
+			&div {
+				color: green;
+			}
+			/* (unused) .unused {
+				color: red;
+			}*/
 		}
 
 		p:where(.svelte-xyz) {

packages/svelte/tests/css/samples/global-nested-block/input.svelte

@@ -10,6 +10,15 @@
 
 		:global(.x) {
 			color: green;
+			&:hover {
+				color: green;
+			}
+			&div {
+				color: green;
+			}
+			.unused {
+				color: red;
+			}
 		}
 
 		p :global {