fix: improve animation name transformation (#10432)

* fix: improve animation name transformation

* oops

* s

* minor style tweaks

* expand changeset description

---------

Co-authored-by: Rich Harris <[email protected]>

Author: navorite

.changeset/pink-mayflies-tie.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make CSS animation declaration transformation more robust

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

@@ -8,7 +8,7 @@ import { push_array } from '../utils/push_array.js';
 import { create_attribute } from '../../nodes.js';
 
 const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
-
+const regex_name_boundary = /^[\s,;}]$/;
 /**
  * @param {string} name
  * @returns {string}
@@ -213,20 +213,29 @@ class Declaration {
 	transform(code, keyframes) {
 		const property = this.node.property && remove_css_prefix(this.node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
-			const name = /** @type {string} */ (this.node.value)
-				.split(' ')
-				.find((name) => keyframes.has(name));
-
-			if (name) {
-				const start = code.original.indexOf(
-					name,
-					code.original.indexOf(this.node.property, this.node.start)
-				);
+			let index = this.node.start + this.node.property.length + 1;
+			let name = '';
 
-				const end = start + name.length;
+			while (index < code.original.length) {
+				const character = code.original[index];
 
-				const keyframe = /** @type {string} */ (keyframes.get(name));
-				code.update(start, end, keyframe);
+				if (regex_name_boundary.test(character)) {
+					const keyframe = keyframes.get(name);
+
+					if (keyframe) {
+						code.update(index - name.length, index, keyframe);
+					}
+
+					if (character === ';' || character === '}') {
+						break;
+					}
+
+					name = '';
+				} else {
+					name += character;
+				}
+
+				index++;
 			}
 		}
 	}

packages/svelte/tests/css/samples/animations/expected.css

@@ -0,0 +1,24 @@
+
+	@keyframes svelte-xyz-a {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(2);
+		}
+	}
+
+	@keyframes svelte-xyz-animation {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(2);
+		}
+	}
+
+	h1.svelte-xyz {
+		animation: 1s linear infinite svelte-xyz-a;
+		animation: svelte-xyz-a 1s linear infinite;
+		animation: 1s linear infinite svelte-xyz-a,svelte-xyz-animation 1s linear infinite;
+	}

packages/svelte/tests/css/samples/animations/input.svelte

@@ -0,0 +1,27 @@
+<h1>test</h1>
+
+<style>
+	@keyframes a {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(2);
+		}
+	}
+
+	@keyframes animation {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(2);
+		}
+	}
+
+	h1 {
+		animation: 1s linear infinite a;
+		animation: a 1s linear infinite;
+		animation: 1s linear infinite a,animation 1s linear infinite;
+	}
+</style>