@html-eslint/eslint-plugin 0.14.0 → 0.15.0

package/lib/rules/element-newline.js

@@ -77,7 +77,7 @@ module.exports = {
       }
     }
     return {
-      [["Tag", "StyleTag", "ScriptTag", "Program"].join(",")](node) {
+      [["Tag", "Program"].join(",")](node) {
         const children = node.type === "Program" ? node.body : node.children;
         checkSiblings(children);
         checkChild(node, children);

package/lib/rules/index.js

@@ -28,6 +28,7 @@ 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");
+const noTrailingSpaces = require("./no-trailing-spaces");
 
 module.exports = {
   "require-lang": requireLang,
@@ -60,4 +61,5 @@ module.exports = {
   "no-multiple-empty-lines": noMultipleEmptyLines,
   "no-accesskey-attrs": noAccesskeyAttrs,
   "no-restricted-attrs": noRestrictedAttrs,
+  "no-trailing-spaces": noTrailingSpaces,
 };

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

@@ -1,11 +1,20 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
 const { RULE_CATEGORY } = require("../constants");
+const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
   EXTRA_BETWEEN: "unexpectedBetween",
   EXTRA_AFTER: "unexpectedAfter",
   EXTRA_BEFORE: "unexpectedBefore",
+  MISSING_BEFORE_SELF_CLOSE: "missingBeforeSelfClose",
+  EXTRA_BEFORE_SELF_CLOSE: "unexpectedBeforeSelfClose",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -17,14 +26,30 @@ module.exports = {
     },
 
     fixable: true,
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          enforceBeforeSelfClose: {
+            type: "boolean",
+          },
+        },
+      },
+    ],
     messages: {
       [MESSAGE_IDS.EXTRA_BETWEEN]: "Unexpected space between attributes",
       [MESSAGE_IDS.EXTRA_AFTER]: "Unexpected space after attribute",
       [MESSAGE_IDS.EXTRA_BEFORE]: "Unexpected space before attribute",
+      [MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE]:
+        "Missing space before self closing",
+      [MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE]:
+        "Unexpected extra spaces before self closing",
     },
   },
   create(context) {
+    const enforceBeforeSelfClose = !!(context.options[0] || {})
+      .enforceBeforeSelfClose;
+
     function checkExtraSpacesBetweenAttrs(attrs) {
       attrs.forEach((current, index, attrs) => {
         if (index >= attrs.length - 1) {
@@ -38,10 +63,7 @@ module.exports = {
         const spacesBetween = after.loc.start.column - current.loc.end.column;
         if (spacesBetween > 1) {
           context.report({
-            loc: {
-              start: current.loc.end,
-              end: after.loc.start,
-            },
+            loc: NodeUtils.getLocBetween(current, after),
             messageId: MESSAGE_IDS.EXTRA_BETWEEN,
             fix(fixer) {
               return fixer.removeRange([current.range[1] + 1, after.range[0]]);
@@ -56,26 +78,31 @@ module.exports = {
         // skip the attribute on the different line with the start tag
         return;
       }
-      let spacesBetween = openEnd.loc.end.column - lastAttr.loc.end.column;
-      if (isSelfClosed) {
-        spacesBetween--;
-      }
+      const limit = isSelfClosed && enforceBeforeSelfClose ? 1 : 0;
+      const spacesBetween = openEnd.loc.start.column - lastAttr.loc.end.column;
 
-      if (spacesBetween > 1) {
+      if (spacesBetween > limit) {
         context.report({
-          loc: {
-            start: lastAttr.loc.end,
-            end: openEnd.loc.end,
-          },
+          loc: NodeUtils.getLocBetween(lastAttr, openEnd),
           messageId: MESSAGE_IDS.EXTRA_AFTER,
           fix(fixer) {
             return fixer.removeRange([
               lastAttr.range[1],
-              lastAttr.range[1] + spacesBetween - 1,
+              lastAttr.range[1] + spacesBetween - limit,
             ]);
           },
         });
       }
+
+      if (isSelfClosed && enforceBeforeSelfClose && spacesBetween < 1) {
+        context.report({
+          loc: NodeUtils.getLocBetween(lastAttr, openEnd),
+          messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.insertTextAfter(lastAttr, " ");
+          },
+        });
+      }
     }
 
     function checkExtraSpaceBefore(node, firstAttr) {
@@ -87,10 +114,8 @@ module.exports = {
       const spacesBetween = firstAttr.loc.start.column - node.loc.end.column;
       if (spacesBetween >= 2) {
         context.report({
-          loc: {
-            start: node.loc.start,
-            end: firstAttr.loc.start,
-          },
+          loc: NodeUtils.getLocBetween(node, firstAttr),
+
           messageId: MESSAGE_IDS.EXTRA_BEFORE,
           fix(fixer) {
             return fixer.removeRange([
@@ -102,23 +127,65 @@ module.exports = {
       }
     }
 
+    function checkSpaceBeforeSelfClosing(beforeSelfClosing, openEnd) {
+      if (beforeSelfClosing.loc.start.line !== openEnd.loc.start.line) {
+        // skip the attribute on the different line with the start tag
+        return;
+      }
+      const spacesBetween =
+        openEnd.loc.start.column - beforeSelfClosing.loc.end.column;
+      const locBetween = NodeUtils.getLocBetween(beforeSelfClosing, openEnd);
+
+      if (spacesBetween > 1) {
+        context.report({
+          loc: locBetween,
+          messageId: MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.removeRange([
+              beforeSelfClosing.range[1] + 1,
+              openEnd.range[0],
+            ]);
+          },
+        });
+      } else if (spacesBetween < 1) {
+        context.report({
+          loc: locBetween,
+          messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.insertTextAfter(beforeSelfClosing, " ");
+          },
+        });
+      }
+    }
+
     return {
       [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        if (!node.attributes || node.attributes.length <= 0) {
+        if (!node.attributes) {
           return;
         }
 
-        checkExtraSpaceBefore(node.openStart, node.attributes[0]);
+        if (node.attributes.length) {
+          checkExtraSpaceBefore(node.openStart, node.attributes[0]);
+        }
+
+        const isSelfClosing = node.openEnd.value === "/>";
 
         if (node.openEnd && node.attributes && node.attributes.length > 0) {
-          const selfClosing = node.openEnd.value === "/>";
           checkExtraSpaceAfter(
             node.openEnd,
             node.attributes[node.attributes.length - 1],
-            selfClosing
+            isSelfClosing
           );
         }
+
         checkExtraSpacesBetweenAttrs(node.attributes);
+        if (
+          node.attributes.length === 0 &&
+          isSelfClosing &&
+          enforceBeforeSelfClose
+        ) {
+          checkSpaceBeforeSelfClosing(node.openStart, node.openEnd);
+        }
       },
     };
   },

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

@@ -0,0 +1,75 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  TRAILING_SPACE: "trailingSpace",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "Disallow trailing whitespace at the end of lines",
+      recommended: false,
+      category: RULE_CATEGORY.STYLE,
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.TRAILING_SPACE]: "Trailing spaces not allowed",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const lineBreaks = sourceCode.getText().match(/\r\n|[\r\n\u2028\u2029]/gu);
+
+    return {
+      Program() {
+        const lines = sourceCode.lines;
+        let rangeIndex = 0;
+
+        lines.forEach((line, index) => {
+          const lineNumber = index + 1;
+          const match = line.match(/[ \t\u00a0\u2000-\u200b\u3000]+$/);
+          const lineBreakLength =
+            lineBreaks && lineBreaks[index] ? lineBreaks[index].length : 1;
+          const lineLength = line.length + lineBreakLength;
+
+          if (match) {
+            if (typeof match.index === "number" && match.index > 0) {
+              const loc = {
+                start: {
+                  line: lineNumber,
+                  column: match.index,
+                },
+                end: {
+                  line: lineNumber,
+                  column: lineLength - lineBreakLength,
+                },
+              };
+
+              context.report({
+                messageId: MESSAGE_IDS.TRAILING_SPACE,
+                loc,
+                fix(fixer) {
+                  return fixer.removeRange([
+                    rangeIndex + loc.start.column,
+                    rangeIndex + loc.end.column,
+                  ]);
+                },
+              });
+            }
+          }
+          rangeIndex += lineLength;
+        });
+      },
+    };
+  },
+};

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

@@ -33,6 +33,9 @@ module.exports = {
           selfClosing: {
             enum: ["always", "never"],
           },
+          allowSelfClosingCustom: {
+            type: "boolean",
+          },
         },
         additionalProperties: false,
       },
@@ -46,12 +49,14 @@ module.exports = {
   },
 
   create(context) {
-    let svgStacks = [];
-
     const shouldSelfClose =
       context.options && context.options.length
         ? context.options[0].selfClosing === "always"
         : false;
+    const allowSelfClosingCustom =
+      context.options && context.options.length
+        ? context.options[0].allowSelfClosingCustom === true
+        : false;
 
     function checkClosingTag(node) {
       if (!node.close) {
@@ -65,7 +70,7 @@ module.exports = {
       }
     }
 
-    function checkVoidElement(node) {
+    function checkVoidElement(node, shouldSelfClose, fixable) {
       const hasSelfClose = node.openEnd.value === "/>";
       if (shouldSelfClose && !hasSelfClose) {
         context.report({
@@ -75,6 +80,9 @@ module.exports = {
           },
           messageId: MESSAGE_IDS.MISSING_SELF,
           fix(fixer) {
+            if (!fixable) {
+              return null;
+            }
             return fixer.replaceText(node.openEnd, " />");
           },
         });
@@ -87,6 +95,9 @@ module.exports = {
           },
           messageId: MESSAGE_IDS.UNEXPECTED,
           fix(fixer) {
+            if (!fixable) {
+              return null;
+            }
             return fixer.replaceText(node.openEnd, ">");
           },
         });
@@ -95,20 +106,19 @@ module.exports = {
 
     return {
       Tag(node) {
-        if (node.name === "svg") {
-          svgStacks.push(node);
-        }
-        if (node.selfClosing || VOID_ELEMENTS_SET.has(node.name)) {
-          checkVoidElement(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);
         } else if (node.openEnd.value !== "/>") {
           checkClosingTag(node);
         }
       },
-      "Tag:exit"(node) {
-        if (node.name === "svg") {
-          svgStacks.push(node);
-        }
-      },
     };
   },
 };

package/lib/rules/utils/node-utils.js

@@ -5,6 +5,8 @@
  * @typedef {import("es-html-parser").AttributeNode} AttributeNode
  * @typedef {import("../../types").LineNode} LineNode
  * @typedef {import("../../types").CommentContentNode} CommentContentNode
+ * @typedef {import("../../types").BaseNode} BaseNode
+ * @typedef {import("../../types").Location} Location
  */
 
 module.exports = {
@@ -95,4 +97,16 @@ module.exports = {
       return lineNode;
     });
   },
+  /**
+   * Get location between two nodes.
+   * @param {BaseNode} before A node placed in before
+   * @param {BaseNode} after A node placed in after
+   * @returns {Location} location between two nodes.
+   */
+  getLocBetween(before, after) {
+    return {
+      start: before.loc.end,
+      end: after.loc.start,
+    };
+  },
 };

package/lib/types.d.ts

@@ -9,6 +9,8 @@ export type AnyNode = ESHtml.AnyNode | LineNode;
 
 export type Range = ESLint.AST.Range;
 
+export type Location = ESLint.AST.SourceLocation;
+
 export interface BaseNode {
   range: [number, number];
   loc: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -40,11 +40,11 @@
     "accessibility"
   ],
   "devDependencies": {
-    "@html-eslint/parser": "^0.14.0",
+    "@html-eslint/parser": "^0.15.0",
     "@types/eslint": "^7.2.10",
     "@types/estree": "^0.0.47",
-    "es-html-parser": "^0.0.7",
+    "es-html-parser": "^0.0.8",
     "typescript": "^4.4.4"
   },
-  "gitHead": "3b5398af6d9432407296dd3b20806c6142ac3d1a"
+  "gitHead": "9795f56dcf8662ba882555a35c9d3114927f2075"
 }