@html-eslint/eslint-plugin 0.44.0 → 0.46.0

package/lib/configs/recommended.js

@@ -1,29 +1,39 @@
-/** @satisfies {import('eslint').Linter.FlatConfig} */
-const recommended = {
-  rules: {
-    "@html-eslint/require-lang": "error",
-    "@html-eslint/require-img-alt": "error",
-    "@html-eslint/require-doctype": "error",
-    "@html-eslint/require-title": "error",
-    "@html-eslint/no-multiple-h1": "error",
-    "@html-eslint/no-extra-spacing-attrs": "error",
-    "@html-eslint/attrs-newline": "error",
-    "@html-eslint/element-newline": [
-      "error",
-      {
-        inline: [`$inline`],
-      },
-    ],
-    "@html-eslint/no-duplicate-id": "error",
-    "@html-eslint/indent": "error",
-    "@html-eslint/require-li-container": "error",
-    "@html-eslint/quotes": "error",
-    "@html-eslint/no-obsolete-tags": "error",
-    "@html-eslint/require-closing-tags": "error",
-    "@html-eslint/no-duplicate-attrs": "error",
-    "@html-eslint/use-baseline": "error",
-    "@html-eslint/no-duplicate-in-head": "error",
-  },
+/** @satisfies {import('eslint').Linter.Config['rules']} */
+const recommendedRules = {
+  "html/require-lang": "error",
+  "html/require-img-alt": "error",
+  "html/require-doctype": "error",
+  "html/require-title": "error",
+  "html/no-multiple-h1": "error",
+  "html/no-extra-spacing-attrs": "error",
+  "html/attrs-newline": "error",
+  "html/element-newline": [
+    "error",
+    {
+      inline: [`$inline`],
+    },
+  ],
+  "html/no-duplicate-id": "error",
+  "html/indent": "error",
+  "html/require-li-container": "error",
+  "html/quotes": "error",
+  "html/no-obsolete-tags": "error",
+  "html/require-closing-tags": "error",
+  "html/no-duplicate-attrs": "error",
+  "html/use-baseline": "error",
+  "html/no-duplicate-in-head": "error",
 };
 
-module.exports = recommended;
+const recommendedLegacyRules = Object.entries(recommendedRules).reduce(
+  (acc, [key, value]) => {
+    acc[key.replace("html/", "@html-eslint/")] = value;
+    return acc;
+  },
+  /** @type {Record<string, typeof recommendedRules[keyof typeof recommendedRules]>} */
+  ({})
+);
+
+module.exports = {
+  recommendedRules,
+  recommendedLegacyRules,
+};

package/lib/index.js

@@ -1,6 +1,8 @@
 const rules = require("./rules");
-const recommended = require("./configs/recommended");
-const parser = require("@html-eslint/parser");
+const {
+  recommendedRules,
+  recommendedLegacyRules,
+} = require("./configs/recommended");
 const { HTMLLanguage } = require("./languages/html-language");
 const { name, version } = require("../package.json");
 
@@ -16,27 +18,24 @@ const plugin = {
     name,
     version,
   },
-  configs: {
-    recommended,
-
-    "flat/recommended": {
-      plugins: {
-        /** @type {ESLint.Plugin} */
-        get "@html-eslint"() {
-          return plugin;
-        },
-      },
-
-      languageOptions: {
-        parser,
-      },
-      rules: recommended.rules,
-    },
-  },
   languages: {
     html: new HTMLLanguage(),
   },
   rules,
+  configs: {
+    recommended: {
+      rules: recommendedRules,
+      plugins: {},
+    },
+    ["recommended-legacy"]: {
+      rules: recommendedLegacyRules,
+    },
+  },
 };
 
+{
+  // @ts-ignore
+  plugin.configs.recommended.plugins.html = plugin;
+}
+
 module.exports = plugin;

package/lib/rules/id-naming-convention.js

@@ -46,7 +46,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Enforce consistent naming id attributes",
+      description: "Enforce consistent naming of id attributes",
       category: RULE_CATEGORY.STYLE,
       recommended: false,
       url: getRuleUrl("id-naming-convention"),

package/lib/rules/indent/indent.js

