@html-eslint/eslint-plugin 0.51.0 → 0.52.0

package/lib/rules/no-empty-headings.js

@@ -1,6 +1,9 @@
 /**
- * @import {Tag, Text} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   Tag,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -15,9 +18,7 @@ const MESSAGE_IDS = {
 
 const HEADING_NAMES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
 
-/**
- * @param {Tag} node
- */
+/** @param {Tag} node */
 function isAriaHidden(node) {
   const ariaHiddenAttr = findAttr(node, "aria-hidden");
   return (
@@ -85,9 +86,7 @@ function getAccessibleText(node) {
   return text;
 }
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-extra-spacing-attrs.js

@@ -1,6 +1,15 @@
 /**
- * @import {Attribute, OpenScriptTagStart, OpenTagStart, OpenStyleTagStart, Tag, StyleTag, ScriptTag, AnyNode} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   AnyNode,
+ *   Attribute,
+ *   OpenScriptTagStart,
+ *   OpenStyleTagStart,
+ *   OpenTagStart,
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  * @typedef {Object} Option
  * @property {boolean} [Option.disallowInAssignment]
  * @property {boolean} [Option.disallowMissing]
@@ -28,9 +37,7 @@ const MESSAGE_IDS = {
   EXTRA_TAB_BETWEEN: "unexpectedTabBetween",
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -93,9 +100,7 @@ module.exports = {
 
     const sourceCode = getSourceCode(context).text;
 
-    /**
-     * @param {Attribute[]} attrs
-     */
+    /** @param {Attribute[]} attrs */
     function checkExtraSpacesBetweenAttrs(attrs) {
       attrs.forEach((current, index, attrs) => {
         if (index >= attrs.length - 1) {

package/lib/rules/no-extra-spacing-text.js

@@ -1,6 +1,11 @@
 /**
- * @import {CommentContent, Tag, Comment, Text} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   Comment,
+ *   CommentContent,
+ *   Tag,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  * @typedef {Object} Option
  * @property {string[]} [Option.skip]
  */
@@ -15,9 +20,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -52,14 +55,10 @@ module.exports = {
 
   create(context) {
     const options = context.options[0] || {};
-    /**
-     * @type {string[]}
-     */
+    /** @type {string[]} */
     const skipTags = options.skip || [];
     const sourceCode = getSourceCode(context);
-    /**
-     * @type {Tag[]}
-     */
+    /** @type {Tag[]} */
     const tagStack = [];
 
     /**
@@ -80,9 +79,7 @@ module.exports = {
       return false;
     }
 
-    /**
-     * @param {CommentContent | Text} node
-     */
+    /** @param {CommentContent | Text} node */
     function stripConsecutiveSpaces(node) {
       const text = node.value;
       const matcher = /(^|[^\n \t])([ \t]+\n|\t[\t ]*|[ \t]{2,})/g;

package/lib/rules/no-heading-inside-button.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY } = require("../constants");
 const { findParent, isTag } = require("./utils/node");
@@ -13,9 +11,7 @@ const MESSAGE_IDS = {
 
 const HEADING_NAMES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-ineffective-attrs.js

@@ -1,7 +1,14 @@
 /**
- * @import {RuleModule} from "../types";
- * @import {Tag, ScriptTag} from "@html-eslint/types"
- * @typedef {{ attr: string; when: (node: Tag | ScriptTag) => boolean; message: string; }} AttributeChecker
+ * @import {
+ *   ScriptTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ * @typedef {{
+ *   attr: string;
+ *   when: (node: Tag | ScriptTag) => boolean;
+ *   message: string;
+ * }} AttributeChecker
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -32,9 +39,7 @@ function isTemplateValueAttr(node, attrName) {
   return hasTemplate(attr.value);
 }
 
-/**
- * @type {Record<string, AttributeChecker[]>}
- */
+/** @type {Record<string, AttributeChecker[]>} */
 const checkersByTag = {
   input: [
     {
@@ -110,9 +115,7 @@ const checkersByTag = {
   ],
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   name: "no-ineffective-attrs",
   meta: {
@@ -131,9 +134,7 @@ module.exports = {
   defaultOptions: [],
   create(context) {
     return createVisitors(context, {
-      /**
-       * @param {Tag} node
-       */
+      /** @param {Tag} node */
       Tag(node) {
         const tagCheckers = checkersByTag[node.name];
         if (!tagCheckers) return;
@@ -155,9 +156,7 @@ module.exports = {
           }
         }
       },
-      /**
-       * @param {ScriptTag} node
-       */
+      /** @param {ScriptTag} node */
       ScriptTag(node) {
         const scriptCheckers = checkersByTag.script;
         if (!scriptCheckers) return;

package/lib/rules/no-inline-styles.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
@@ -11,9 +9,7 @@ const MESSAGE_IDS = {
   INLINE_STYLE: "unexpectedInlineStyle",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-invalid-entity.js

@@ -1,6 +1,6 @@
 /**
- * @import {RuleModule} from "../types";
- * @import {Text} from "@html-eslint/types";
+ * @import {Text} from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 // Define the type for entities.json
@@ -21,9 +21,7 @@ const MESSAGE_IDS = {
   INVALID_ENTITY: "invalidEntity",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -42,9 +40,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @param {Text} node
-     */
+    /** @param {Text} node */
     function check(node) {
       const text = node.value;
 

package/lib/rules/no-invalid-role.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
@@ -226,9 +224,7 @@ const ELEMENTS_DISALLOWING_PRESENTATION_OR_NONE_ROLE = new Set([
   "wbr",
 ]);
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -256,10 +252,7 @@ module.exports = {
         if (!role) {
           return;
         }
-        /**
-         * Allow template expression.
-         * ex: html`<div role=${role}></div>`
-         */
+        /** Allow template expression. ex: html`<div role=${role}></div>` */
         if (
           role.value &&
           role.value.parts.some((part) => part.type === NODE_TYPES.Template)

package/lib/rules/no-multiple-empty-lines.js

@@ -1,7 +1,9 @@
 /**
- * @import {CommentContent, Text} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- *
+ * @import {
+ *   CommentContent,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  * @typedef {Object} Option
  * @property {number} Option.max
  */
@@ -24,9 +26,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -64,7 +64,7 @@ module.exports = {
     /**
      * @param {string[]} lines
      * @param {number} lineOffset
-     * @param {((CommentContent | Text)['parts'][number])[]} tokens
+     * @param {(CommentContent | Text)["parts"][number][]} tokens
      */
     function check(lines, lineOffset, tokens) {
       /** @type {number[]} */

package/lib/rules/no-multiple-h1.js

@@ -1,6 +1,6 @@
 /**
- * @import {Tag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {Tag} from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -10,9 +10,7 @@ const MESSAGE_IDS = {
   MULTIPLE_H1: "unexpectedMultiH1",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -32,9 +30,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Tag[]}
-     */
+    /** @type {Tag[]} */
     const h1s = [];
 
     return {

package/lib/rules/no-nested-interactive.js

@@ -1,6 +1,6 @@
 /**
- * @import {Tag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {Tag} from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -13,9 +13,9 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2
  * @param {Tag} tag
  * @returns {boolean}
+ * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2
  */
 function isInteractive(tag) {
   const tagName = tag.name.toLowerCase();
@@ -55,9 +55,7 @@ function isInteractive(tag) {
   }
 }
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -78,9 +76,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Tag[]}
-     */
+    /** @type {Tag[]} */
     let interactiveStack = [];
 
     return createVisitors(context, {

package/lib/rules/no-non-scalable-viewport.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
@@ -10,9 +8,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-obsolete-attrs.js

@@ -0,0 +1,83 @@
+/**
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { OBSOLETE_ATTRS } = require("../specs");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+const { getNameOf } = require("./utils/node");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/** @type {RuleModule<[]>} */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow use of obsolete attributes in HTML5",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: true,
+      url: getRuleUrl("no-obsolete-attrs"),
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]:
+        "The {{attr}} attribute on <{{element}}> is obsolete. {{suggestion}}",
+    },
+  },
+
+  create(context) {
+    /** @param {Tag | ScriptTag | StyleTag} node */
+    function checkObsoleteAttrs(node) {
+      const tagName = getNameOf(node);
+      // Check each attribute on the element
+      if (node.attributes) {
+        for (const attr of node.attributes) {
+          const attrName = attr.key.value.toLowerCase();
+
+          // Check if this attribute is in the obsolete list
+          if (OBSOLETE_ATTRS[attrName]) {
+            const obsoleteConfigs = OBSOLETE_ATTRS[attrName];
+
+            // Check if this attribute is obsolete for this specific element
+            for (const config of obsoleteConfigs) {
+              // Handle wildcard (*) for all elements
+              if (
+                config.elements.includes("*") ||
+                config.elements.includes(tagName)
+              ) {
+                context.report({
+                  node: attr,
+                  messageId: MESSAGE_IDS.UNEXPECTED,
+                  data: {
+                    attr: attrName,
+                    element: tagName,
+                    suggestion: config.suggestion,
+                  },
+                });
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return createVisitors(context, {
+      Tag: checkObsoleteAttrs,
+      ScriptTag: checkObsoleteAttrs,
+      StyleTag: checkObsoleteAttrs,
+    });
+  },
+};

package/lib/rules/no-obsolete-tags.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY, OBSOLETE_TAGS } = require("../constants");
 const { createVisitors } = require("./utils/visitors");
@@ -12,9 +10,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-positive-tabindex.js

@@ -1,6 +1,10 @@
 /**
- * @import {Tag, StyleTag,ScriptTag } from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -12,9 +16,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -34,9 +36,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @param {Tag | StyleTag | ScriptTag} node
-     */
+    /** @param {Tag | StyleTag | ScriptTag} node */
     function check(node) {
       const tabIndexAttr = findAttr(node, "tabindex");
       if (

package/lib/rules/no-restricted-attr-values.js

@@ -1,7 +1,16 @@
 /**
- * @import {StyleTag, Attribute, Tag, ScriptTag } from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- * @typedef {{attrPatterns: string[], attrValuePatterns: string[], message?: string}[]} Options
+ * @import {
+ *   Attribute,
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ * @typedef {{
+ *   attrPatterns: string[];
+ *   attrValuePatterns: string[];
+ *   message?: string;
+ * }[]} Options
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -12,9 +21,7 @@ const MESSAGE_IDS = {
   RESTRICTED: "restricted",
 };
 
-/**
- * @type {RuleModule<Options>}
- */
+/** @type {RuleModule<Options>} */
 module.exports = {
   meta: {
     type: "code",
@@ -60,14 +67,10 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Options}
-     */
+    /** @type {Options} */
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
-    /**
-     * @param {Tag | StyleTag | ScriptTag} node
-     */
+    /** @param {Tag | StyleTag | ScriptTag} node */
     function check(node) {
       node.attributes.forEach((attr) => {
         if (
@@ -88,9 +91,7 @@ module.exports = {
           return;
         }
 
-        /**
-         * @type {{node: Attribute, message: string, messageId?: string}}
-         */
+        /** @type {{ node: Attribute; message: string; messageId?: string }} */
         const result = {
           node: attr,
           message: "",
@@ -120,9 +121,7 @@ module.exports = {
 };
 
 class PatternChecker {
-  /**
-   * @param {Options[number]} option
-   */
+  /** @param {Options[number]} option */
   constructor(option) {
     this.option = option;
     this.attrRegExps = option.attrPatterns.map(
@@ -147,9 +146,7 @@ class PatternChecker {
     return result;
   }
 
-  /**
-   * @returns {string}
-   */
+  /** @returns {string} */
   getMessage() {
     return this.message || "";
   }