Inline style cannot reference scoped `@keyframes`

[brunnerh]

Describe the bug

If @keyframes are defined in a local <style> and an animation using the key frames is defined via a style attribute, the compiler does not adjust the name in the attribute and the key frames will not be referenced correctly.

A workaround is to use a global @keyframes name using the -global- prefix.

Reproduction

<h1 style="animation: rainbow 2s linear infinite">Hello World!</h1>

<style>
	h1 { color: red; }

	@keyframes rainbow {
		from { filter: hue-rotate(0); }
		to { filter: hue-rotate(360deg); }
	}
</style>

REPL

Logs

No response

System Info

REPL, Svelte v3.53.1

Severity

annoyance

[sacrosanctic]

Any updates on this with the release of Svelte 5? Is this considered a bug or a feature request?