ViewTransitionStyleSheet Class — astro Architecture

Source Code

packages/astro/src/runtime/server/transition.ts lines 132–199

class ViewTransitionStyleSheet {
	private modern: string[] = [];
	private fallback: string[] = [];

	constructor(
		private scope: string,
		private name: string,
	) {}

	toString() {
		const { scope, name } = this;
		const [modern, fallback] = [this.modern, this.fallback].map((rules) => rules.join(''));
		return [
			`[data-astro-transition-scope="${scope}"] { view-transition-name: ${name}; }`,
			this.layer(modern),
			fallback,
		].join('');
	}

	private layer(cssText: string) {
		return cssText ? `@layer astro { ${cssText} }` : '';
	}

	private addRule(target: 'modern' | 'fallback', cssText: string) {
		this[target].push(cssText);
	}

	addAnimationRaw(image: 'old' | 'new' | 'group', animation: string) {
		this.addModern(image, animation);
		this.addFallback(image, animation);
	}

	addModern(image: 'old' | 'new' | 'group', animation: string) {
		const { name } = this;
		this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`);
	}

	addFallback(image: 'old' | 'new' | 'group', animation: string) {
		const { scope } = this;
		this.addRule(
			'fallback',
			// Two selectors here, the second in case there is an animation on the root.
			`[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
			[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`,
		);
	}

	addAnimationPair(
		direction: 'forwards' | 'backwards' | string,
		image: 'old' | 'new',
		rules: TransitionAnimation | TransitionAnimation[],
	) {
		const { scope, name } = this;
		const animation = stringifyAnimation(rules);
		const prefix =
			direction === 'backwards'
				? `[data-astro-transition=back]`
				: direction === 'forwards'
					? ''
					: `[data-astro-transition=${direction}]`;
		this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
		this.addRule(
			'fallback',
			`${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
			${prefix}[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`,
		);
	}
}