fix: Allow global-like pseudo-selectors refinement (#15313)

ccjmne · dummdidumm · web-flow · commit f227cfcea86b · 2025-03-14T22:30:49.000+01:00
For instance, specifying a tree-structural pseudo-class to `::view-transition-new` should still constitute a valid global-like selector. Fixes #15312 --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
diff --git a/.changeset/gold-hairs-jog.md 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
@@ -133,7 +133,13 @@ const css_visitors = {
 
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
-		if (node.selectors.length === 1) {
+		if (
+			node.selectors.length >= 1 &&
+			node.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			)
+		) {
 			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
@@ -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
@@ -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;
 	}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: allow global-like pseudo-selectors refinement
Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,15 @@`
`8`	`8`	`::view-transition-old {`
`9`	`9`	`animation-duration: 0.5s;`
`10`	`10`	`}`
	`11`	`+ ::view-transition-old:only-child {`
	`12`	`+ animation-duration: 0.5s;`
	`13`	`+ }`
`11`	`14`	`::view-transition-new {`
`12`	`15`	`animation-duration: 0.5s;`
`13`	`16`	`}`
	`17`	`+ ::view-transition-new:only-child {`
	`18`	`+ animation-duration: 0.5s;`
	`19`	`+ }`
`14`	`20`	`::view-transition-image-pair {`
`15`	`21`	`animation-duration: 0.5s;`
`16`	`22`	`}`