@html-eslint/eslint-plugin 0.19.1 → 0.21.0

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

@@ -0,0 +1,147 @@
+/**
+ * @typedef {{attrPatterns: string[], attrValuePatterns: string[], message?: string}[]} Options
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  RESTRICTED: "restricted",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow specified attributes",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: {
+      type: "array",
+
+      items: {
+        type: "object",
+        required: ["attrPatterns", "attrValuePatterns"],
+        properties: {
+          attrPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          attrValuePatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          message: {
+            type: "string",
+          },
+        },
+      },
+    },
+    messages: {
+      [MESSAGE_IDS.RESTRICTED]:
+        "'{{attrValuePatterns}}' is restricted from being used.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @type {Options}
+     */
+    const options = context.options;
+    const checkers = options.map((option) => new PatternChecker(option));
+
+    return {
+      /**
+       * @param {TagNode | StyleTagNode | ScriptTagNode} node
+       */
+      [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
+        node.attributes.forEach((attr) => {
+          if (
+            !attr.key ||
+            !attr.key.value ||
+            !attr.value ||
+            typeof attr.value.value !== "string"
+          ) {
+            return;
+          }
+
+          const matched = checkers.find(
+            (checker) =>
+              attr.value && checker.test(attr.key.value, attr.value.value)
+          );
+
+          if (!matched) {
+            return;
+          }
+
+          /**
+           * @type {{node: AttributeNode, message: string, messageId?: string}}
+           */
+          const result = {
+            node: attr,
+            message: "",
+          };
+
+          const customMessage = matched.getMessage();
+
+          if (customMessage) {
+            result.message = customMessage;
+          } else {
+            result.messageId = MESSAGE_IDS.RESTRICTED;
+          }
+
+          context.report({
+            ...result,
+            data: { attrValuePatterns: attr.value.value },
+          });
+        });
+      },
+    };
+  },
+};
+
+class PatternChecker {
+  /**
+   * @param {Options[number]} option
+   */
+  constructor(option) {
+    this.option = option;
+    this.attrRegExps = option.attrPatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+
+    this.valueRegExps = option.attrValuePatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+    this.message = option.message;
+  }
+
+  /**
+   * @param {string} attrName
+   * @param {string} attrValue
+   * @returns {boolean}
+   */
+  test(attrName, attrValue) {
+    const result =
+      this.attrRegExps.some((exp) => exp.test(attrName)) &&
+      this.valueRegExps.some((exp) => exp.test(attrValue));
+    return result;
+  }
+
+  /**
+   * @returns {string}
+   */
+  getMessage() {
+    return this.message || "";
+  }
+}

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

