feat: leave view transition pseudo selectors untouched (#11375)

* feat: leave view transition pseudo selectors untouched

view transition pseude selectors are global-like, i.e. they shouldn't be scoped or treated as unused.
In the process of adding support for this, is_root and is_host were consolidated into is_global_like because their usage locations didn't need any differentiation between them (same for the new view transition treatment)

closes #9127

* regenerate types

Author: dummdidumm

.changeset/moody-ghosts-buy.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: leave view transition pseudo selectors untouched

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -182,8 +182,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 			end: -1,
 			metadata: {
 				is_global: false,
-				is_host: false,
-				is_root: false,
+				is_global_like: false,
 				scoped: false
 			}
 		};

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

@@ -42,7 +42,7 @@ const analysis_visitors = {
 		node.metadata.rule = context.state.rule;
 
 		node.metadata.used = node.children.every(
-			({ metadata }) => metadata.is_global || metadata.is_host || metadata.is_root
+			({ metadata }) => metadata.is_global || metadata.is_global_like
 		);
 	},
 	RelativeSelector(node, context) {
@@ -57,10 +57,19 @@ const analysis_visitors = {
 
 		if (node.selectors.length === 1) {
 			const first = node.selectors[0];
-			node.metadata.is_host = first.type === 'PseudoClassSelector' && first.name === 'host';
+			node.metadata.is_global_like ||=
+				(first.type === 'PseudoClassSelector' && first.name === 'host') ||
+				(first.type === 'PseudoElementSelector' &&
+					[
+						'view-transition',
+						'view-transition-group',
+						'view-transition-old',
+						'view-transition-new',
+						'view-transition-image-pair'
+					].includes(first.name));
 		}
 
-		node.metadata.is_root = !!node.selectors.find(
+		node.metadata.is_global_like ||= !!node.selectors.find(
 			(child) => child.type === 'PseudoClassSelector' && child.name === 'root'
 		);
 
@@ -87,7 +96,7 @@ const analysis_visitors = {
 
 		node.metadata.has_local_selectors = node.prelude.children.some((selector) => {
 			return selector.children.some(
-				({ metadata }) => !metadata.is_global && !metadata.is_host && !metadata.is_root
+				({ metadata }) => !metadata.is_global && !metadata.is_global_like
 			);
 		});
 	}

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

@@ -42,8 +42,7 @@ const nesting_selector = {
 	],
 	metadata: {
 		is_global: false,
-		is_host: false,
-		is_root: false,
+		is_global_like: false,
 		scoped: false
 	}
 };
@@ -109,7 +108,7 @@ const visitors = {
  */
 function truncate(node) {
 	const i = node.children.findLastIndex(({ metadata }) => {
-		return !metadata.is_global && !metadata.is_host && !metadata.is_root;
+		return !metadata.is_global && !metadata.is_global_like;
 	});
 
 	return node.children.slice(0, i + 1);
@@ -229,14 +228,14 @@ function mark(relative_selector, element) {
 
 /**
  * Returns `true` if the relative selector is global, meaning
- * it's a `:global(...)` or `:host` or `:root` selector, or
+ * it's a `:global(...)` or unscopeable selector, or
  * is an `:is(...)` or `:where(...)` selector that contains
  * a global selector
  * @param {import('#compiler').Css.RelativeSelector} selector
  * @param {import('#compiler').Css.Rule} rule
  */
 function is_global(selector, rule) {
-	if (selector.metadata.is_global || selector.metadata.is_host || selector.metadata.is_root) {
+	if (selector.metadata.is_global || selector.metadata.is_global_like) {
 		return true;
 	}
 

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

@@ -56,9 +56,10 @@ export namespace Css {
 		combinator: null | Combinator;
 		selectors: SimpleSelector[];
 		metadata: {
+			/** :global(..) */
 			is_global: boolean;
-			is_host: boolean;
-			is_root: boolean;
+			/** :root, :host, ::view-transition */
+			is_global_like: boolean;
 			scoped: boolean;
 		};
 	}

packages/svelte/tests/css/samples/view-transition/expected.css

@@ -0,0 +1,16 @@
+
+	::view-transition {
+		animation-duration: 0.5s;
+	}
+	::view-transition-group(foo) {
+		animation-duration: 0.5s;
+	}
+	::view-transition-old {
+		animation-duration: 0.5s;
+	}
+	::view-transition-new {
+		animation-duration: 0.5s;
+	}
+	::view-transition-image-pair {
+		animation-duration: 0.5s;
+	}

packages/svelte/tests/css/samples/view-transition/input.svelte

@@ -0,0 +1,17 @@
+<style>
+	::view-transition {
+		animation-duration: 0.5s;
+	}
+	::view-transition-group(foo) {
+		animation-duration: 0.5s;
+	}
+	::view-transition-old {
+		animation-duration: 0.5s;
+	}
+	::view-transition-new {
+		animation-duration: 0.5s;
+	}
+	::view-transition-image-pair {
+		animation-duration: 0.5s;
+	}
+</style>

packages/svelte/types/index.d.ts

@@ -1202,9 +1202,10 @@ declare module 'svelte/compiler' {
 			combinator: null | Combinator;
 			selectors: SimpleSelector[];
 			metadata: {
+				/** :global(..) */
 				is_global: boolean;
-				is_host: boolean;
-				is_root: boolean;
+				/** :root, :host, ::view-transition */
+				is_global_like: boolean;
 				scoped: boolean;
 			};
 		}