Svelte 5: Keyframes list with name that appears elsewhere in `animation:` style rule breaks CSS scoping

[dm-de]

Describe the bug

Svelte 5 can not play CSS animation, because wrong css is generated.

generated: svelte-1f68qn8-animation: 1s linear infinite animation;

but should be: animation: 1s linear infinite svelte-1f68qn8-animation;

Reproduction

<span />

<style>
	@keyframes animation {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(2);
		}
	}

	* {
		animation: 1s linear infinite animation;
		display: block;
		width:40px;
		height:40px;
		background:red;
		border-radius:999px;
	}
</style>

CSS output:

	@keyframes svelte-1f68qn8-animation {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(2);
		}
	}

	.svelte-1f68qn8 {
		svelte-1f68qn8-animation: 1s linear infinite animation;
		display: block;
		width:40px;
		height:40px;
		background:red;
		border-radius:999px;
	}

Logs

No response

System Info

Svelte v5.0.0-next.22

Severity

annoyance

[Conduitry]

It looks like this only happens when the keyframes list is called animation, and the CSS scoper gets confused about what string to replace.

[dm-de]

I also renamed it to "anim" - but same effect.

[Conduitry]

Ah, okay, yeah, if it's named anything that appears earlier in your animation: style rule before the keyframe list itself, this will break.

[navorite]

This should be closed as fixed @Rich-Harris