fix: false positive for kebab-case with svelte v5 in svelte/no-unused-svelte-ignore (#772)

fixes #765

Author: ota-meshi

.changeset/ninety-poets-divide.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": patch
+---
+
+fix: false positive for kebab-case with svelte v5 in `svelte/no-unused-svelte-ignore`

packages/eslint-plugin-svelte/src/shared/svelte-compile-warns/ignore-comment.ts

@@ -4,6 +4,22 @@ import { getSourceCode } from '../../utils/compat';
 
 const SVELTE_IGNORE_PATTERN = /^\s*svelte-ignore/m;
 
+/**
+ * Map of legacy code -> new code
+ * See https://github.com/sveltejs/svelte/blob/c9202a889612df3c2fcb369096a5573668be99d6/packages/svelte/src/compiler/utils/extract_svelte_ignore.js#L6
+ */
+const V5_REPLACEMENTS: Record<string, string | undefined> = {
+	'non-top-level-reactive-declaration': 'reactive_declaration_invalid_placement',
+	'module-script-reactive-declaration': 'reactive_declaration_module_script',
+	'empty-block': 'block_empty',
+	'avoid-is': 'attribute_avoid_is',
+	'invalid-html-attribute': 'attribute_invalid_property_name',
+	'a11y-structure': 'a11y_figcaption_parent',
+	'illegal-attribute-character': 'attribute_illegal_colon',
+	'invalid-rest-eachblock-binding': 'bind_invalid_each_rest',
+	'unused-export-let': 'export_let_unused'
+};
+
 export type IgnoreItemWithoutCode = {
 	range: [number, number];
 	code: null;
@@ -12,6 +28,7 @@ export type IgnoreItemWithoutCode = {
 export type IgnoreItem = {
 	range: [number, number];
 	code: string;
+	codeForV5: string; // Code targeting Svelte v5.
 	token: AST.Token | AST.Comment;
 };
 
@@ -75,6 +92,7 @@ function extractSvelteIgnore(
 		if (trimmed) {
 			results.push({
 				code: trimmed,
+				codeForV5: V5_REPLACEMENTS[trimmed] || trimmed.replace(/-/gu, '_'),
 				range: [start, end],
 				token
 			});

packages/eslint-plugin-svelte/src/shared/svelte-compile-warns/index.ts

@@ -45,6 +45,7 @@ const STYLE_TRANSFORMS: Record<string, typeof transformWithPostCSS | undefined>
 
 const CSS_WARN_CODES = new Set([
 	'css-unused-selector',
+	'css_unused_selector',
 	'css-invalid-global',
 	'css-invalid-global-selector'
 ]);
@@ -481,7 +482,9 @@ function processIgnore(
 		while (node) {
 			for (const comment of extractLeadingComments(context, node).reverse()) {
 				const ignoreItem = ignoreComments.find(
-					(item) => item.token === comment && item.code === warning.code
+					(item) =>
+						item.token === comment &&
+						(item.code === warning.code || item.codeForV5 === warning.code)
 				);
 				if (ignoreItem) {
 					unusedIgnores.delete(ignoreItem);
@@ -497,7 +500,9 @@ function processIgnore(
 	for (const node of stripStyleElements) {
 		for (const comment of extractLeadingComments(context, node).reverse()) {
 			const ignoreItem = ignoreComments.find(
-				(item) => item.token === comment && CSS_WARN_CODES.has(item.code)
+				(item) =>
+					item.token === comment &&
+					(CSS_WARN_CODES.has(item.code) || CSS_WARN_CODES.has(item.codeForV5))
 			);
 			if (ignoreItem) {
 				unusedIgnores.delete(ignoreItem);

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-svelte4-requirements.json

@@ -0,0 +1,4 @@
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<span tabindex="0">
+	<span class="element"></span>
+</span>