fix: fix transition:name can be unicode

.changeset/cold-bobcats-shave.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Applies the correct escaping to identifiers used with `transition:name`. 

packages/astro/src/runtime/server/transition.ts

@@ -7,6 +7,9 @@ import type {
 } from '../../@types/astro.js';
 import { fade, slide } from '../../transitions/index.js';
 import { markHTMLString } from './escape.js';
+import { Logger } from '../../core/logger/core.js';
+import { nodeLogDestination } from '../../core/logger/node.js';
+import { bold } from 'kleur/colors';
 
 const transitionNameMap = new WeakMap<SSRResult, number>();
 function incrementTransitionNumber(result: SSRResult) {
@@ -25,7 +28,27 @@ export function createTransitionScope(result: SSRResult, hash: string) {
 
 // Ensure animationName is a valid CSS identifier
 function toValidIdent(name: string): string {
-	return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '');
+	// can't start with a number, - + number, or --
+	if (/^[0-9]|^-[0-9]|^--/.test(name)) {
+    throw new Error("Your transition:name is not a valid CSS identifier.");
+	}
+	// can't be a CSS keyword
+	if (['unset', 'initial', 'inherit', 'none' ].includes(name)) {
+		throw new Error(`Your transition:name cannot be ${name}.`);
+	}
+	if (/^[a-zA-Z0-9_\\-]*$/.test(name)) {
+		return name;
+	}
+	let result = "";
+	for (const char of name)  {
+		if (/[a-zA-Z0-9_-]/.test(char)) {
+			result += char;
+		} else {
+			const suffix = char === name[name.length - 1] ? "" : "\\ ";
+			result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`;
+		}
+	}
+	return result;
 }
 
 type Entries<T extends Record<string, any>> = Iterable<[keyof T, T[keyof T]]>;