@html-eslint/eslint-plugin 0.24.1 → 0.25.0

package/lib/configs/recommended.js

@@ -6,6 +6,7 @@ module.exports = {
     "@html-eslint/require-title": "error",
     "@html-eslint/no-multiple-h1": "error",
     "@html-eslint/no-extra-spacing-attrs": "error",
+    "@html-eslint/attrs-newline": "error",
     "@html-eslint/element-newline": "error",
     "@html-eslint/no-duplicate-id": "error",
     "@html-eslint/indent": "error",

package/lib/rules/attrs-newline.js

@@ -0,0 +1,163 @@
+/**
+ * @typedef { import("../types").RuleFixer } RuleFixer
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").TagNode } TagNode
+ * @typedef {Object} MessageId
+ * @property {"closeStyleWrong"} CLOSE_STYLE_WRONG
+ * @property {"newlineMissing"} NEWLINE_MISSING
+ * @property {"newlineUnexpected"} NEWLINE_UNEXPECTED
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+/**
+ * @type {MessageId}
+ */
+
+const MESSAGE_ID = {
+  CLOSE_STYLE_WRONG: "closeStyleWrong",
+  NEWLINE_MISSING: "newlineMissing",
+  NEWLINE_UNEXPECTED: "newlineUnexpected",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Enforce newline between attributes",
+      category: RULE_CATEGORY.STYLE,
+      recommended: true,
+    },
+
+    fixable: true,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          closeStyle: {
+            enum: ["newline", "sameline"],
+          },
+          ifAttrsMoreThan: {
+            type: "integer",
+          },
+        },
+      },
+    ],
+    messages: {
+      [MESSAGE_ID.CLOSE_STYLE_WRONG]:
+        "Closing bracket was on {{actual}}; expected {{expected}}",
+      [MESSAGE_ID.NEWLINE_MISSING]: "Newline expected before {{attrName}}",
+      [MESSAGE_ID.NEWLINE_UNEXPECTED]:
+        "Newlines not expected between attributes, since this tag has fewer than {{attrMin}} attributes",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const attrMin = isNaN(options.ifAttrsMoreThan)
+      ? 2
+      : options.ifAttrsMoreThan;
+    const closeStyle = options.closeStyle || "newline";
+
+    return {
+      /**
+       * @param {TagNode} node
+       */
+      Tag(node) {
+        const shouldBeMultiline = node.attributes.length > attrMin;
+
+        /**
+         * This doesn't do any indentation, so the result will look silly. Indentation should be covered by the `indent` rule
+         * @param {RuleFixer} fixer
+         */
+        function fix(fixer) {
+          const spacer = shouldBeMultiline ? "\n" : " ";
+          let expected = node.openStart.value;
+          for (const attr of node.attributes) {
+            expected += `${spacer}${attr.key.value}`;
+            if (attr.startWrapper && attr.value && attr.endWrapper) {
+              expected += `=${attr.startWrapper.value}${attr.value.value}${attr.endWrapper.value}`;
+            }
+          }
+          if (shouldBeMultiline && closeStyle === "newline") {
+            expected += "\n";
+          } else if (node.selfClosing) {
+            expected += " ";
+          }
+          expected += node.openEnd.value;
+
+          return fixer.replaceTextRange(
+            [node.openStart.range[0], node.openEnd.range[1]],
+            expected
+          );
+        }
+
+        if (shouldBeMultiline) {
+          let index = 0;
+          for (const attr of node.attributes) {
+            const attrPrevious = node.attributes[index - 1];
+            const relativeToNode = attrPrevious || node.openStart;
+            if (attr.loc.start.line === relativeToNode.loc.end.line) {
+              return context.report({
+                node,
+                data: {
+                  attrName: attr.key.value,
+                },
+                fix,
+                messageId: MESSAGE_ID.NEWLINE_MISSING,
+              });
+            }
+            index += 1;
+          }
+
+          const attrLast = node.attributes[node.attributes.length - 1];
+          const closeStyleActual =
+            node.openEnd.loc.start.line === attrLast.loc.end.line
+              ? "sameline"
+              : "newline";
+          if (closeStyle !== closeStyleActual) {
+            return context.report({
+              node,
+              data: {
+                actual: closeStyleActual,
+                expected: closeStyle,
+              },
+              fix,
+              messageId: MESSAGE_ID.CLOSE_STYLE_WRONG,
+            });
+          }
+        } else {
+          let expectedLastLineNum = node.openStart.loc.start.line;
+          for (const attr of node.attributes) {
+            if (shouldBeMultiline) {
+              expectedLastLineNum += 1;
+            }
+            if (attr.value) {
+              const valueLineSpan =
+                attr.value.loc.end.line - attr.value.loc.start.line;
+              expectedLastLineNum += valueLineSpan;
+            }
+          }
+          if (shouldBeMultiline && closeStyle === "newline") {
+            expectedLastLineNum += 1;
+          }
+
+          if (node.openEnd.loc.end.line !== expectedLastLineNum) {
+            return context.report({
+              node,
+              data: {
+                attrMin,
+              },
+              fix,
+              messageId: MESSAGE_ID.NEWLINE_UNEXPECTED,
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/lib/rules/index.js

@@ -6,6 +6,7 @@ const noDuplicateId = require("./no-duplicate-id");
 const noInlineStyles = require("./no-inline-styles");
 const noMultipleH1 = require("./no-multiple-h1");
 const noExtraSpacingAttrs = require("./no-extra-spacing-attrs");
+const attrsNewline = require("./attrs-newline");
 const elementNewLine = require("./element-newline");
 const noSkipHeadingLevels = require("./no-skip-heading-levels");
 const indent = require("./indent");
@@ -45,6 +46,7 @@ module.exports = {
   "no-inline-styles": noInlineStyles,
   "no-multiple-h1": noMultipleH1,
   "no-extra-spacing-attrs": noExtraSpacingAttrs,
+  "attrs-newline": attrsNewline,
   "element-newline": elementNewLine,
   "no-skip-heading-levels": noSkipHeadingLevels,
   "require-li-container": requireLiContainer,

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

@@ -34,8 +34,11 @@ module.exports = {
           selfClosing: {
             enum: ["always", "never"],
           },
-          allowSelfClosingCustom: {
-            type: "boolean",
+          selfClosingCustomPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
           },
         },
         additionalProperties: false,
@@ -49,14 +52,21 @@ module.exports = {
   },
 
   create(context) {
-    const shouldSelfClose =
+    /** @type {string[]} */
+    const foreignContext = [];
+    const shouldSelfCloseVoid =
       context.options && context.options.length
         ? context.options[0].selfClosing === "always"
         : false;
-    const allowSelfClosingCustom =
-      context.options && context.options.length
-        ? context.options[0].allowSelfClosingCustom === true
-        : false;
+    /** @type {string[]} */
+    const selfClosingCustomPatternsOption =
+      (context.options &&
+        context.options.length &&
+        context.options[0].selfClosingCustomPatterns) ||
+      [];
+    const selfClosingCustomPatterns = selfClosingCustomPatternsOption.map(
+      (i) => new RegExp(i)
+    );
 
     /**
      * @param {TagNode} node
@@ -91,7 +101,10 @@ module.exports = {
             if (!fixable) {
               return null;
             }
-            return fixer.replaceText(node.openEnd, " />");
+            const fixes = [];
+            fixes.push(fixer.replaceText(node.openEnd, " />"));
+            if (node.close) fixes.push(fixer.remove(node.close));
+            return fixes;
           },
         });
       }
@@ -115,17 +128,33 @@ module.exports = {
     return {
       Tag(node) {
         const isVoidElement = VOID_ELEMENTS_SET.has(node.name);
-        if (
-          node.selfClosing &&
-          allowSelfClosingCustom &&
-          node.name.indexOf("-") !== -1
-        ) {
-          checkVoidElement(node, true, false);
-        } else if (node.selfClosing || isVoidElement) {
-          checkVoidElement(node, shouldSelfClose, isVoidElement);
+        const isSelfClosingCustomElement = !!selfClosingCustomPatterns.some(
+          (i) => node.name.match(i)
+        );
+        const isForeign = foreignContext.length > 0;
+        const shouldSelfCloseCustom =
+          isSelfClosingCustomElement && !node.children.length;
+        const shouldSelfCloseForeign = node.selfClosing;
+        const shouldSelfClose =
+          (isVoidElement && shouldSelfCloseVoid) ||
+          (isSelfClosingCustomElement && shouldSelfCloseCustom) ||
+          (isForeign && shouldSelfCloseForeign);
+        const canSelfClose =
+          isVoidElement || isSelfClosingCustomElement || isForeign;
+        if (node.selfClosing || canSelfClose) {
+          checkVoidElement(node, shouldSelfClose, canSelfClose);
         } else if (node.openEnd.value !== "/>") {
           checkClosingTag(node);
         }
+        if (["svg", "math"].includes(node.name)) foreignContext.push(node.name);
+      },
+      /**
+       * @param {TagNode} node
+       */
+      "Tag:exit"(node) {
+        if (node.name === foreignContext[foreignContext.length - 1]) {
+          foreignContext.pop();
+        }
       },
     };
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -45,11 +45,11 @@
     "accessibility"
   ],
   "devDependencies": {
-    "@html-eslint/parser": "^0.24.1",
+    "@html-eslint/parser": "^0.25.0",
     "@types/eslint": "^8.56.2",
     "@types/estree": "^0.0.47",
     "es-html-parser": "^0.0.8",
     "typescript": "^4.4.4"
   },
-  "gitHead": "c9095f0738fea1688099937ebc0a93b1a26b7da9"
+  "gitHead": "315631a66e9c626655c243ccb6a46319736383cf"
 }

package/types/configs/recommended.d.ts

@@ -0,0 +1,18 @@
+export const rules: {
+    "@html-eslint/require-lang": string;
+    "@html-eslint/require-img-alt": string;
+    "@html-eslint/require-doctype": string;
+    "@html-eslint/require-title": string;
+    "@html-eslint/no-multiple-h1": string;
+    "@html-eslint/no-extra-spacing-attrs": string;
+    "@html-eslint/attrs-newline": string;
+    "@html-eslint/element-newline": string;
+    "@html-eslint/no-duplicate-id": string;
+    "@html-eslint/indent": string;
+    "@html-eslint/require-li-container": string;
+    "@html-eslint/quotes": string;
+    "@html-eslint/no-obsolete-tags": string;
+    "@html-eslint/require-closing-tags": string;
+    "@html-eslint/no-duplicate-attrs": string;
+};
+//# sourceMappingURL=recommended.d.ts.map

package/types/configs/recommended.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recommended.d.ts","sourceRoot":"","sources":["../../lib/configs/recommended.js"],"names":[],"mappings":""}

package/types/rules/attrs-newline.d.ts

@@ -0,0 +1,11 @@
+declare const _exports: RuleModule;
+export = _exports;
+export type RuleFixer = import("../types").RuleFixer;
+export type RuleModule = import("../types").RuleModule;
+export type TagNode = import("../types").TagNode;
+export type MessageId = {
+    CLOSE_STYLE_WRONG: "closeStyleWrong";
+    NEWLINE_MISSING: "newlineMissing";
+    NEWLINE_UNEXPECTED: "newlineUnexpected";
+};
+//# sourceMappingURL=attrs-newline.d.ts.map

package/types/rules/attrs-newline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs-newline.d.ts","sourceRoot":"","sources":["../../lib/rules/attrs-newline.js"],"names":[],"mappings":"wBAuBU,UAAU;;wBAtBN,OAAO,UAAU,EAAE,SAAS;yBAC5B,OAAO,UAAU,EAAE,UAAU;sBAC7B,OAAO,UAAU,EAAE,OAAO;;uBAE1B,iBAAiB;qBACjB,gBAAgB;wBAChB,mBAAmB"}

package/types/rules/index.d.ts

@@ -0,0 +1,42 @@
+declare const _exports: {
+    "require-lang": import("../types").RuleModule;
+    "require-img-alt": import("../types").RuleModule;
+    "require-doctype": import("../types").RuleModule;
+    "require-title": import("../types").RuleModule;
+    "no-duplicate-id": import("../types").RuleModule;
+    "no-inline-styles": import("../types").RuleModule;
+    "no-multiple-h1": import("../types").RuleModule;
+    "no-extra-spacing-attrs": import("../types").RuleModule;
+    "attrs-newline": import("../types").RuleModule;
+    "element-newline": import("../types").RuleModule;
+    "no-skip-heading-levels": import("../types").RuleModule;
+    "require-li-container": import("../types").RuleModule;
+    indent: import("../types").RuleModule;
+    quotes: import("../types").RuleModule;
+    "id-naming-convention": import("../types").RuleModule;
+    "no-obsolete-tags": import("../types").RuleModule;
+    "require-attrs": import("../types").RuleModule;
+    "require-closing-tags": import("../types").RuleModule;
+    "require-meta-description": import("../types").RuleModule;
+    "require-frame-title": import("../types").RuleModule;
+    "no-non-scalable-viewport": import("../types").RuleModule;
+    "no-positive-tabindex": import("../types").RuleModule;
+    "require-meta-viewport": import("../types").RuleModule;
+    "require-meta-charset": import("../types").RuleModule;
+    "no-target-blank": import("../types").RuleModule;
+    "no-duplicate-attrs": import("../types").RuleModule;
+    "no-abstract-roles": import("../types").RuleModule;
+    "require-button-type": import("../types").RuleModule;
+    "no-aria-hidden-body": import("../types").RuleModule;
+    "no-multiple-empty-lines": import("../types").RuleModule;
+    "no-accesskey-attrs": import("../types").RuleModule;
+    "no-restricted-attrs": import("../types").RuleModule;
+    "no-trailing-spaces": import("../types").RuleModule;
+    "no-restricted-attr-values": import("../types").RuleModule;
+    "no-script-style-type": import("../types").RuleModule;
+    lowercase: import("../types").RuleModule;
+    "require-open-graph-protocol": import("../types").RuleModule;
+    "sort-attrs": import("../types").RuleModule;
+};
+export = _exports;
+//# sourceMappingURL=index.d.ts.map

package/types/rules/require-closing-tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"require-closing-tags.d.ts","sourceRoot":"","sources":["../../lib/rules/require-closing-tags.js"],"names":[],"mappings":"wBAgBU,UAAU;;yBAfN,OAAO,UAAU,EAAE,UAAU;sBAC7B,OAAO,UAAU,EAAE,OAAO"}