@@ -1,5 +1,5 @@
 /**
- * @import {AnyNode, Tag, TemplateText, TemplateLiteral, OpenTemplate, CloseTemplate, ScriptTag, StyleTag} from "@html-eslint/types";
+ * @import {AnyNode, Tag, TemplateText, TemplateLiteral, OpenTemplate, CloseTemplate, ScriptTag, StyleTag, Text} from "@html-eslint/types";
  * @import {Line, RuleListener, Context, RuleModule} from "../../types";
  * @import {AST} from "eslint";
  *
@@ -30,6 +30,7 @@ const {
   hasTemplate,
   isScript,
   isStyle,
+  isText,
 } = require("../utils/node");
 const {
   shouldCheckTaggedTemplateExpression,
@@ -112,7 +113,7 @@ module.exports = {
     const { indentType, indentSize, indentChar } = getIndentOptionInfo(context);
 
     /**
-     * @param {Tag | ScriptTag | StyleTag} node
+     * @param {Tag | ScriptTag | StyleTag | Text} node
      * @return {number}
      */
     function getTagIncreasingLevel(node) {
@@ -141,7 +142,7 @@ module.exports = {
       if (isLine(node)) {
         return 1;
       }
-      if (isTag(node) || isScript(node) || isStyle(node)) {
+      if (isTag(node) || isScript(node) || isStyle(node) || isText(node)) {
         return getTagIncreasingLevel(node);
       }
       const type = node.type;

package/lib/rules/index.js

@@ -51,6 +51,7 @@ const noDuplicateClass = require("./no-duplicate-class");
 const noEmptyHeadings = require("./no-empty-headings");
 const noInvalidEntity = require("./no-invalid-entity");
 const noDuplicateInHead = require("./no-duplicate-in-head");
+const noIneffectiveAttrs = require("./no-ineffective-attrs");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -108,6 +109,7 @@ const rules = {
   "no-empty-headings": noEmptyHeadings,
   "no-invalid-entity": noInvalidEntity,
   "no-duplicate-in-head": noDuplicateInHead,
+  "no-ineffective-attrs": noIneffectiveAttrs,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

package/lib/rules/lowercase.js

@@ -1,5 +1,10 @@
 /**
- * @import {Tag, StyleTag, ScriptTag} from "@html-eslint/types";
+ * @import {
+ *   Tag,
+ *   StyleTag,
+ *   ScriptTag,
+ *   Doctype,
+ * } from "@html-eslint/types";
  * @import {RuleModule} from "../types";
  */
 
@@ -21,7 +26,7 @@ module.exports = {
     type: "suggestion",
 
     docs: {
-      description: "Enforce to use lowercase for tag and attribute names.",
+      description: "Enforce use of lowercase for tag and attribute names.",
       category: RULE_CATEGORY.STYLE,
       recommended: false,
       url: getRuleUrl("lowercase"),
@@ -128,6 +133,48 @@ module.exports = {
       }
     }
 
+    /**
+     * @param {Doctype} doctype
+     */
+    function checkDoctype(doctype) {
+      if (doctype.open.value !== doctype.open.value.toLowerCase()) {
+        context.report({
+          node: doctype.open,
+          messageId: MESSAGE_IDS.UNEXPECTED,
+          data: {
+            name: doctype.open.value.slice(1),
+          },
+          fix(fixer) {
+            return fixer.replaceTextRange(doctype.open.range, "<!doctype");
+          },
+        });
+      }
+      if (doctype.attributes && doctype.attributes.length) {
+        doctype.attributes.forEach((attribute) => {
+          if (
+            attribute.value &&
+            attribute.value.value !== attribute.value.value.toLowerCase()
+          ) {
+            context.report({
+              node: attribute.value,
+              messageId: MESSAGE_IDS.UNEXPECTED,
+              data: {
+                name: attribute.value.value,
+              },
+              fix(fixer) {
+                return fixer.replaceText(
+                  // @ts-ignore
+                  attribute.value,
+                  // @ts-ignore
+                  attribute.value.value.toLowerCase()
+                );
+              },
+            });
+          }
+        });
+      }
+    }
+
     return createVisitors(context, {
       Tag(node) {
         if (node.name.toLocaleLowerCase() === "svg") {
@@ -142,6 +189,7 @@ module.exports = {
       },
       StyleTag: check,
       ScriptTag: check,
+      Doctype: checkDoctype,
     });
   },
 };

package/lib/rules/max-element-depth.js

@@ -22,7 +22,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Enforce element maximum depth",
+      description: "Enforce maximum element depth",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
       url: getRuleUrl("max-element-depth"),

package/lib/rules/no-abstract-roles.js

@@ -35,7 +35,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow to use of abstract roles",
+      description: "Disallow use of abstract roles",
       category: RULE_CATEGORY.ACCESSIBILITY,
       recommended: false,
       url: getRuleUrl("no-abstract-roles"),

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

@@ -20,7 +20,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow to use of accesskey attribute",
+      description: "Disallow use of accesskey attribute",
       category: RULE_CATEGORY.ACCESSIBILITY,
       recommended: false,
       url: getRuleUrl("no-accesskey-attrs"),

package/lib/rules/no-aria-hidden-body.js

@@ -20,7 +20,7 @@ module.exports = {
 
     docs: {
       description:
-        "Disallow to use aria-hidden attributes on the `body` element.",
+        "Disallow use of aria-hidden attributes on the `body` element.",
       category: RULE_CATEGORY.ACCESSIBILITY,
       recommended: false,
       url: getRuleUrl("no-aria-hidden-body"),

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

@@ -21,7 +21,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow to use duplicate attributes",
+      description: "Disallow duplicate attributes",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: true,
       url: getRuleUrl("no-duplicate-attrs"),

package/lib/rules/no-duplicate-class.js

@@ -23,7 +23,7 @@ module.exports = {
   meta: {
     type: "code",
     docs: {
-      description: "Disallow to use duplicate class",
+      description: "Disallow duplicate class names",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
       url: getRuleUrl("no-duplicate-class"),

package/lib/rules/no-duplicate-id.js

@@ -25,7 +25,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow to use duplicate id",
+      description: "Disallow duplicate id attributes",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: true,
       url: getRuleUrl("no-duplicate-id"),

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

@@ -36,7 +36,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow an extra spacing around attributes",
+      description: "Disallow extra spacing around attributes",
       category: RULE_CATEGORY.STYLE,
       recommended: true,
       url: getRuleUrl("no-extra-spacing-attrs"),

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

@@ -0,0 +1,184 @@
+/**
+ * @import {RuleModule} from "../types";
+ * @import {Tag, ScriptTag} from "@html-eslint/types"
+ * @typedef {{ attr: string; when: (node: Tag | ScriptTag) => boolean; message: string; }} AttributeChecker
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { hasAttr, hasTemplate, findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {string | undefined}
+ */
+function getAttrValue(node, attrName) {
+  const attr = node.attributes.find(
+    (a) => a.type === "Attribute" && a.key.value === attrName
+  );
+  if (!attr || !attr.value) return undefined;
+  return attr.value.value;
+}
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {boolean}
+ */
+function isTemplateValueAttr(node, attrName) {
+  const attr = findAttr(node, attrName);
+  if (!attr || !attr.value) return false;
+  return hasTemplate(attr.value);
+}
+
+/**
+ * @type {Record<string, AttributeChecker[]>}
+ */
+const checkersByTag = {
+  input: [
+    {
+      attr: "multiple",
+      when: (node) => {
+        const type = getAttrValue(node, "type") || "text";
+        return [
+          "text",
+          "password",
+          "radio",
+          "checkbox",
+          "image",
+          "hidden",
+          "reset",
+          "button",
+        ].includes(type);
+      },
+      message: 'The "multiple" attribute has no effect on this input type.',
+    },
+    {
+      attr: "accept",
+      when: (node) => {
+        if (isTemplateValueAttr(node, "type")) {
+          return false;
+        }
+        const type = getAttrValue(node, "type") || "text";
+        return type !== "file";
+      },
+      message:
+        'The "accept" attribute has no effect unless input type is "file".',
+    },
+    {
+      attr: "readonly",
+      when: (node) => {
+        const type = getAttrValue(node, "type") || "text";
+        return ["checkbox", "radio", "file", "range", "color"].includes(type);
+      },
+      message: 'The "readonly" attribute has no effect on this input type.',
+    },
+  ],
+  script: [
+    {
+      attr: "defer",
+      when: (node) => !hasAttr(node, "src"),
+      message: 'The "defer" attribute has no effect on inline scripts.',
+    },
+    {
+      attr: "async",
+      when: (node) => !hasAttr(node, "src"),
+      message: 'The "async" attribute has no effect on inline scripts.',
+    },
+  ],
+  a: [
+    {
+      attr: "download",
+      when: (node) => !hasAttr(node, "href"),
+      message: 'The "download" attribute has no effect without an "href".',
+    },
+  ],
+  audio: [
+    {
+      attr: "controlslist",
+      when: (node) => !hasAttr(node, "controls"),
+      message: 'The "controlslist" attribute has no effect without "controls".',
+    },
+  ],
+  video: [
+    {
+      attr: "controlslist",
+      when: (node) => !hasAttr(node, "controls"),
+      message: 'The "controlslist" attribute has no effect without "controls".',
+    },
+  ],
+};
+
+/**
+ * @type {RuleModule<[]>}
+ */
+module.exports = {
+  name: "no-ineffective-attrs",
+  meta: {
+    docs: {
+      description:
+        "Disallow HTML attributes that have no effect in their context",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+    messages: {
+      ineffective: "{{ message }}",
+    },
+    schema: [],
+    type: "problem",
+  },
+  defaultOptions: [],
+  create(context) {
+    return createVisitors(context, {
+      /**
+       * @param {Tag} node
+       */
+      Tag(node) {
+        const tagCheckers = checkersByTag[node.name];
+        if (!tagCheckers) return;
+
+        for (const check of tagCheckers) {
+          for (const attr of node.attributes) {
+            if (attr.type !== "Attribute") continue;
+            if (attr.key.value !== check.attr) continue;
+
+            if (check.when(node)) {
+              context.report({
+                loc: attr.loc,
+                messageId: "ineffective",
+                data: {
+                  message: check.message,
+                },
+              });
+            }
+          }
+        }
+      },
+      /**
+       * @param {ScriptTag} node
+       */
+      ScriptTag(node) {
+        const scriptCheckers = checkersByTag.script;
+        if (!scriptCheckers) return;
+
+        for (const check of scriptCheckers) {
+          for (const attr of node.attributes) {
+            if (attr.type !== "Attribute") continue;
+            if (attr.key.value !== check.attr) continue;
+
+            if (check.when(node)) {
+              context.report({
+                loc: attr.loc,
+                messageId: "ineffective",
+                data: {
+                  message: check.message,
+                },
+              });
+            }
+          }
+        }
+      },
+    });
+  },
+};

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

@@ -20,7 +20,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Disallow to use obsolete elements in HTML5",
+      description: "Disallow use of obsolete elements in HTML5",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: true,
       url: getRuleUrl("no-obsolete-tags"),

package/lib/rules/require-attrs.js

@@ -6,6 +6,7 @@
  * @property {string} tag
  * @property {string} attr
  * @property {string} [value]
+ * @property {string} [message]
  *
  */
 
@@ -41,6 +42,7 @@ module.exports = {
           tag: { type: "string" },
           attr: { type: "string" },
           value: { type: "string" },
+          message: { type: "string" },
         },
         required: ["tag", "attr"],
         additionalProperties: false,
@@ -59,7 +61,7 @@ module.exports = {
      */
     const options = context.options || [];
     /**
-     * @type {Map<string, { tag: string, attr: string, value?: string}[]>}
+     * @type {Map<string, { tag: string, attr: string, value?: string, message?: string}[]>}
      */
     const tagOptionsMap = new Map();
 
@@ -90,7 +92,9 @@ module.exports = {
         );
         if (!attr) {
           context.report({
-            messageId: MESSAGE_IDS.MISSING,
+            ...(option.message
+              ? { message: option.message }
+              : { messageId: MESSAGE_IDS.MISSING }),
             node,
             data: {
               attr: attrName,
@@ -111,7 +115,9 @@ module.exports = {
           (!attr.value || attr.value.value !== option.value)
         ) {
           context.report({
-            messageId: MESSAGE_IDS.UNEXPECTED,
+            ...(option.message
+              ? { message: option.message }
+              : { messageId: MESSAGE_IDS.UNEXPECTED }),
             node: attr,
             data: {
               attr: attrName,

package/lib/rules/require-button-type.js

@@ -26,7 +26,8 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Require use of button element with a valid type attribute.",
+      description:
+        "Require use of the button element with a valid type attribute.",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
       url: getRuleUrl("require-button-type"),

package/lib/rules/require-doctype.js

@@ -17,7 +17,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Require `<!DOCTYPE HTML>` in html,",
+      description: "Require `<!DOCTYPE HTML>` in HTML",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: true,
       url: getRuleUrl("require-doctype"),

package/lib/rules/require-img-alt.js

@@ -23,7 +23,7 @@ module.exports = {
     type: "suggestion",
 
     docs: {
-      description: "Require `alt` attribute at `<img>` tag",
+      description: "Require `alt` attribute on `<img>` tag",
       category: RULE_CATEGORY.ACCESSIBILITY,
       recommended: true,
       url: getRuleUrl("require-img-alt"),

package/lib/rules/require-lang.js

@@ -20,7 +20,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Require `lang` attribute at `<html>` tag",
+      description: "Require `lang` attribute on `<html>` tag",
       category: RULE_CATEGORY.SEO,
       recommended: true,
       url: getRuleUrl("require-lang"),

package/lib/rules/require-li-container.js

@@ -20,7 +20,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Enforce `<li>` to be in  `<ul>`, `<ol>` or `<menu>`.",
+      description: "Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`.",
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: true,
       url: getRuleUrl("require-li-container"),

package/lib/rules/require-meta-charset.js

@@ -29,7 +29,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: 'Enforce to use `<meta charset="...">` in `<head>`',
+      description: 'Enforce use of `<meta charset="...">` in `<head>`',
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
       url: getRuleUrl("require-meta-charset"),

package/lib/rules/require-meta-viewport.js

@@ -37,7 +37,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: 'Enforce to use `<meta name="viewport">` in `<head>`',
+      description: 'Enforce use of `<meta name="viewport">` in `<head>`',
       category: RULE_CATEGORY.ACCESSIBILITY,
       recommended: false,
       url: getRuleUrl("require-meta-viewport"),

package/lib/rules/require-open-graph-protocol.js

@@ -41,7 +41,7 @@ module.exports = {
 
     docs: {
       description:
-        "Enforce to use specified meta tags for open graph protocol.",
+        "Enforce use of specified meta tags for open graph protocol.",
       category: RULE_CATEGORY.SEO,
       recommended: false,
       url: getRuleUrl("require-open-graph-protocol"),

package/lib/rules/require-title.js

@@ -37,7 +37,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Require `<title><title/>` in the `<head><head/>`",
+      description: "Require `<title>` in the `<head>`",
       category: RULE_CATEGORY.SEO,
       recommended: true,
       url: getRuleUrl("require-title"),

package/lib/rules/sort-attrs.js

@@ -3,7 +3,7 @@
  * @import {RuleFixer, RuleModule} from "../types";
  *
  * @typedef {Object} Option
- * @property {string[]} [Option.priority]
+ * @property {Array<string | {pattern: string}>} [Option.priority]
  */
 
 const { hasTemplate } = require("./utils/node");
@@ -24,7 +24,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: "Enforce attributes alphabetical sorting",
+      description: "Enforce priority and alphabetical sorting of attributes",
       category: RULE_CATEGORY.STYLE,
       recommended: false,
       url: getRuleUrl("sort-attrs"),
@@ -37,16 +37,31 @@ module.exports = {
           priority: {
             type: "array",
             items: {
-              type: "string",
-              uniqueItems: true,
+              oneOf: [
+                {
+                  type: "string",
+                },
+                {
+                  type: "object",
+                  properties: {
+                    pattern: {
+                      type: "string",
+                    },
+                  },
+                  required: ["pattern"],
+                  additionalProperties: false,
+                },
+              ],
             },
+            uniqueItems: true,
           },
         },
         additionalProperties: false,
       },
     ],
     messages: {
-      [MESSAGE_IDS.UNSORTED]: "Attributes should be sorted alphabetically",
+      [MESSAGE_IDS.UNSORTED]:
+        "Attributes should be sorted by priority and alphabetically",
     },
   },
   create(context) {
@@ -55,9 +70,49 @@ module.exports = {
       priority: ["id", "type", "class", "style"],
     };
     /**
-     * @type {string[]}
+     * @type {Array<string | {pattern: string, regex: RegExp}>}
      */
-    const priority = option.priority || [];
+    const priority = (option.priority || []).map((item) => {
+      if (item && typeof item === "object" && "pattern" in item) {
+        return {
+          ...item,
+          regex: new RegExp(item.pattern, "u"),
+        };
+      }
+      return item;
+    });
+
+    /**
+     * @param {string} attrName
+     * @param {string | {pattern: string, regex: RegExp}} priorityItem
+     * @returns {boolean}
+     */
+    function matchesPriority(attrName, priorityItem) {
+      if (typeof priorityItem === "string") {
+        return attrName === priorityItem;
+      }
+      if (
+        priorityItem &&
+        typeof priorityItem === "object" &&
+        priorityItem.regex
+      ) {
+        return priorityItem.regex.test(attrName);
+      }
+      return false;
+    }
+
+    /**
+     * @param {string} attrName
+     * @returns {number}
+     */
+    function getPriorityIndex(attrName) {
+      for (let i = 0; i < priority.length; i++) {
+        if (matchesPriority(attrName, priority[i])) {
+          return i;
+        }
+      }
+      return -1;
+    }
 
     /**
      * @param {Attribute} attrA
@@ -68,8 +123,8 @@ module.exports = {
       const keyA = attrA.key.value;
       const keyB = attrB.key.value;
 
-      const keyAReservedValue = priority.indexOf(keyA);
-      const keyBReservedValue = priority.indexOf(keyB);
+      const keyAReservedValue = getPriorityIndex(keyA);
+      const keyBReservedValue = getPriorityIndex(keyB);
       if (keyAReservedValue >= 0 && keyBReservedValue >= 0) {
         return keyAReservedValue - keyBReservedValue;
       } else if (keyAReservedValue >= 0) {

package/lib/rules/utils/baseline.js

@@ -277,6 +277,7 @@ const elements = new Map([
   ["input.type_button", "10:2015"],
   ["input.type_checkbox", "10:2015"],
   ["input.type_color", "0:"],
+  ["input.type_color.accepts_css_colors", "0:"],
   ["input.type_date", "10:2021"],
   ["input.type_datetime-local", "10:2021"],
   ["input.type_email", "10:2015"],
@@ -289,7 +290,8 @@ const elements = new Map([
   ["input.type_password.insecure_login_handling", "0:"],
   ["input.type_radio", "10:2015"],
   ["input.type_range", "10:2017"],
-  ["input.type_range.tick_marks", "5:2023"],
+  ["input.type_range.labeled_values", "0:"],
+  ["input.type_range.tick_marks", "10:2023"],
   ["input.type_range.vertical_orientation", "5:2024"],
   ["input.type_reset", "10:2015"],
   ["input.type_search", "10:2015"],
@@ -380,7 +382,7 @@ const elements = new Map([
   ["ol.start", "10:2015"],
   ["ol.type", "10:2015"],
   ["optgroup", "10:2015"],
-  ["optgroup.disabled", "10:2015"],
+  ["optgroup.disabled", "0:"],
   ["optgroup.label", "10:2015"],
   ["option", "10:2015"],
   ["option.disabled", "10:2015"],

package/lib/rules/utils/node.js

@@ -17,6 +17,17 @@ function findAttr(node, key) {
   );
 }
 
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {boolean}
+ */
+function hasAttr(node, attrName) {
+  return node.attributes.some(
+    (a) => a.type === "Attribute" && a.key.value === attrName
+  );
+}
+
 /**
  * Checks whether a node's attributes is empty or not.
  * @param {Tag | ScriptTag | StyleTag} node
@@ -254,4 +265,5 @@ module.exports = {
   isRangesOverlap,
   getTemplateTokens,
   hasTemplate,
+  hasAttr,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "type": "commonjs",
   "description": "ESLint plugin for HTML",
   "author": "yeonjuan",
@@ -40,16 +40,16 @@
   ],
   "dependencies": {
     "@eslint/plugin-kit": "^0.3.1",
-    "@html-eslint/parser": "^0.44.0",
-    "@html-eslint/template-parser": "^0.44.0",
-    "@html-eslint/template-syntax-parser": "^0.44.0"
+    "@html-eslint/parser": "^0.46.0",
+    "@html-eslint/template-parser": "^0.46.0",
+    "@html-eslint/template-syntax-parser": "^0.46.0"
   },
   "peerDependencies": {
     "eslint": "^8.0.0 || ^9.0.0"
   },
   "devDependencies": {
     "@eslint/core": "^0.14.0",
-    "@html-eslint/types": "^0.44.0",
+    "@html-eslint/types": "^0.46.0",
     "@types/estree": "^0.0.47",
     "es-html-parser": "0.3.0",
     "eslint": "^9.27.0",
@@ -59,5 +59,5 @@
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
-  "gitHead": "e75bca7964df38596359bdaef5f539149a206f29"
+  "gitHead": "01f54b34922f987051762f4b2e5c816cbfeeab68"
 }

package/types/configs/recommended.d.ts

@@ -1,22 +1,26 @@
-export let rules: {
-    "@html-eslint/require-lang": "error";
-    "@html-eslint/require-img-alt": "error";
-    "@html-eslint/require-doctype": "error";
-    "@html-eslint/require-title": "error";
-    "@html-eslint/no-multiple-h1": "error";
-    "@html-eslint/no-extra-spacing-attrs": "error";
-    "@html-eslint/attrs-newline": "error";
-    "@html-eslint/element-newline": ["error", {
+/** @satisfies {import('eslint').Linter.Config['rules']} */
+export const recommendedRules: {
+    "html/require-lang": "error";
+    "html/require-img-alt": "error";
+    "html/require-doctype": "error";
+    "html/require-title": "error";
+    "html/no-multiple-h1": "error";
+    "html/no-extra-spacing-attrs": "error";
+    "html/attrs-newline": "error";
+    "html/element-newline": ["error", {
         inline: string[];
     }];
-    "@html-eslint/no-duplicate-id": "error";
-    "@html-eslint/indent": "error";
-    "@html-eslint/require-li-container": "error";
-    "@html-eslint/quotes": "error";
-    "@html-eslint/no-obsolete-tags": "error";
-    "@html-eslint/require-closing-tags": "error";
-    "@html-eslint/no-duplicate-attrs": "error";
-    "@html-eslint/use-baseline": "error";
-    "@html-eslint/no-duplicate-in-head": "error";
+    "html/no-duplicate-id": "error";
+    "html/indent": "error";
+    "html/require-li-container": "error";
+    "html/quotes": "error";
+    "html/no-obsolete-tags": "error";
+    "html/require-closing-tags": "error";
+    "html/no-duplicate-attrs": "error";
+    "html/use-baseline": "error";
+    "html/no-duplicate-in-head": "error";
 };
+export const recommendedLegacyRules: Record<string, "error" | ["error", {
+    inline: string[];
+}]>;
 //# sourceMappingURL=recommended.d.ts.map

package/types/configs/recommended.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recommended.d.ts","sourceRoot":"","sources":["../../lib/configs/recommended.js"],"names":[],"mappings":""}
+{"version":3,"file":"recommended.d.ts","sourceRoot":"","sources":["../../lib/configs/recommended.js"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D;;;;;;;;;;;;;;;;;;;;EAuBE;AAEF;;IAOE"}

package/types/index.d.ts

@@ -1,70 +1,44 @@
 import { name } from "../package.json";
 import { version } from "../package.json";
-import type { ESLint } from "eslint";
-import parser = require("@html-eslint/parser");
 import { HTMLLanguage } from "./languages/html-language";
 import rules = require("./rules");
 export declare namespace meta {
     export { name };
     export { version };
 }
+export declare namespace languages {
+    let html: HTMLLanguage;
+}
+export { rules };
 export declare let configs: {
     recommended: {
         rules: {
-            "@html-eslint/require-lang": "error";
-            "@html-eslint/require-img-alt": "error";
-            "@html-eslint/require-doctype": "error";
-            "@html-eslint/require-title": "error";
-            "@html-eslint/no-multiple-h1": "error";
-            "@html-eslint/no-extra-spacing-attrs": "error";
-            "@html-eslint/attrs-newline": "error";
-            "@html-eslint/element-newline": ["error", {
+            "html/require-lang": "error";
+            "html/require-img-alt": "error";
+            "html/require-doctype": "error";
+            "html/require-title": "error";
+            "html/no-multiple-h1": "error";
+            "html/no-extra-spacing-attrs": "error";
+            "html/attrs-newline": "error";
+            "html/element-newline": ["error", {
                 inline: string[];
             }];
-            "@html-eslint/no-duplicate-id": "error";
-            "@html-eslint/indent": "error";
-            "@html-eslint/require-li-container": "error";
-            "@html-eslint/quotes": "error";
-            "@html-eslint/no-obsolete-tags": "error";
-            "@html-eslint/require-closing-tags": "error";
-            "@html-eslint/no-duplicate-attrs": "error";
-            "@html-eslint/use-baseline": "error";
-            "@html-eslint/no-duplicate-in-head": "error";
+            "html/no-duplicate-id": "error";
+            "html/indent": "error";
+            "html/require-li-container": "error";
+            "html/quotes": "error";
+            "html/no-obsolete-tags": "error";
+            "html/require-closing-tags": "error";
+            "html/no-duplicate-attrs": "error";
+            "html/use-baseline": "error";
+            "html/no-duplicate-in-head": "error";
         };
+        plugins: {};
     };
-    "flat/recommended": {
-        plugins: {
-            /** @type {ESLint.Plugin} */
-            readonly "@html-eslint": ESLint.Plugin;
-        };
-        languageOptions: {
-            parser: typeof parser;
-        };
-        rules: {
-            "@html-eslint/require-lang": "error";
-            "@html-eslint/require-img-alt": "error";
-            "@html-eslint/require-doctype": "error";
-            "@html-eslint/require-title": "error";
-            "@html-eslint/no-multiple-h1": "error";
-            "@html-eslint/no-extra-spacing-attrs": "error";
-            "@html-eslint/attrs-newline": "error";
-            "@html-eslint/element-newline": ["error", {
-                inline: string[];
-            }];
-            "@html-eslint/no-duplicate-id": "error";
-            "@html-eslint/indent": "error";
-            "@html-eslint/require-li-container": "error";
-            "@html-eslint/quotes": "error";
-            "@html-eslint/no-obsolete-tags": "error";
-            "@html-eslint/require-closing-tags": "error";
-            "@html-eslint/no-duplicate-attrs": "error";
-            "@html-eslint/use-baseline": "error";
-            "@html-eslint/no-duplicate-in-head": "error";
-        };
+    "recommended-legacy": {
+        rules: Record<string, "error" | ["error", {
+            inline: string[];
+        }]>;
     };
 };
-export declare namespace languages {
-    let html: HTMLLanguage;
-}
-export { rules };
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.js"],"names":[],"mappings":";;4BAO2B,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAgB3B,4BAA4B;qCAAjB,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.js"],"names":[],"mappings":""}

package/types/rules/indent/indent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"indent.d.ts","sourceRoot":"","sources":["../../../lib/rules/indent/indent.js"],"names":[],"mappings":";;;wBAsDU,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;;qBAjD3B,OAAO,GAAG,IAAI;;SAEb,KAAK;WACL,OAAO;;;kBAEP,aAAa;;;gBAEb,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC;gBACvC,MAAM;gBACN,MAAM;;eAEP,KAAK,GAAG,MAAM;;;;;gCAd+B,aAAa;6BADyC,oBAAoB;0BAC1E,aAAa"}
+{"version":3,"file":"indent.d.ts","sourceRoot":"","sources":["../../../lib/rules/indent/indent.js"],"names":[],"mappings":";;;wBAuDU,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;;qBAlD3B,OAAO,GAAG,IAAI;;SAEb,KAAK;WACL,OAAO;;;kBAEP,aAAa;;;gBAEb,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC;gBACvC,MAAM;gBACN,MAAM;;eAEP,KAAK,GAAG,MAAM;;;;;gCAd+B,aAAa;6BAD+C,oBAAoB;0BAChF,aAAa"}

package/types/rules/lowercase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lowercase.d.ts","sourceRoot":"","sources":["../../lib/rules/lowercase.js"],"names":[],"mappings":"wBAgBU,WAAW,EAAE,CAAC;;gCAdK,UAAU"}
+{"version":3,"file":"lowercase.d.ts","sourceRoot":"","sources":["../../lib/rules/lowercase.js"],"names":[],"mappings":"wBAqBU,WAAW,EAAE,CAAC;;gCAdK,UAAU"}

package/types/rules/no-ineffective-attrs.d.ts

@@ -0,0 +1,14 @@
+declare namespace _exports {
+    export { AttributeChecker };
+}
+declare const _exports: RuleModule<[]>;
+export = _exports;
+type AttributeChecker = {
+    attr: string;
+    when: (node: Tag | ScriptTag) => boolean;
+    message: string;
+};
+import type { RuleModule } from "../types";
+import type { Tag } from "@html-eslint/types";
+import type { ScriptTag } from "@html-eslint/types";
+//# sourceMappingURL=no-ineffective-attrs.d.ts.map

package/types/rules/no-ineffective-attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-ineffective-attrs.d.ts","sourceRoot":"","sources":["../../lib/rules/no-ineffective-attrs.js"],"names":[],"mappings":";;;wBAiHU,WAAW,EAAE,CAAC;;wBA9GX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,IAAI,EAAE,GAAG,GAAG,SAAS,KAAK,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;CAAE;gCAF5D,UAAU;yBACN,oBAAoB;+BAApB,oBAAoB"}

package/types/rules/require-attrs.d.ts

@@ -7,6 +7,7 @@ type Option = {
     tag: string;
     attr: string;
     value?: string | undefined;
+    message?: string | undefined;
 };
 import type { RuleModule } from "../types";
 //# sourceMappingURL=require-attrs.d.ts.map

package/types/rules/require-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"require-attrs.d.ts","sourceRoot":"","sources":["../../lib/rules/require-attrs.js"],"names":[],"mappings":";;;wBAsBU,WAAW,MAAM,EAAE,CAAC;;;SAjBhB,MAAM;UACN,MAAM;;;gCAJ4B,UAAU"}
+{"version":3,"file":"require-attrs.d.ts","sourceRoot":"","sources":["../../lib/rules/require-attrs.js"],"names":[],"mappings":";;;wBAuBU,WAAW,MAAM,EAAE,CAAC;;;SAlBhB,MAAM;UACN,MAAM;;;;gCAJ4B,UAAU"}

package/types/rules/sort-attrs.d.ts

@@ -4,7 +4,9 @@ declare namespace _exports {
 declare const _exports: RuleModule<[Option]>;
 export = _exports;
 type Option = {
-    priority?: string[] | undefined;
+    priority?: (string | {
+        pattern: string;
+    })[] | undefined;
 };
 import type { RuleModule } from "../types";
 //# sourceMappingURL=sort-attrs.d.ts.map

package/types/rules/sort-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sort-attrs.d.ts","sourceRoot":"","sources":["../../lib/rules/sort-attrs.js"],"names":[],"mappings":";;;wBAmBU,WAAW,CAAC,MAAM,CAAC,CAAC;;;;;gCAjBU,UAAU"}
+{"version":3,"file":"sort-attrs.d.ts","sourceRoot":"","sources":["../../lib/rules/sort-attrs.js"],"names":[],"mappings":";;;wBAmBU,WAAW,CAAC,MAAM,CAAC,CAAC;;;;iBAdS,MAAM;;;gCAHL,UAAU"}

package/types/rules/utils/baseline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"baseline.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/baseline.js"],"names":[],"mappings":"AAOA,2CA+jBG;AACH,mDA4BG;AAnmBH;;GAEG;AACH,4BAAsB,EAAE,CAAC;AACzB,2BAAqB,CAAC,CAAC;AACvB,6BAAuB,CAAC,CAAC"}
+{"version":3,"file":"baseline.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/baseline.js"],"names":[],"mappings":"AAOA,2CAikBG;AACH,mDA4BG;AArmBH;;GAEG;AACH,4BAAsB,EAAE,CAAC;AACzB,2BAAqB,CAAC,CAAC;AACvB,6BAAuB,CAAC,CAAC"}

package/types/rules/utils/node.d.ts

@@ -98,6 +98,12 @@ export function getTemplateTokens(tokens: AnyToken[]): ((CommentContent | Text)[
  * @returns {boolean}
  */
 export function hasTemplate(node: AttributeKey | AttributeValue | Text | CommentContent): boolean;
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {boolean}
+ */
+export function hasAttr(node: Tag | ScriptTag, attrName: string): boolean;
 import type { Tag } from "@html-eslint/types";
 import type { ScriptTag } from "@html-eslint/types";
 import type { StyleTag } from "@html-eslint/types";

package/types/rules/utils/node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/node.js"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,+BAJW,GAAG,GAAG,SAAS,GAAG,QAAQ,OAC1B,MAAM,GACJ,SAAS,GAAG,SAAS,CAMjC;AAED;;;;GAIG;AACH,wCAHW,GAAG,GAAG,SAAS,GAAG,QAAQ,GACxB,OAAO,CAInB;AAED;;;;GAIG;AACH,6CAHW,OAAO,GACL,OAAO,CAInB;AA+BD;;;;GAIG;AACH,uCAHW,IAAI,GAAG,cAAc,GACnB,IAAI,EAAE,CAwDlB;AAED;;;;;GAKG;AACH,sCAJW;IAAC,GAAG,EAAE,kBAAkB,CAAA;CAAC,SACzB;IAAC,GAAG,EAAE,kBAAkB,CAAA;CAAC,GACvB,kBAAkB,CAO9B;AA4DD;;;;GAIG;AACH,iCAJW,OAAO,aACP,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,GACxB,IAAI,GAAG,OAAO,CAiB1B;AA9ED;;;GAGG;AACH,4BAHW,QAAQ,GACN,IAAI,IAAI,GAAG,CAIvB;AAkBD;;;GAGG;AACH,gCAHW,QAAQ,GACN,IAAI,IAAI,OAAO,CAI3B;AAED;;;GAGG;AACH,6BAHW,QAAQ,GACN,IAAI,IAAI,IAAI,CAIxB;AAED;;;GAGG;AACH,6BAHW,QAAQ,GACN,IAAI,IAAI,IAAI,CAIxB;AAtCD;;;GAGG;AACH,+BAHW,QAAQ,GACN,IAAI,IAAI,SAAS,CAI7B;AAED;;;GAGG;AACH,8BAHW,QAAQ,GACN,IAAI,IAAI,QAAQ,CAI5B;AAnHD;;;;GAIG;AACH,8CAJW,CAAC,IAAI,GAAG,cAAc,CAAC,CAAC,OAAO,CAAC,SAChC,SAAS,GACP,OAAO,CAMnB;AAsID;;;GAGG;AACH,oCAHW,MAAM,GACJ,MAAM,EAAE,CAIpB;AA/JD;;;;;GAKG;AACH,wCAJW,SAAS,UACT,SAAS,GACP,OAAO,CAInB;AA+KD;;;;GAIG;AACH,0CAHW,QAAQ,EAAE,GACR,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAaxD;AAlLD;;;GAGG;AACH,kCAHW,YAAY,GAAG,cAAc,GAAG,IAAI,GAAG,cAAc,GACnD,OAAO,CAInB;yBA/DqI,oBAAoB;+BAApB,oBAAoB;8BAApB,oBAAoB;+BAApB,oBAAoB;6BAApB,oBAAoB;0BAApB,oBAAoB;oCAApB,oBAAoB;0BACzH,aAAa;yBACxB,QAAQ;8BADG,aAAa;6BADwF,oBAAoB;8BAApB,oBAAoB;kCAApB,oBAAoB;oCAApB,oBAAoB"}
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/node.js"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,+BAJW,GAAG,GAAG,SAAS,GAAG,QAAQ,OAC1B,MAAM,GACJ,SAAS,GAAG,SAAS,CAMjC;AAaD;;;;GAIG;AACH,wCAHW,GAAG,GAAG,SAAS,GAAG,QAAQ,GACxB,OAAO,CAInB;AAED;;;;GAIG;AACH,6CAHW,OAAO,GACL,OAAO,CAInB;AA+BD;;;;GAIG;AACH,uCAHW,IAAI,GAAG,cAAc,GACnB,IAAI,EAAE,CAwDlB;AAED;;;;;GAKG;AACH,sCAJW;IAAC,GAAG,EAAE,kBAAkB,CAAA;CAAC,SACzB;IAAC,GAAG,EAAE,kBAAkB,CAAA;CAAC,GACvB,kBAAkB,CAO9B;AA4DD;;;;GAIG;AACH,iCAJW,OAAO,aACP,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,GACxB,IAAI,GAAG,OAAO,CAiB1B;AA9ED;;;GAGG;AACH,4BAHW,QAAQ,GACN,IAAI,IAAI,GAAG,CAIvB;AAkBD;;;GAGG;AACH,gCAHW,QAAQ,GACN,IAAI,IAAI,OAAO,CAI3B;AAED;;;GAGG;AACH,6BAHW,QAAQ,GACN,IAAI,IAAI,IAAI,CAIxB;AAED;;;GAGG;AACH,6BAHW,QAAQ,GACN,IAAI,IAAI,IAAI,CAIxB;AAtCD;;;GAGG;AACH,+BAHW,QAAQ,GACN,IAAI,IAAI,SAAS,CAI7B;AAED;;;GAGG;AACH,8BAHW,QAAQ,GACN,IAAI,IAAI,QAAQ,CAI5B;AAnHD;;;;GAIG;AACH,8CAJW,CAAC,IAAI,GAAG,cAAc,CAAC,CAAC,OAAO,CAAC,SAChC,SAAS,GACP,OAAO,CAMnB;AAsID;;;GAGG;AACH,oCAHW,MAAM,GACJ,MAAM,EAAE,CAIpB;AA/JD;;;;;GAKG;AACH,wCAJW,SAAS,UACT,SAAS,GACP,OAAO,CAInB;AA+KD;;;;GAIG;AACH,0CAHW,QAAQ,EAAE,GACR,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAaxD;AAlLD;;;GAGG;AACH,kCAHW,YAAY,GAAG,cAAc,GAAG,IAAI,GAAG,cAAc,GACnD,OAAO,CAInB;AAxDD;;;;GAIG;AACH,8BAJW,GAAG,GAAG,SAAS,YACf,MAAM,GACJ,OAAO,CAMnB;yBA3BqI,oBAAoB;+BAApB,oBAAoB;8BAApB,oBAAoB;+BAApB,oBAAoB;6BAApB,oBAAoB;0BAApB,oBAAoB;oCAApB,oBAAoB;0BACzH,aAAa;yBACxB,QAAQ;8BADG,aAAa;6BADwF,oBAAoB;8BAApB,oBAAoB;kCAApB,oBAAoB;oCAApB,oBAAoB"}