@html-eslint/eslint-plugin 0.32.0 → 0.33.0

package/lib/rules/indent/indent.js

@@ -271,6 +271,7 @@ module.exports = {
         },
         OpenScriptTagStart: checkIndent,
         OpenScriptTagEnd: checkIndent,
+        CloseScriptTag: checkIndent,
         StyleTag(node) {
           indentLevel.indent(node);
         },
@@ -279,6 +280,7 @@ module.exports = {
         },
         OpenStyleTagStart: checkIndent,
         OpenStyleTagEnd: checkIndent,
+        CloseStyleTag: checkIndent,
         OpenTagStart: checkIndent,
         OpenTagEnd(node) {
           checkIndent(node);

package/lib/rules/index.js

@@ -43,6 +43,10 @@ const requireFormMethod = require("./require-form-method");
 const noHeadingInsideButton = require("./no-heading-inside-button");
 const noInvalidRole = require("./no-invalid-role");
 const noNestedInteractive = require("./no-nested-interactive");
+const maxElementDepth = require("./max-element-depth");
+const requireExplicitSize = require("./require-explicit-size");
+// import new rule here ↑
+// DO NOT REMOVE THIS COMMENT
 
 module.exports = {
   "require-lang": requireLang,
@@ -90,4 +94,8 @@ module.exports = {
   "sort-attrs": sortAttrs,
   "prefer-https": preferHttps,
   "require-input-label": requireInputLabel,
+  "max-element-depth": maxElementDepth,
+  "require-explicit-size": requireExplicitSize,
+  // export new rule here ↑
+  // DO NOT REMOVE THIS COMMENT
 };

package/lib/rules/max-element-depth.js

@@ -0,0 +1,96 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  MAX_DEPTH_EXCEEDED: "maxDepthExceeded",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Enforce element maximum depth",
+      category: RULE_CATEGORY.STYLE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          max: {
+            type: "integer",
+            minimum: 1,
+            default: 32,
+          },
+        },
+        required: ["max"],
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.MAX_DEPTH_EXCEEDED]:
+        "Expected the depth of nested elements to be <= {{needed}}, but found {{found}}",
+    },
+  },
+
+  create(context) {
+    const maxDepth =
+      context.options &&
+      context.options[0] &&
+      typeof context.options[0].max === "number"
+        ? context.options[0].max
+        : 32;
+
+    let depth = 0;
+
+    function resetDepth() {
+      depth = 0;
+    }
+
+    /**
+     *
+     * @param {Tag | ScriptTag | StyleTag} node
+     */
+    function increaseDepth(node) {
+      depth++;
+      if (depth > maxDepth) {
+        context.report({
+          node,
+          messageId: MESSAGE_IDS.MAX_DEPTH_EXCEEDED,
+          data: {
+            needed: maxDepth,
+            found: String(depth),
+          },
+        });
+      }
+    }
+
+    function decreaseDepth() {
+      depth--;
+    }
+
+    return createVisitors(context, {
+      Document: resetDepth,
+      "Document:exit": resetDepth,
+      Tag: increaseDepth,
+      "Tag:exit": decreaseDepth,
+      ScriptTag: increaseDepth,
+      "ScriptTag:exit": decreaseDepth,
+      StyleTag: increaseDepth,
+      "StyleTag:exit": decreaseDepth,
+    });
+  },
+};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -45,15 +45,15 @@
     "accessibility"
   ],
   "dependencies": {
-    "@html-eslint/template-parser": "^0.32.0"
+    "@html-eslint/template-parser": "^0.33.0"
   },
   "devDependencies": {
-    "@html-eslint/parser": "^0.32.0",
+    "@html-eslint/parser": "^0.33.0",
     "@types/eslint": "^9.6.1",
     "@types/estree": "^0.0.47",
     "es-html-parser": "^1.0.0-alpha.4",
     "espree": "^10.3.0",
     "typescript": "^5.7.2"
   },
-  "gitHead": "ae0860389c4463a3e259d0ccae38992db46a20e5"
+  "gitHead": "4a0ee932a671f8c54bf1a86849fe886e9628b777"
 }

package/types/rules/index.d.ts

@@ -44,6 +44,8 @@ declare const _exports: {
     "sort-attrs": import("../types").RuleModule;
     "prefer-https": import("../types").RuleModule;
     "require-input-label": import("../types").RuleModule;
+    "max-element-depth": import("../types").RuleModule;
+    "require-explicit-size": import("../types").RuleModule;
 };
 export = _exports;
 //# sourceMappingURL=index.d.ts.map

package/types/rules/max-element-depth.d.ts

@@ -0,0 +1,10 @@
+declare namespace _exports {
+    export { RuleModule, Tag, StyleTag, ScriptTag };
+}
+declare const _exports: RuleModule;
+export = _exports;
+type RuleModule = import("../types").RuleModule;
+type Tag = import("../types").Tag;
+type StyleTag = import("../types").StyleTag;
+type ScriptTag = import("../types").ScriptTag;
+//# sourceMappingURL=max-element-depth.d.ts.map

package/types/rules/max-element-depth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"max-element-depth.d.ts","sourceRoot":"","sources":["../../lib/rules/max-element-depth.js"],"names":[],"mappings":";;;wBAeU,UAAU;;kBAdN,OAAO,UAAU,EAAE,UAAU;WAC7B,OAAO,UAAU,EAAE,GAAG;gBACtB,OAAO,UAAU,EAAE,QAAQ;iBAC3B,OAAO,UAAU,EAAE,SAAS"}

package/types/rules/require-explicit-size.d.ts

@@ -0,0 +1,9 @@
+declare namespace _exports {
+    export { RuleModule, Tag, AnyNode };
+}
+declare const _exports: RuleModule;
+export = _exports;
+type RuleModule = import("../types").RuleModule;
+type Tag = import("../types").Tag;
+type AnyNode = import("../types").AnyNode;
+//# sourceMappingURL=require-explicit-size.d.ts.map

package/types/rules/require-explicit-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"require-explicit-size.d.ts","sourceRoot":"","sources":["../../lib/rules/require-explicit-size.js"],"names":[],"mappings":";;;wBAkBU,UAAU;;kBAjBN,OAAO,UAAU,EAAE,UAAU;WAC7B,OAAO,UAAU,EAAE,GAAG;eACtB,OAAO,UAAU,EAAE,OAAO"}