@html-eslint/eslint-plugin 0.12.0 → 0.13.0

package/lib/rules/indent.js

@@ -131,10 +131,15 @@ module.exports = {
     }
 
     /**
+     * @param {AnyNode} startTag
      * @param {AttrNode[]} attrs
      */
-    function checkAttrsIndent(attrs) {
-      attrs.forEach((attr) => checkIndent(attr));
+    function checkAttrsIndent(startTag, attrs) {
+      attrs.forEach((attr) => {
+        if (attr.loc.start.line !== startTag.loc.start.line) {
+          checkIndent(attr);
+        }
+      });
     }
 
     /**
@@ -146,6 +151,7 @@ module.exports = {
       const line = startTag.loc.end.line;
       const endCol = startTag.loc.end.column;
       const startCol = startTag.loc.end.column - 1;
+
       checkIndent({
         range: [start, end],
         start,
@@ -178,8 +184,8 @@ module.exports = {
 
         indentLevel.up();
 
-        if (Array.isArray(node.attrs)) {
-          checkAttrsIndent(node.attrs);
+        if (node.startTag && Array.isArray(node.attrs)) {
+          checkAttrsIndent(node.startTag, node.attrs);
         }
 
         (node.childNodes || []).forEach((current) => {

package/lib/rules/index.js

@@ -27,6 +27,7 @@ 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");
+const noRestrictedAttrs = require("./no-restricted-attrs");
 
 module.exports = {
   "require-lang": requireLang,
@@ -58,4 +59,5 @@ module.exports = {
   "no-aria-hidden-body": noAriaHiddenBody,
   "no-multiple-empty-lines": noMultipleEmptyLines,
   "no-accesskey-attrs": noAccesskeyAttrs,
+  "no-restricted-attrs": noRestrictedAttrs,
 };

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

@@ -66,13 +66,18 @@ module.exports = {
     /**
      * @param {TagNode} startTag
      * @param {AttrNode} lastAttr
+     * @param {boolean} isSelfClosed
      */
-    function checkExtraSpaceAfter(startTag, lastAttr) {
+    function checkExtraSpaceAfter(startTag, lastAttr, isSelfClosed) {
       if (startTag.loc.end.line !== lastAttr.loc.end.line) {
         // skip the attribute on the different line with the start tag
         return;
       }
-      const spacesBetween = startTag.loc.end.column - lastAttr.loc.end.column;
+      let spacesBetween = startTag.loc.end.column - lastAttr.loc.end.column;
+      if (isSelfClosed) {
+        spacesBetween--;
+      }
+
       if (spacesBetween > 1) {
         context.report({
           loc: {
@@ -83,7 +88,7 @@ module.exports = {
           fix(fixer) {
             return fixer.removeRange([
               lastAttr.range[1],
-              startTag.range[1] - 1,
+              lastAttr.range[1] + spacesBetween - 1,
             ]);
           },
         });
@@ -125,9 +130,11 @@ module.exports = {
           checkExtraSpaceBefore(node, node.attrs[0]);
         }
         if (node.startTag && node.attrs && node.attrs.length > 0) {
+          const isSelfClosed = !node.endTag;
           checkExtraSpaceAfter(
             node.startTag,
-            node.attrs[node.attrs.length - 1]
+            node.attrs[node.attrs.length - 1],
+            isSelfClosed
           );
         }
         checkExtraSpacesBetweenAttrs(node.attrs || []);

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

@@ -0,0 +1,140 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").AnyNode} AnyNode
+ * @typedef {{tagPatterns: string[], attrPatterns: 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: ["tagPatterns", "attrPatterns"],
+        properties: {
+          tagPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          attrPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          message: {
+            type: "string",
+          },
+        },
+      },
+    },
+    messages: {
+      [MESSAGE_IDS.RESTRICTED]: "'{{attr}}' is restricted from being used.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @type {Options}
+     */
+    const options = context.options;
+    const checkers = options.map((option) => new PatternChecker(option));
+
+    return {
+      "*"(node) {
+        const tagName = node.tagName;
+        const startTag = node.startTag;
+        if (!tagName || !startTag) return;
+        if (!node.attrs.length) return;
+
+        node.attrs.forEach((attr) => {
+          if (!attr.name) return;
+
+          const matched = checkers.find((checker) =>
+            checker.test(node.tagName, attr.name)
+          );
+
+          if (!matched) return;
+
+          /**
+           * @type {{node: AnyNode, message: string, messageId?: string}}
+           */
+
+          const result = {
+            node: startTag,
+            message: "",
+          };
+
+          const customMessage = matched.getMessage();
+
+          if (customMessage) {
+            result.message = customMessage;
+          } else {
+            result.messageId = MESSAGE_IDS.RESTRICTED;
+          }
+
+          context.report({
+            ...result,
+            data: { attr: attr.name },
+          });
+        });
+      },
+    };
+  },
+};
+
+class PatternChecker {
+  /**
+   * @param {Options[number]} option
+   */
+  constructor(option) {
+    this.option = option;
+    this.tagRegExps = option.tagPatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+    this.attrRegExps = option.attrPatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+    this.message = option.message;
+  }
+
+  /**
+   * @param {string} tagName
+   * @param {string} attrName
+   * @returns {boolean}
+   */
+  test(tagName, attrName) {
+    const result =
+      this.tagRegExps.some((exp) => exp.test(tagName)) &&
+      this.attrRegExps.some((exp) => exp.test(attrName));
+    return result;
+  }
+
+  /**
+   * @returns {string}
+   */
+  getMessage() {
+    return this.message || "";
+  }
+}

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

@@ -57,6 +57,16 @@ module.exports = {
 
     function checkClosingTag(node) {
       if (node.startTag && !node.endTag) {
+        if (
+          node.namespaceURI === "http://www.w3.org/2000/svg" ||
+          node.namespaceURI === "http://www.w3.org/1998/Math/MathML"
+        ) {
+          const code = getCodeIn(node.startTag.range);
+          const hasSelfClose = code.endsWith("/>");
+          if (hasSelfClose) {
+            return;
+          }
+        }
         context.report({
           node: node.startTag,
           data: {
@@ -67,7 +77,7 @@ module.exports = {
       }
     }
 
-    function checkSelfClosing(node) {
+    function checkVoidElement(node) {
       const startTag = node.startTag;
       const code = getCodeIn(startTag.range);
       const hasSelfClose = code.endsWith("/>");
@@ -108,7 +118,7 @@ module.exports = {
       "*"(node) {
         if (node.startTag) {
           if (VOID_ELEMENTS_SET.has(node.tagName)) {
-            checkSelfClosing(node);
+            checkVoidElement(node);
           } else {
             checkClosingTag(node);
           }

package/lib/types.d.ts

@@ -96,6 +96,7 @@ export interface ElementNode extends BaseNode {
   childNodes: ElementNode[];
   startTag?: TagNode;
   endTag?: TagNode;
+  namespaceURI?: string;
 }
 
 export interface AttrNode extends BaseNode {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -40,10 +40,10 @@
     "accessibility"
   ],
   "devDependencies": {
-    "@html-eslint/parser": "^0.12.0",
+    "@html-eslint/parser": "^0.13.0",
     "@types/eslint": "^7.2.10",
     "@types/estree": "^0.0.47",
     "typescript": "^4.4.4"
   },
-  "gitHead": "855dba9201bb8e00c6bc79676282bf38b0a76ea7"
+  "gitHead": "d7acca5d9d0517cc44085901e71e57e81704bcb7"
 }