fix: don't require commas between warnings in legacy mode (#11669)

also add commas in migration
closes #11666

.changeset/twelve-beans-drive.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't require warning codes to be separated by commas in non-runes mode

packages/svelte/src/compiler/utils/extract_svelte_ignore.js

@@ -31,16 +31,16 @@ export function extract_svelte_ignore(offset, text, runes) {
 	/** @type {string[]} */
 	const ignores = [];
 
-	// Warnings have to be separated by commas, everything after is interpreted as prose
+	if (runes) {
-	for (const match of text.slice(length).matchAll(/([\w$-]+)(,)?/gm)) {
+		// Warnings have to be separated by commas, everything after is interpreted as prose
-		const code = match[1];
+		for (const match of text.slice(length).matchAll(/([\w$-]+)(,)?/gm)) {
+			const code = match[1];
 
-		ignores.push(code);
+			if (w.codes.includes(code)) {
+				ignores.push(code);
+			} else {
+				const replacement = replacements[code] ?? code.replace(/-/g, '_');
 
-		if (!w.codes.includes(code)) {
-			const replacement = replacements[code] ?? code.replace(/-/g, '_');
-
-			if (runes) {
 				// The type cast is for some reason necessary to pass the type check in CI
 				const start = offset + /** @type {number} */ (match.index);
 				const end = start + code.length;
@@ -51,13 +51,26 @@ export function extract_svelte_ignore(offset, text, runes) {
 					const suggestion = fuzzymatch(code, w.codes);
 					w.unknown_code({ start, end }, code, suggestion);
 				}
-			} else if (w.codes.includes(replacement)) {
+			}
-				ignores.push(replacement);
+
+			if (!match[2]) {
+				break;
 			}
 		}
+	} else {
+		// Non-runes mode: lax parsing, backwards compat with old codes
+		for (const match of text.slice(length).matchAll(/[\w$-]+/gm)) {
+			const code = match[0];
+
+			ignores.push(code);
+
+			if (!w.codes.includes(code)) {
+				const replacement = replacements[code] ?? code.replace(/-/g, '_');
 
-		if (!match[2]) {
+				if (w.codes.includes(replacement)) {
-			break;
+					ignores.push(replacement);
+				}
+			}
 		}
 	}
 
@@ -76,8 +89,12 @@ export function migrate_svelte_ignore(text) {
 	const length = match[0].length;
 	return (
 		text.substring(0, length) +
-		text
+		text.substring(length).replace(/\w+-\w+(-\w+)*/g, (code, _, idx) => {
-			.substring(length)
+			let replacement = replacements[code] ?? code.replace(/-/g, '_');
-			.replace(/\w+-\w+(-\w+)*/g, (code) => replacements[code] ?? code.replace(/-/g, '_'))
+			if (/\w+-\w+/.test(text.substring(length + idx + code.length))) {
+				replacement += ',';
+			}
+			return replacement;
+		})
 	);
 }

packages/svelte/tests/migrate/samples/svelte-ignore/input.svelte

@@ -6,4 +6,7 @@
 </script>
 
 <!-- svelte-ignore a11y-something-something -->
+<div></div>
+
+<!-- svelte-ignore a11y-something-something a11y-something-something2 -->
 <div></div>

packages/svelte/tests/migrate/samples/svelte-ignore/output.svelte

@@ -6,4 +6,7 @@
 </script>
 
 <!-- svelte-ignore a11y_something_something -->
+<div></div>
+
+<!-- svelte-ignore a11y_something_something, a11y_something_something2 -->
 <div></div>

packages/svelte/tests/validator/samples/ignore-warning-dash-backwards-compat/input.svelte

@@ -12,3 +12,9 @@
 
 <!-- svelte-ignore a11y-misplaced-scope -->
 <div scope></div>
+
+<!-- svelte-ignore a11y-missing-attribute a11y-misplaced-scope -->
+<div>
+	<img src="this-is-fine.jpg">
+	<div scope></div>
+</div>