@@ -1,8 +1,8 @@
 /**
- * @typedef {import("../types").Rule} Rule
  * @typedef {{tagPatterns: string[], attrPatterns: string[], message?: string}[]} Options
  */
 
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -61,8 +61,16 @@ module.exports = {
     const checkers = options.map((option) => new PatternChecker(option));
 
     return {
+      /**
+       * @param {TagNode | StyleTagNode | ScriptTagNode} node
+       */
       [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        const tagName = node.name;
+        const tagName =
+          node.type === NODE_TYPES.Tag
+            ? node.name
+            : node.type === NODE_TYPES.ScriptTag
+            ? "script"
+            : "style";
         node.attributes.forEach((attr) => {
           if (!attr.key || !attr.key.value) {
             return;
@@ -75,6 +83,9 @@ module.exports = {
             return;
           }
 
+          /**
+           * @type {{node: AttributeNode, message: string, messageId?: string}}
+           */
           const result = {
             node: attr,
             message: "",

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

@@ -0,0 +1,69 @@
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+
+const MESSAGE_IDS = {
+  UNNECESSARY: "unnecessary",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description:
+        "Enforce to omit type attributes for style sheets and scripts",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+
+    fixable: "code",
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNNECESSARY]: "Unnecessary type attributes",
+    },
+  },
+
+  create(context) {
+    /**
+     *
+     * @param {ScriptTagNode | TagNode | StyleTagNode} node
+     * @param {string} unnecessaryValue
+     */
+    function check(node, unnecessaryValue) {
+      const type = findAttr(node, "type");
+      if (
+        type &&
+        type.value &&
+        type.value.value &&
+        type.value.value.trim().toLocaleLowerCase() === unnecessaryValue
+      ) {
+        context.report({
+          node: type,
+          messageId: MESSAGE_IDS.UNNECESSARY,
+          fix(fixer) {
+            return fixer.remove(type);
+          },
+        });
+      }
+    }
+    return {
+      ScriptTag(node) {
+        check(node, "text/javascript");
+      },
+      StyleTag(node) {
+        check(node, "text/css");
+      },
+      Tag(node) {
+        if (node.name === "link") {
+          const rel = findAttr(node, "rel");
+          if (rel && rel.value && rel.value.value === "stylesheet") {
+            check(node, "text/css");
+          }
+        }
+      },
+    };
+  },
+};

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

@@ -1,7 +1,3 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -30,6 +26,9 @@ module.exports = {
   },
 
   create(context) {
+    /**
+     * @type {{node: TagNode; level: number}[]}
+     */
     const headings = [];
 
     return {
@@ -53,7 +52,7 @@ module.exports = {
             if (next.level - current.level > 1) {
               context.report({
                 node: next.node,
-                data: { expected: current.level + 1 },
+                data: { expected: String(current.level + 1) },
                 messageId: MESSAGE_IDS.UNEXPECTED,
               });
             }

package/lib/rules/no-target-blank.js

@@ -1,9 +1,5 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -43,12 +39,12 @@ module.exports = {
         if (node.name !== "a") {
           return;
         }
-        /* eslint-disable */
-        const target = NodeUtils.findAttr(node, "target");
+
+        const target = findAttr(node, "target");
         if (target && target.value && target.value.value === "_blank") {
-          const href = NodeUtils.findAttr(node, "href");
+          const href = findAttr(node, "href");
           if (href && href.value && isExternalLink(href.value.value)) {
-            const rel = NodeUtils.findAttr(node, "rel");
+            const rel = findAttr(node, "rel");
             if (!rel || !rel.value || !rel.value.value.includes("noreferrer")) {
               context.report({
                 node: target,

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

@@ -1,7 +1,3 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {

package/lib/rules/quotes.js

@@ -12,6 +12,9 @@ const QUOTES_STYLES = {
 
 const QUOTES_CODES = [`"`, `'`];
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -53,10 +56,20 @@ module.exports = {
       return sourceCode.text.slice(range[0], range[1]);
     }
 
+    /**
+     *
+     * @param {AttributeNode} attr
+     * @returns {[string, string]}
+     */
     function getQuotes(attr) {
+      // @ts-ignore
       return [attr.startWrapper.value, attr.endWrapper.value];
     }
 
+    /**
+     * @param {AttributeNode} attr
+     * @returns {void}
+     */
     function checkQuotes(attr) {
       if (!attr.value || attr.value.value.includes(expectedQuote)) {
         return;
@@ -77,6 +90,12 @@ module.exports = {
                     : `${QUOTES_STYLES.SINGLE}(')`,
               },
               fix(fixer) {
+                if (
+                  !attr.startWrapper ||
+                  !attr.endWrapper ||
+                  attr.value === undefined
+                )
+                  return null;
                 return fixer.replaceTextRange(
                   [attr.startWrapper.range[0], attr.endWrapper.range[1]],
                   `${expectedQuote}${attr.value.value}${expectedQuote}`
@@ -93,6 +112,7 @@ module.exports = {
             expected: `${SELECTED_STYLE}(${expectedQuote})`,
           },
           fix(fixer) {
+            if (attr.value === undefined) return null;
             const originCode = getCodeIn(attr.value.range);
             return fixer.replaceTextRange(
               attr.value.range,
@@ -104,8 +124,11 @@ module.exports = {
     }
 
     return {
+      /**
+       * @param {TagNode | ScriptTagNode | StyleTagNode} node
+       */
       [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        node.attributes.forEach(checkQuotes);
+        node.attributes.forEach((attr) => checkQuotes(attr));
       },
     };
   },

package/lib/rules/require-attrs.js

@@ -1,7 +1,4 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -44,19 +41,29 @@ module.exports = {
 
   create(context) {
     const options = context.options || [];
+    /**
+     * @type {Map<string, { tag: string, attr: string, value?: string}[]>}
+     */
     const tagOptionsMap = new Map();
 
     options.forEach((option) => {
       const tagName = option.tag.toLowerCase();
       if (tagOptionsMap.has(tagName)) {
-        tagOptionsMap.set(tagName, [...tagOptionsMap.get(tagName), option]);
+        tagOptionsMap.set(tagName, [
+          ...(tagOptionsMap.get(tagName) || []),
+          option,
+        ]);
       } else {
         tagOptionsMap.set(tagName, [option]);
       }
     });
 
+    /**
+     * @param {StyleTagNode | ScriptTagNode | TagNode} node
+     * @param {string} tagName
+     */
     function check(node, tagName) {
-      const tagOptions = tagOptionsMap.get(tagName);
+      const tagOptions = tagOptionsMap.get(tagName) || [];
       const attributes = node.attributes || [];
 
       tagOptions.forEach((option) => {
@@ -90,8 +97,12 @@ module.exports = {
     }
 
     return {
+      /**
+       * @param {StyleTagNode | ScriptTagNode} node
+       * @returns
+       */
       [["StyleTag", "ScriptTag"].join(",")](node) {
-        const tagName = node.type === "StyleTag" ? "style" : "script";
+        const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
         if (!tagOptionsMap.has(tagName)) {
           return;
         }

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

@@ -1,9 +1,5 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -40,7 +36,7 @@ module.exports = {
         if (node.name !== "button") {
           return;
         }
-        const typeAttr = NodeUtils.findAttr(node, "type");
+        const typeAttr = findAttr(node, "type");
         if (!typeAttr || !typeAttr.value) {
           context.report({
             node: node.openStart,

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

@@ -1,7 +1,3 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY, VOID_ELEMENTS } = require("../constants");
 
 const VOID_ELEMENTS_SET = new Set(VOID_ELEMENTS);
@@ -44,7 +40,6 @@ module.exports = {
       [MESSAGE_IDS.MISSING]: "Missing closing tag for {{tag}}.",
       [MESSAGE_IDS.MISSING_SELF]: "Missing self closing tag for {{tag}}",
       [MESSAGE_IDS.UNEXPECTED]: "Unexpected self closing tag for {{tag}}.",
-      [MESSAGE_IDS.HUCKS]: "HUCKS.",
     },
   },
 
@@ -58,6 +53,9 @@ module.exports = {
         ? context.options[0].allowSelfClosingCustom === true
         : false;
 
+    /**
+     * @param {TagNode} node
+     */
     function checkClosingTag(node) {
       if (!node.close) {
         context.report({
@@ -70,6 +68,11 @@ module.exports = {
       }
     }
 
+    /**
+     * @param {TagNode} node
+     * @param {boolean} shouldSelfClose
+     * @param {boolean} fixable
+     */
     function checkVoidElement(node, shouldSelfClose, fixable) {
       const hasSelfClose = node.openEnd.value === "/>";
       if (shouldSelfClose && !hasSelfClose) {

package/lib/rules/require-doctype.js

@@ -1,7 +1,3 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -34,7 +30,10 @@ module.exports = {
       Doctype() {
         hasDocType = true;
       },
-      "Program:exit"(node) {
+      Tag(node) {
+        if (node.name !== "html") {
+          return;
+        }
         if (!hasDocType) {
           context.report({
             node,

package/lib/rules/require-frame-title.js

@@ -1,11 +1,14 @@
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
   UNEXPECTED: "unexpected",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -30,7 +33,7 @@ module.exports = {
         if (node.name !== "frame" && node.name !== "iframe") {
           return;
         }
-        const title = NodeUtils.findAttr(node, "title");
+        const title = findAttr(node, "title");
         if (!title) {
           context.report({
             node: node.openStart,

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

@@ -4,6 +4,9 @@ const MESSAGE_IDS = {
   MISSING_ALT: "missingAlt",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -62,6 +65,12 @@ module.exports = {
   },
 };
 
+/**
+ *
+ * @param {TagNode} node
+ * @param {string[]} substitute
+ * @returns
+ */
 function hasAltAttrAndValue(node, substitute = []) {
   return node.attributes.some((attr) => {
     if (attr.key && attr.value) {
@@ -70,5 +79,6 @@ function hasAltAttrAndValue(node, substitute = []) {
         typeof attr.value.value === "string"
       );
     }
+    return false;
   });
 }

package/lib/rules/require-lang.js

@@ -1,15 +1,14 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
   EMPTY: "empty",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -34,7 +33,7 @@ module.exports = {
         if (node.name !== "html") {
           return;
         }
-        const langAttr = NodeUtils.findAttr(node, "lang");
+        const langAttr = findAttr(node, "lang");
         if (!langAttr) {
           context.report({
             node: {

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

@@ -1,3 +1,4 @@
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -6,6 +7,9 @@ const MESSAGE_IDS = {
 
 const VALID_CONTAINERS = ["ul", "ol", "menu"];
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -30,12 +34,15 @@ module.exports = {
         if (node.name !== "li") {
           return;
         }
-        if (!node.parent) {
+        if (!node.parent || node.parent.type === NODE_TYPES.Program) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,
           });
-        } else if (!VALID_CONTAINERS.includes(node.parent.name || "")) {
+        } else if (
+          node.parent.type === NODE_TYPES.Tag &&
+          !VALID_CONTAINERS.includes(node.parent.name || "")
+        ) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,

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

@@ -1,15 +1,25 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { find } = require("./utils/array");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
   EMPTY: "empty",
 };
 
+/**
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
+ */
+function isMetaCharset(node) {
+  return (
+    node.type === NODE_TYPES.Tag &&
+    node.name === "meta" &&
+    !!findAttr(node, "charset")
+  );
+}
+
 /**
  * @type {Rule}
  */
@@ -38,13 +48,7 @@ module.exports = {
           return;
         }
 
-        const metaCharset = node.children.find((child) => {
-          return (
-            child.type === "Tag" &&
-            child.name === "meta" &&
-            !!NodeUtils.findAttr(child, "charset")
-          );
-        });
+        const metaCharset = find(node.children, isMetaCharset);
 
         if (!metaCharset) {
           context.report({
@@ -53,7 +57,9 @@ module.exports = {
           });
           return;
         }
-        const charsetAttr = NodeUtils.findAttr(metaCharset, "charset");
+
+        const charsetAttr = findAttr(metaCharset, "charset");
+
         if (charsetAttr) {
           if (!charsetAttr.value || !charsetAttr.value.value.length) {
             context.report({