@html-eslint/eslint-plugin 0.31.1 → 0.33.0

package/lib/rules/no-script-style-type.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -37,7 +37,7 @@ module.exports = {
   create(context) {
     /**
      *
-     * @param {ScriptTagNode | TagNode | StyleTagNode} node
+     * @param {ScriptTag | Tag | StyleTag} node
      * @param {string} unnecessaryValue
      */
     function check(node, unnecessaryValue) {

package/lib/rules/no-skip-heading-levels.js

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -32,7 +32,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @type {{node: TagNode; level: number}[]}
+     * @type {{node: Tag; level: number}[]}
      */
     const headings = [];
 

package/lib/rules/no-trailing-spaces.js

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").CommentContentNode } CommentContentNode
- * @typedef { import("es-html-parser").TextNode } TextNode
+ * @typedef { import("../types").CommentContent } CommentContent
+ * @typedef { import("../types").Text } Text
  */
 
 const { parse } = require("@html-eslint/template-parser");
@@ -45,7 +45,7 @@ module.exports = {
      * @param {string} source
      * @param {string[]} lines
      * @param {number} rangeOffset
-     * @param {((CommentContentNode | TextNode)['templates'][number])[]} tokens
+     * @param {((CommentContent | Text)['templates'][number])[]} tokens
      */
     function check(source, lines, rangeOffset, tokens) {
       let rangeIndex = rangeOffset;

package/lib/rules/prefer-https.js

@@ -0,0 +1,106 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").AttributeValue } AttributeValue
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr, isScript } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/**
+ * @param {string} url
+ */
+function getProtocol(url) {
+  try {
+    return new URL(url).protocol;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @returns {AttributeValue | undefined}
+ */
+function getResourceAttributeValue(node) {
+  /**
+   * @type {Attribute | undefined}
+   */
+  let attribute;
+  if (isScript(node)) {
+    attribute = findAttr(node, "src");
+  } else {
+    switch (node.name.toLowerCase()) {
+      case "img":
+      case "iframe":
+      case "audio":
+      case "video":
+      case "source":
+      case "embed": {
+        attribute = findAttr(node, "src");
+        break;
+      }
+      case "link": {
+        attribute = findAttr(node, "href");
+        break;
+      }
+      case "object": {
+        attribute = findAttr(node, "data");
+        break;
+      }
+    }
+  }
+  if (attribute) {
+    return attribute.value;
+  }
+  return undefined;
+}
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Prefer to use HTTPS for embedded resources",
+      recommended: false,
+      category: RULE_CATEGORY.BEST_PRACTICE,
+    },
+    fixable: false,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected use 'HTTP' protocol.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @param {Tag | ScriptTag} node
+     */
+    function check(node) {
+      const attributeValue = getResourceAttributeValue(node);
+      if (attributeValue && !attributeValue.templates.length) {
+        const protocol = getProtocol(attributeValue.value);
+        if (protocol === "http:") {
+          context.report({
+            node: attributeValue,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      }
+    }
+
+    return createVisitors(context, {
+      ScriptTag: check,
+      Tag: check,
+    });
+  },
+};

package/lib/rules/quotes.js

@@ -1,10 +1,10 @@
 /**
+ * @typedef { import("eslint").AST.Range } Range
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").Range } Range
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -68,7 +68,7 @@ module.exports = {
 
     /**
      *
-     * @param {AttributeNode} attr
+     * @param {Attribute} attr
      * @returns {[string, string]}
      */
     function getQuotes(attr) {
@@ -77,7 +77,7 @@ module.exports = {
     }
 
     /**
-     * @param {AttributeNode} attr
+     * @param {Attribute} attr
      * @returns {void}
      */
     function checkQuotes(attr) {
@@ -133,7 +133,7 @@ module.exports = {
       }
     }
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function check(node) {
       node.attributes.forEach((attr) => checkQuotes(attr));

package/lib/rules/require-attrs.js

@@ -1,8 +1,13 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
+ *
+ * @typedef {Object} Option
+ * @property {string} tag
+ * @property {string} attr
+ * @property {string | undefined} value
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -48,6 +53,9 @@ module.exports = {
   },
 
   create(context) {
+    /**
+     * @type {Option[]}
+     */
     const options = context.options || [];
     /**
      * @type {Map<string, { tag: string, attr: string, value?: string}[]>}
@@ -67,7 +75,7 @@ module.exports = {
     });
 
     /**
-     * @param {StyleTagNode | ScriptTagNode | TagNode} node
+     * @param {StyleTag | ScriptTag | Tag} node
      * @param {string} tagName
      */
     function check(node, tagName) {
@@ -105,7 +113,7 @@ module.exports = {
     }
 
     /**
-     * @param {StyleTagNode | ScriptTagNode} node
+     * @param {StyleTag | ScriptTag} node
      */
     function checkStyleOrScript(node) {
       const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
@@ -116,7 +124,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      */
     function checkTag(node) {
       const tagName = node.name.toLowerCase();

package/lib/rules/require-closing-tags.js

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY, VOID_ELEMENTS } = require("../constants");
@@ -70,7 +70,7 @@ module.exports = {
     );
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      */
     function checkClosingTag(node) {
       if (!node.close) {
@@ -85,7 +85,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      * @param {boolean} shouldSelfClose
      * @param {boolean} fixable
      */
@@ -150,7 +150,7 @@ module.exports = {
         if (["svg", "math"].includes(node.name)) foreignContext.push(node.name);
       },
       /**
-       * @param {TagNode} node
+       * @param {Tag} node
        */
       "Tag:exit"(node) {
         if (node.name === foreignContext[foreignContext.length - 1]) {

package/lib/rules/require-explicit-size.js

@@ -0,0 +1,122 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  MISSING_HEIGHT: "missingHeight",
+  MISSING_WIDTH: "missingWidth",
+};
+
+const TARGET_ELEMENTS = ["img", "iframe"];
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description:
+        "Enforces that some elements (img, iframe) have explicitly defined width and height attributes.",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowClass: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          allowId: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.MISSING_HEIGHT]: "Missing `width` attribute for <{{name}}>",
+      [MESSAGE_IDS.MISSING_WIDTH]: "Missing `height` attribute for <{{name}}>",
+    },
+  },
+
+  create(context) {
+    const allowClass =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].allowClass) ||
+      [];
+    const allowId =
+      (context.options && context.options[0] && context.options[0].allowId) ||
+      [];
+
+    const allowClassSet = new Set(allowClass);
+    const allowIdSet = new Set(allowId);
+    return createVisitors(context, {
+      Tag(node) {
+        if (
+          !TARGET_ELEMENTS.some(
+            (element) => element === node.name.toLowerCase()
+          )
+        ) {
+          return;
+        }
+        const classAttr = findAttr(node, "class");
+        if (
+          classAttr &&
+          classAttr.value &&
+          classAttr.value.value.split(" ").some((cls) => allowClassSet.has(cls))
+        ) {
+          return;
+        }
+        const idAttr = findAttr(node, "id");
+        if (
+          idAttr &&
+          idAttr.value &&
+          idAttr.value.value.split(" ").some((id) => allowIdSet.has(id))
+        ) {
+          return;
+        }
+
+        const width = findAttr(node, "width");
+        const height = findAttr(node, "height");
+
+        if (!height || !height.value) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING_HEIGHT,
+            data: {
+              name: node.name,
+            },
+          });
+        }
+
+        if (!width || !width.value) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING_WIDTH,
+            data: {
+              name: node.name,
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/require-form-method.js

@@ -0,0 +1,81 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  MISSING: "missing",
+  MISSING_VALUE: "missingValue",
+  UNEXPECTED: "unexpected",
+};
+
+const ALLOWED_METHODS = new Set(["GET", "POST", "DIALOG"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Require `method` attribute in `<form>`",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: false,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.MISSING]: "The 'method' attribute is missing on the <form>.",
+      [MESSAGE_IDS.MISSING_VALUE]:
+        "The 'method' attribute value is missing on the <form>",
+      [MESSAGE_IDS.UNEXPECTED]:
+        "The 'method' attribute has an invalid value on the <form>.",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (node.name.toLowerCase() !== "form") {
+          return;
+        }
+        const method = findAttr(node, "method");
+
+        if (!method) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING,
+          });
+          return;
+        }
+
+        if (!method.value) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING_VALUE,
+          });
+          return;
+        }
+
+        if (
+          method.value.templates &&
+          method.value.templates.some((template) => template.isTemplate)
+        ) {
+          return;
+        }
+
+        if (!ALLOWED_METHODS.has(method.value.value.toUpperCase())) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    });
+  },
+};

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

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -72,8 +72,7 @@ module.exports = {
 };
 
 /**
- *
- * @param {TagNode} node
+ * @param {Tag} node
  * @param {string[]} substitute
  * @returns
  */

package/lib/rules/require-input-label.js

@@ -0,0 +1,77 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+const { findParent, isTag } = require("./utils/node");
+
+const MESSAGE_IDS = {
+  MISSING: "missingLabel",
+};
+
+const INPUT_TAGS = new Set(["input", "textarea", "select"]);
+
+const LABEL_ATTRIBUTES = new Set(["id", "aria-labelledby", "aria-label"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description:
+        "Enforces use of label for form elements(`input`, `textarea`, `select`)",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.MISSING]: "Missing an associated label",
+    },
+  },
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (!INPUT_TAGS.has(node.name.toLowerCase())) {
+          return;
+        }
+
+        for (const attr of node.attributes) {
+          if (
+            LABEL_ATTRIBUTES.has(attr.key.value.toLowerCase()) &&
+            attr.value &&
+            attr.value.value
+          ) {
+            return;
+          }
+
+          if (
+            attr.key.value.toLowerCase() === "type" &&
+            attr.value &&
+            attr.value.value === "hidden"
+          ) {
+            return;
+          }
+        }
+
+        const label = findParent(node, (parent) => {
+          return isTag(parent) && parent.name.toLowerCase() === "label";
+        });
+
+        if (label) {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: "missingLabel",
+        });
+      },
+    });
+  },
+};

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -15,7 +15,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaCharset(node) {
   return isTag(node) && node.name === "meta" && !!findAttr(node, "charset");

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 const { RULE_CATEGORY } = require("../constants");
 const { filter } = require("./utils/array");
@@ -14,7 +14,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaTagNode(node) {
   return isTag(node) && node.name === "meta";

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -15,7 +15,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaViewport(node) {
   if (isTag(node) && node.name === "meta") {

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- *  @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ *  @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -71,7 +71,7 @@ module.exports = {
 
     /**
      * @param {AnyNode} node
-     * @returns {node is TagNode}
+     * @returns {node is Tag}
      */
     function isOgpMeta(node) {
       const isMeta = isTag(node) && node.name === "meta";