From fdff04f8ee2cb0488b92d3cd80c4f09ff9999316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20NICOLAS?= <ccjmne@gmail.com>
Date: Sun, 16 Feb 2025 23:33:42 +0100
Subject: [PATCH] fix: Allow global-like pseudo-selectors refinement

For instance, specifying a tree-structural pseudo-class to
`::view-transition-new` should still constitute a valid global-like
selector.

Fixes #15312
---
 .changeset/gold-hairs-jog.md                                | 5 +++++
 .../svelte/src/compiler/phases/2-analyze/css/css-analyze.js | 2 +-
 .../svelte/tests/css/samples/view-transition/expected.css   | 6 ++++++
 .../svelte/tests/css/samples/view-transition/input.svelte   | 6 ++++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gold-hairs-jog.md

diff --git a/.changeset/gold-hairs-jog.md b/.changeset/gold-hairs-jog.md
new file mode 100644
index 000000000000..eaafced31447
--- /dev/null
+++ b/.changeset/gold-hairs-jog.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow global-like pseudo-selectors refinement
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index ed228385820a..98eaad76e1f5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -133,7 +133,7 @@ const css_visitors = {
 
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
-		if (node.selectors.length === 1) {
+		if (node.selectors.length >= 1) {
 			const first = node.selectors[0];
 			node.metadata.is_global_like ||=
 				(first.type === 'PseudoClassSelector' && first.name === 'host') ||
diff --git a/packages/svelte/tests/css/samples/view-transition/expected.css b/packages/svelte/tests/css/samples/view-transition/expected.css
index afc84d52ebf5..e216a4d3ad9b 100644
--- a/packages/svelte/tests/css/samples/view-transition/expected.css
+++ b/packages/svelte/tests/css/samples/view-transition/expected.css
@@ -8,9 +8,15 @@
 	::view-transition-old {
 		animation-duration: 0.5s;
 	}
+	::view-transition-old:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-new {
 		animation-duration: 0.5s;
 	}
+	::view-transition-new:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-image-pair {
 		animation-duration: 0.5s;
 	}
diff --git a/packages/svelte/tests/css/samples/view-transition/input.svelte b/packages/svelte/tests/css/samples/view-transition/input.svelte
index ebb2b3fd88e0..345213ccd3f5 100644
--- a/packages/svelte/tests/css/samples/view-transition/input.svelte
+++ b/packages/svelte/tests/css/samples/view-transition/input.svelte
@@ -8,9 +8,15 @@
 	::view-transition-old {
 		animation-duration: 0.5s;
 	}
+	::view-transition-old:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-new {
 		animation-duration: 0.5s;
 	}
+	::view-transition-new:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-image-pair {
 		animation-duration: 0.5s;
 	}