@html-eslint/eslint-plugin 0.9.0-alpha.0 → 0.11.0

package/lib/configs/recommended.js

@@ -13,5 +13,6 @@ module.exports = {
     "@html-eslint/quotes": "error",
     "@html-eslint/no-obsolete-tags": "error",
     "@html-eslint/require-closing-tags": "error",
+    "@html-eslint/no-duplicate-attrs": "error",
   },
 };

package/lib/constants/node-types.js

@@ -1,8 +1,3 @@
-/**
- * @typedef {import("../types").NodeTypes} NodeTypes
- */
-
-/** @type {NodeTypes} */
 module.exports = {
   PROGRAM: "Program",
   TEXT: "text",

package/lib/constants/obsolete-tags.js

@@ -1,5 +1,5 @@
 // https://html.spec.whatwg.org/#non-conforming-features
-/** @type {string[] */
+/** @type {string[]} */
 module.exports = [
   "applet",
   "acronym",

package/lib/constants/rule-category.js

@@ -1,8 +1,3 @@
-/**
- * @typedef {import("../types").RuleCategory} RuleCategory
- */
-
-/** @type {RuleCategory} */
 module.exports = {
   BEST_PRACTICE: "Best Practice",
   SEO: "SEO",

package/lib/constants/void-elements.js

@@ -1,4 +1,4 @@
-/** @type {string[] */
+/** @type {string[]} */
 module.exports = [
   "area",
   "base",

package/lib/rules/element-newline.js

@@ -1,5 +1,7 @@
 /**
- * @typedef {import("../types").HTMLNode} HTMLNode
+ * @typedef {import("../types").ElementNode} ElementNode
+ * @typedef {import("../types").AnyNode} AnyNode
+ * @typedef {import("../types").Context} Context
  */
 
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
@@ -29,9 +31,12 @@ module.exports = {
     },
   },
 
+  /**
+   * @param {Context} context
+   */
   create(context) {
-    function checkSiblings(sibilings) {
-      sibilings
+    function checkSiblings(siblings) {
+      siblings
         .filter((node) => node.type !== NODE_TYPES.TEXT && node.range[0])
         .forEach((current, index, arr) => {
           const after = arr[index + 1];
@@ -50,6 +55,10 @@ module.exports = {
         });
     }
 
+    /**
+     *
+     * @param {ElementNode['childNodes'][number]} node
+     */
     function checkChild(node) {
       const children = (node.childNodes || []).filter(
         (n) => !!n.range[0] && n.type !== NODE_TYPES.TEXT
@@ -57,31 +66,40 @@ module.exports = {
       const first = children[0];
       const last = children[children.length - 1];
       if (first) {
-        if (isOnTheSameLine(node.startTag, first)) {
+        if (node.startTag && isOnTheSameLine(node.startTag, first)) {
           context.report({
             node: node.startTag,
             messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER,
             data: { tag: `<${node.tagName}>` },
             fix(fixer) {
-              return fixer.insertTextAfter(node.startTag, "\n");
+              if (node.startTag) {
+                return fixer.insertTextAfter(node.startTag, "\n");
+              }
+              return null;
             },
           });
         }
       }
       if (last) {
-        if (isOnTheSameLine(node.endTag, last)) {
+        if (node.endTag && isOnTheSameLine(node.endTag, last)) {
           context.report({
             node: node.endTag,
             messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE,
             data: { tag: `</${node.tagName}>` },
             fix(fixer) {
-              return fixer.insertTextBefore(node.endTag, "\n");
+              if (node.endTag) {
+                return fixer.insertTextBefore(node.endTag, "\n");
+              }
+              return null;
             },
           });
         }
       }
     }
     return {
+      /**
+       * @param {ElementNode} node
+       */
       "*"(node) {
         if (node.type !== NODE_TYPES.TEXT) {
           checkSiblings(node.childNodes || []);
@@ -94,13 +112,15 @@ module.exports = {
 
 /**
  * Checks whether two nodes are on the same line or not.
- * @param {HTMLNode} nodeBefore A node before
- * @param {HTMLNode} nodeAfter  A node after
+ * @param {AnyNode} nodeBefore A node before
+ * @param {AnyNode} nodeAfter  A node after
  * @returns {boolean} `true` if two nodes are on the same line, otherwise `false`.
  */
 function isOnTheSameLine(nodeBefore, nodeAfter) {
   if (nodeBefore && nodeAfter) {
+    // @ts-ignore
     if (nodeBefore.endTag) {
+      // @ts-ignore
       return nodeBefore.endTag.loc.end.line === nodeAfter.loc.start.line;
     }
     return nodeBefore.loc.start.line === nodeAfter.loc.start.line;

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

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NamingUtils, NodeUtils } = require("./utils");
 
@@ -5,7 +9,7 @@ const MESSAGE_IDS = {
   WRONG: "wrong",
 };
 
-const CONEVNTIONS = {
+const CONVENTIONS = {
   CAMEL_CASE: "camelCase",
   SNAKE_CASE: "snake_case",
   PASCAL_CASE: "PascalCase",
@@ -13,12 +17,15 @@ const CONEVNTIONS = {
 };
 
 const CONVENTION_CHECKERS = {
-  [CONEVNTIONS.CAMEL_CASE]: NamingUtils.isCamelCase,
-  [CONEVNTIONS.SNAKE_CASE]: NamingUtils.isSnakeCase,
-  [CONEVNTIONS.PASCAL_CASE]: NamingUtils.isPascalCase,
-  [CONEVNTIONS.KEBAB_CASE]: NamingUtils.isKebabCase,
+  [CONVENTIONS.CAMEL_CASE]: NamingUtils.isCamelCase,
+  [CONVENTIONS.SNAKE_CASE]: NamingUtils.isSnakeCase,
+  [CONVENTIONS.PASCAL_CASE]: NamingUtils.isPascalCase,
+  [CONVENTIONS.KEBAB_CASE]: NamingUtils.isKebabCase,
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -32,7 +39,7 @@ module.exports = {
     fixable: null,
     schema: [
       {
-        enum: Object.values(CONEVNTIONS),
+        enum: Object.values(CONVENTIONS),
       },
     ],
     messages: {
@@ -45,14 +52,14 @@ module.exports = {
     const convention =
       context.options && context.options.length
         ? context.options[0]
-        : CONEVNTIONS.SNAKE_CASE;
+        : CONVENTIONS.SNAKE_CASE;
 
-    const checkNaminig = CONVENTION_CHECKERS[convention];
+    const checkNaming = CONVENTION_CHECKERS[convention];
 
     return {
       "*"(node) {
         const idAttr = NodeUtils.findAttr(node, "id");
-        if (idAttr && idAttr.value && !checkNaminig(idAttr.value)) {
+        if (idAttr && idAttr.value && !checkNaming(idAttr.value)) {
           context.report({
             node: idAttr,
             data: {

package/lib/rules/indent.js

@@ -1,7 +1,9 @@
-// @ts-check
 /**
- * @typedef {import("../types").HTMLNode} HTMLNode
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").ElementNode} ElementNode
  * @typedef {import("../types").AttrNode} AttrNode
+ * @typedef {import("../types").TagNode} TagNode
+ * @typedef {import("../types").AnyNode} AnyNode
  * @typedef {import("../types").BaseNode} BaseNode
  * @typedef {Object} IndentType
  * @property {"tab"} TAB
@@ -12,6 +14,7 @@
  */
 
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { NodeUtils } = require("./utils");
 
 /** @type {MessageId} */
 const MESSAGE_ID = {
@@ -31,6 +34,9 @@ const IGNORING_NODES = [
   NODE_TYPES.XMP,
 ];
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -60,7 +66,6 @@ module.exports = {
         "Expected indentation of {{expected}} but found {{actual}}.",
     },
   },
-
   create(context) {
     const sourceCode = context.getSourceCode();
     const indentLevel = new IndentLevel();
@@ -79,7 +84,7 @@ module.exports = {
 
     /**
      * @param {BaseNode} node
-     * @param {HTMLNode} [nodeToReport]
+     * @param {BaseNode} [nodeToReport]
      */
     function checkIndent(node, nodeToReport) {
       const codeBefore = getLineCodeBefore(node);
@@ -133,7 +138,7 @@ module.exports = {
     }
 
     /**
-     * @param {BaseNode} startTag
+     * @param {AnyNode} startTag
      */
     function checkEndOfStartTag(startTag) {
       const start = startTag.range[1] - 1;
@@ -160,7 +165,7 @@ module.exports = {
     let nodesToIgnoreChildren = [];
     return {
       /**
-       * @param {HTMLNode} node
+       * @param {ElementNode} node
        */
       "*"(node) {
         if (IGNORING_NODES.includes(node.type)) {
@@ -186,7 +191,11 @@ module.exports = {
           }
         });
 
-        if (node.lineNodes && node.lineNodes.length) {
+        if (
+          (NodeUtils.isTextNode(node) || NodeUtils.isCommentNode(node)) &&
+          node.lineNodes &&
+          node.lineNodes.length
+        ) {
           if (!node.startTag) {
             indentLevel.down();
           }
@@ -219,6 +228,9 @@ module.exports = {
 };
 
 function getIndentTypeAndSize(options) {
+  /**
+   * @type {IndentType['SPACE'] | IndentType['TAB']}
+   */
   let indentType = INDENT_TYPES.SPACE;
   let indentSize = 4;
   if (options.length) {

package/lib/rules/index.js

@@ -12,7 +12,7 @@ const indent = require("./indent");
 const requireLiContainer = require("./require-li-container");
 const quotes = require("./quotes");
 const idNamingConvention = require("./id-naming-convention");
-const noObsoluteTags = require("./no-obsolete-tags");
+const noObsoleteTags = require("./no-obsolete-tags");
 const requireClosingTags = require("./require-closing-tags");
 const requireMetaDescription = require("./require-meta-description");
 const requireFrameTitle = require("./require-frame-title");
@@ -21,6 +21,12 @@ const noPositiveTabindex = require("./no-positive-tabindex");
 const requireMetaViewport = require("./require-meta-viewport");
 const requireMetaCharset = require("./require-meta-charset");
 const noTargetBlank = require("./no-target-blank");
+const noDuplicateAttrs = require("./no-duplicate-attrs");
+const noAbstractRoles = require("./no-abstract-roles");
+const requireButtonType = require("./require-button-type");
+const noAriaHiddenBody = require("./no-aria-hidden-body");
+const noMultipleEmptyLines = require("./no-multiple-empty-lines");
+const noAccesskeyAttrs = require("./no-accesskey-attrs");
 
 module.exports = {
   "require-lang": requireLang,
@@ -37,7 +43,7 @@ module.exports = {
   indent: indent,
   quotes: quotes,
   "id-naming-convention": idNamingConvention,
-  "no-obsolete-tags": noObsoluteTags,
+  "no-obsolete-tags": noObsoleteTags,
   "require-closing-tags": requireClosingTags,
   "require-meta-description": requireMetaDescription,
   "require-frame-title": requireFrameTitle,
@@ -46,4 +52,10 @@ module.exports = {
   "require-meta-viewport": requireMetaViewport,
   "require-meta-charset": requireMetaCharset,
   "no-target-blank": noTargetBlank,
+  "no-duplicate-attrs": noDuplicateAttrs,
+  "no-abstract-roles": noAbstractRoles,
+  "require-button-type": requireButtonType,
+  "no-aria-hidden-body": noAriaHiddenBody,
+  "no-multiple-empty-lines": noMultipleEmptyLines,
+  "no-accesskey-attrs": noAccesskeyAttrs,
 };

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

@@ -0,0 +1,62 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { NodeUtils } = require("./utils");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+const ABSTRACT_ROLE_SET = new Set([
+  "command",
+  "composite",
+  "input",
+  "landmark",
+  "range",
+  "roletype",
+  "section",
+  "sectionhead",
+  "select",
+  "structure",
+  "widget",
+  "window",
+]);
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow to use of abstract roles",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected use of an abstract role.",
+    },
+  },
+
+  create(context) {
+    return {
+      "*"(node) {
+        const roleAttr = NodeUtils.findAttr(node, "role");
+        if (roleAttr) {
+          if (ABSTRACT_ROLE_SET.has(roleAttr.value)) {
+            context.report({
+              messageId: MESSAGE_IDS.UNEXPECTED,
+              node: roleAttr,
+            });
+          }
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,45 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { NodeUtils } = require("./utils");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow to use of accesskey attribute",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected use of accesskey attribute.",
+    },
+  },
+
+  create(context) {
+    return {
+      "*"(node) {
+        const accessKeyAttr = NodeUtils.findAttr(node, "accesskey");
+        if (accessKeyAttr) {
+          context.report({
+            node: accessKeyAttr,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,46 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { NodeUtils } = require("./utils");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description:
+        "Disallow to use aria-hidden attributes on the `body` element.",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected aria-hidden on body tag.",
+    },
+  },
+
+  create(context) {
+    return {
+      Body(node) {
+        const ariaHiddenAttr = NodeUtils.findAttr(node, "aria-hidden");
+        if (ariaHiddenAttr && ariaHiddenAttr.value !== "false") {
+          context.report({
+            node: ariaHiddenAttr,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  DUPLICATE_ATTRS: "duplicateAttrs",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow to use duplicate attributes",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: true,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.DUPLICATE_ATTRS]:
+        "The attribute '{{attrName}}' is duplicated.",
+    },
+  },
+
+  create(context) {
+    return {
+      "*"(node) {
+        if (Array.isArray(node.attrs)) {
+          const attrsSet = new Set();
+          node.attrs.forEach((attr) => {
+            if (attrsSet.has(attr.name)) {
+              context.report({
+                node: node.startTag,
+                data: {
+                  attrName: attr.name,
+                },
+                messageId: MESSAGE_IDS.DUPLICATE_ATTRS,
+              });
+            } else {
+              attrsSet.add(attr.name);
+            }
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -5,6 +9,9 @@ const MESSAGE_IDS = {
   DUPLICATE_ID: "duplicateId",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

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

@@ -1,11 +1,21 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").AttrNode} AttrNode
+ * @typedef {import("../types").TagNode} TagNode
+ * @typedef {import("../types").ElementNode} ElementNode
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
-  EXTRA_BETWEEN: "unexpectBetween",
-  EXTRA_AFTER: "unexpectAfter",
-  EXTRA_BEFORE: "unexpectBefore",
+  EXTRA_BETWEEN: "unexpectedBetween",
+  EXTRA_AFTER: "unexpectedAfter",
+  EXTRA_BEFORE: "unexpectedBefore",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -25,6 +35,9 @@ module.exports = {
     },
   },
   create(context) {
+    /**
+     * @param {AttrNode[]} attrs
+     */
     function checkExtraSpacesBetweenAttrs(attrs) {
       attrs.forEach((current, index, attrs) => {
         if (index >= attrs.length - 1) {
@@ -50,9 +63,13 @@ module.exports = {
         }
       });
     }
+    /**
+     * @param {TagNode} startTag
+     * @param {AttrNode} lastAttr
+     */
     function checkExtraSpaceAfter(startTag, lastAttr) {
       if (startTag.loc.end.line !== lastAttr.loc.end.line) {
-        // skip the attribute on the diffrent line with the start tag
+        // skip the attribute on the different line with the start tag
         return;
       }
       const spacesBetween = startTag.loc.end.column - lastAttr.loc.end.column;
@@ -72,9 +89,14 @@ module.exports = {
         });
       }
     }
+
+    /**
+     * @param {ElementNode} node
+     * @param {AttrNode} firstAttr
+     */
     function checkExtraSpaceBefore(node, firstAttr) {
       if (node.loc.start.line !== firstAttr.loc.start.line) {
-        // skip the attribute on the diffrent line with the start tag
+        // skip the attribute on the different line with the start tag
         return;
       }
       const nodeLength = node.tagName.length;

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

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -5,6 +9,9 @@ const MESSAGE_IDS = {
   INLINE_STYLE: "unexpectedInlineStyle",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",