@html-eslint/eslint-plugin 0.12.0 → 0.13.2

package/lib/rules/indent.js

@@ -12,7 +12,6 @@
  * @typedef {Object} MessageId
  * @property {"wrongIndent"} WRONG_INDENT
  */
-
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -68,18 +67,33 @@ module.exports = {
   },
   create(context) {
     const sourceCode = context.getSourceCode();
+
     const indentLevel = new IndentLevel();
     const { indentType, indentSize } = getIndentTypeAndSize(context.options);
     const indentUnit =
       indentType === INDENT_TYPES.SPACE ? " ".repeat(indentSize) : "\t";
 
+    /**
+     * @param {string} str
+     */
+    function countIndentSize(str) {
+      return str.length - str.replace(/^[\s\t]+/, "").length;
+    }
+
     /**
      * @param {BaseNode} node
      */
     function getLineCodeBefore(node) {
-      return sourceCode.text
-        .slice(node.range[0] - node.loc.start.column, node.range[0])
-        .replace("\n", "");
+      const lines = sourceCode.getLines();
+      const line = lines[node.loc.start.line - 1];
+      let end = node.loc.start.column;
+      // @ts-ignore
+      if (typeof node.textLine === "string") {
+        // @ts-ignore
+        end += countIndentSize(node.textLine);
+      }
+
+      return line.slice(0, end);
     }
 
     /**
@@ -120,10 +134,13 @@ module.exports = {
               actual,
             },
             fix(fixer) {
-              return fixer.replaceTextRange(
-                [node.range[0] - (node.loc.start.column - 1), node.range[0]],
-                expectedIndent
-              );
+              const start = node.range[0] - node.loc.start.column;
+              let end = node.range[0];
+              // @ts-ignore
+              if (node.textLine) {
+                end += codeBefore.length;
+              }
+              return fixer.replaceTextRange([start, end], expectedIndent);
             },
           });
         }
@@ -131,14 +148,19 @@ 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);
+        }
+      });
     }
 
     /**
-     * @param {AnyNode} startTag
+     * @param {BaseNode} startTag
      */
     function checkEndOfStartTag(startTag) {
       const start = startTag.range[1] - 1;
@@ -146,6 +168,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 +201,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) => {
@@ -201,7 +224,7 @@ module.exports = {
           }
           node.lineNodes.forEach((lineNode) => {
             if (lineNode.textLine.trim().length) {
-              checkIndent(lineNode, node);
+              checkIndent(lineNode);
             }
           });
           if (!node.startTag) {

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/quotes.js

@@ -96,6 +96,10 @@ module.exports = {
      * @param {AttrNode} attr
      */
     function checkQuotes(attr) {
+      if (attr.value.includes(expectedQuote)) {
+        return;
+      }
+
       const [opening, closing] = getQuotes(attr);
       if (QUOTES_CODES.includes(opening)) {
         if (opening === closing && opening !== expectedQuote) {

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/rules/require-meta-charset.js

@@ -16,7 +16,7 @@ module.exports = {
     type: "code",
 
     docs: {
-      description: 'Enforce to use `<meta name="chartset">` in `<head>`',
+      description: 'Enforce to use `<meta charset="...">` in `<head>`',
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
     },
@@ -24,7 +24,7 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      [MESSAGE_IDS.MISSING]: 'Missing `<meta name="description">`.',
+      [MESSAGE_IDS.MISSING]: 'Missing `<meta charset="...">`.',
       [MESSAGE_IDS.EMPTY]: "Unexpected empty charset.",
     },
   },

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.2",
   "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.2",
     "@types/eslint": "^7.2.10",
     "@types/estree": "^0.0.47",
     "typescript": "^4.4.4"
   },
-  "gitHead": "855dba9201bb8e00c6bc79676282bf38b0a76ea7"
+  "gitHead": "3f1599284d5725db38e0984ecdcd283a76a530fa"
 }