From 49bfb6b1d641897631ca58d478104e6b4fb50874 Mon Sep 17 00:00:00 2001
From: Ahmad <navorite@gmail.com>
Date: Thu, 8 Feb 2024 20:30:41 +0200
Subject: [PATCH] fix: improve animation name transformation (#10432)

* fix: improve animation name transformation

* oops

* s

* minor style tweaks

* expand changeset description

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/pink-mayflies-tie.md               |  5 +++
 .../phases/2-analyze/css/Stylesheet.js        | 35 ++++++++++++-------
 .../tests/css/samples/animations/expected.css | 24 +++++++++++++
 .../tests/css/samples/animations/input.svelte | 27 ++++++++++++++
 4 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/pink-mayflies-tie.md
 create mode 100644 packages/svelte/tests/css/samples/animations/expected.css
 create mode 100644 packages/svelte/tests/css/samples/animations/input.svelte

diff --git a/.changeset/pink-mayflies-tie.md b/.changeset/pink-mayflies-tie.md
new file mode 100644
index 0000000000..a98dc0e01a
--- /dev/null
+++ b/.changeset/pink-mayflies-tie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make CSS animation declaration transformation more robust
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
index 9d45692ed5..09440172e4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
+++ b/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++;
 			}
 		}
 	}
diff --git a/packages/svelte/tests/css/samples/animations/expected.css b/packages/svelte/tests/css/samples/animations/expected.css
new file mode 100644
index 0000000000..137a45843c
--- /dev/null
+++ b/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;
+	}
diff --git a/packages/svelte/tests/css/samples/animations/input.svelte b/packages/svelte/tests/css/samples/animations/input.svelte
new file mode 100644
index 0000000000..2da250f9ab
--- /dev/null
+++ b/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>