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

also add commas in migration closes #11666

Author: dummdidumm

.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
-for (const match of text.slice(length).matchAll(/([\w$-]+)(,)?/gm)) {
-const code = match[1];
+if (runes) {
+// Warnings have to be separated by commas, everything after is interpreted as prose
+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]) {
-break;
+if (w.codes.includes(replacement)) {
+ignores.push(replacement);
+}
+}
 }
 }
 
@@ -76,8 +89,12 @@ export function migrate_svelte_ignore(text) {
 const length = match[0].length;
 return (
 text.substring(0, length) +
-text
-.substring(length)
-.replace(/\w+-\w+(-\w+)*/g, (code) => replacements[code] ?? code.replace(/-/g, '_'))
+text.substring(length).replace(/\w+-\w+(-\w+)*/g, (code, _, idx) => {
+let replacement = 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>