From fdcb72300908de567251623ed98dfccca7f2810c Mon Sep 17 00:00:00 2001
From: navorite <navorite@gmail.com>
Date: Thu, 8 Feb 2024 17:46:51 +0200
Subject: [PATCH 1/5] fix: improve animation name transformation

---
 .../phases/2-analyze/css/Stylesheet.js        | 29 ++++++++++---------
 .../tests/css/samples/animations/expected.css | 23 +++++++++++++++
 .../tests/css/samples/animations/input.svelte | 26 +++++++++++++++++
 3 files changed, 65 insertions(+), 13 deletions(-)
 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/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
index 9d45692ed5b3..9ffee8e24f46 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
@@ -6,9 +6,10 @@ import hash from '../utils/hash.js';
 // import { extract_ignores_above_position } from '../utils/extract_svelte_ignore.js';
 import { push_array } from '../utils/push_array.js';
 import { create_attribute } from '../../nodes.js';
+import { regex_whitespace } from '../../patterns.js';
 
 const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
-
+const regex_name_sequence = /^[\s,;}]$/;
 /**
  * @param {string} name
  * @returns {string}
@@ -213,20 +214,22 @@ 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 current = code.original[index];
 
-				const keyframe = /** @type {string} */ (keyframes.get(name));
-				code.update(start, end, keyframe);
+				if (regex_name_sequence.test(current)) {
+					if (name && keyframes.has(name))
+						code.update(index - name.length, index, /**@type {string}*/ (keyframes.get(name)));
+
+					if (current === ';' || current === '}') break;
+
+					name = '';
+				} else name += current;
+
+				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 000000000000..82db5cc92309
--- /dev/null
+++ b/packages/svelte/tests/css/samples/animations/expected.css
@@ -0,0 +1,23 @@
+
+  @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 000000000000..7acb4628abc9
--- /dev/null
+++ b/packages/svelte/tests/css/samples/animations/input.svelte
@@ -0,0 +1,26 @@
+<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>

From afb15a4ee96c2f2812a64f90fcf3333ea07cec3d Mon Sep 17 00:00:00 2001
From: navorite <navorite@gmail.com>
Date: Thu, 8 Feb 2024 18:05:10 +0200
Subject: [PATCH 2/5] oops

---
 packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js | 1 -
 1 file changed, 1 deletion(-)

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 9ffee8e24f46..fcd335ecbd5e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
@@ -6,7 +6,6 @@ import hash from '../utils/hash.js';
 // import { extract_ignores_above_position } from '../utils/extract_svelte_ignore.js';
 import { push_array } from '../utils/push_array.js';
 import { create_attribute } from '../../nodes.js';
-import { regex_whitespace } from '../../patterns.js';
 
 const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
 const regex_name_sequence = /^[\s,;}]$/;

From cd3bac9e5cc3ba8bbed484c4df6d66a1f603db6e Mon Sep 17 00:00:00 2001
From: navorite <navorite@gmail.com>
Date: Thu, 8 Feb 2024 18:07:05 +0200
Subject: [PATCH 3/5] s

---
 .changeset/pink-mayflies-tie.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pink-mayflies-tie.md

diff --git a/.changeset/pink-mayflies-tie.md b/.changeset/pink-mayflies-tie.md
new file mode 100644
index 000000000000..6c45a2822a55
--- /dev/null
+++ b/.changeset/pink-mayflies-tie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve animation name transformation

From fac05f3a07a525f61187c6d0b1107b2f15d2617a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 8 Feb 2024 13:23:19 -0500
Subject: [PATCH 4/5] minor style tweaks

---
 .../phases/2-analyze/css/Stylesheet.js        | 21 ++++++---
 .../tests/css/samples/animations/expected.css | 43 ++++++++++---------
 .../tests/css/samples/animations/input.svelte | 43 ++++++++++---------
 3 files changed, 58 insertions(+), 49 deletions(-)

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 fcd335ecbd5e..09440172e426 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_sequence = /^[\s,;}]$/;
+const regex_name_boundary = /^[\s,;}]$/;
 /**
  * @param {string} name
  * @returns {string}
@@ -217,16 +217,23 @@ class Declaration {
 			let name = '';
 
 			while (index < code.original.length) {
-				const current = code.original[index];
+				const character = code.original[index];
 
-				if (regex_name_sequence.test(current)) {
-					if (name && keyframes.has(name))
-						code.update(index - name.length, index, /**@type {string}*/ (keyframes.get(name)));
+				if (regex_name_boundary.test(character)) {
+					const keyframe = keyframes.get(name);
 
-					if (current === ';' || current === '}') break;
+					if (keyframe) {
+						code.update(index - name.length, index, keyframe);
+					}
+
+					if (character === ';' || character === '}') {
+						break;
+					}
 
 					name = '';
-				} else name += current;
+				} else {
+					name += character;
+				}
 
 				index++;
 			}
diff --git a/packages/svelte/tests/css/samples/animations/expected.css b/packages/svelte/tests/css/samples/animations/expected.css
index 82db5cc92309..137a45843c45 100644
--- a/packages/svelte/tests/css/samples/animations/expected.css
+++ b/packages/svelte/tests/css/samples/animations/expected.css
@@ -1,23 +1,24 @@
 
-  @keyframes svelte-xyz-a {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(2);
-    }
-  }
+	@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;
-  }
+	@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
index 7acb4628abc9..2da250f9ab69 100644
--- a/packages/svelte/tests/css/samples/animations/input.svelte
+++ b/packages/svelte/tests/css/samples/animations/input.svelte
@@ -1,26 +1,27 @@
 <h1>test</h1>
 
 <style>
-  @keyframes a {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(2);
-    }
-  }
+	@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;
-  }
+	@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>

From bbc707fd5dc88935732752459260aa7e18085588 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 8 Feb 2024 13:26:29 -0500
Subject: [PATCH 5/5] expand changeset description

---
 .changeset/pink-mayflies-tie.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/pink-mayflies-tie.md b/.changeset/pink-mayflies-tie.md
index 6c45a2822a55..a98dc0e01a8f 100644
--- a/.changeset/pink-mayflies-tie.md
+++ b/.changeset/pink-mayflies-tie.md
@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix: improve animation name transformation
+fix: make CSS animation declaration transformation more robust