@html-eslint/eslint-plugin 0.51.0 → 0.52.1

package/lib/configs/recommended.js

@@ -1,4 +1,4 @@
-/** @satisfies {import('eslint').Linter.Config['rules']} */
+/** @satisfies {import("eslint").Linter.Config["rules"]} */
 const recommendedRules = {
   "html/require-lang": "error",
   "html/require-img-alt": "error",
@@ -18,6 +18,7 @@ const recommendedRules = {
   "html/require-li-container": "error",
   "html/quotes": "error",
   "html/no-obsolete-tags": "error",
+  "html/no-obsolete-attrs": "error",
   "html/require-closing-tags": "error",
   "html/no-duplicate-attrs": "error",
   "html/use-baseline": "error",
@@ -29,7 +30,12 @@ const recommendedLegacyRules = Object.entries(recommendedRules).reduce(
     acc[key.replace("html/", "@html-eslint/")] = value;
     return acc;
   },
-  /** @type {Record<string, typeof recommendedRules[keyof typeof recommendedRules]>} */
+  /**
+   * @type {Record<
+   *   string,
+   *   (typeof recommendedRules)[keyof typeof recommendedRules]
+   * >}
+   */
   ({})
 );
 

package/lib/index.js

@@ -7,13 +7,9 @@ const { allRules } = require("./configs/all");
 const { HTMLLanguage } = require("./languages/html-language");
 const { name, version } = require("../package.json");
 const parser = require("@html-eslint/parser");
-/**
- * @import { ESLint } from "eslint";
- */
+/** @import {ESLint} from "eslint" */
 
-/**
- * @type {ESLint.Plugin}
- */
+/** @type {ESLint.Plugin} */
 const plugin = {
   meta: {
     name,

package/lib/languages/html-language.js

@@ -1,50 +1,58 @@
 /**
- * @import { Language, ParseResult, File, FileError, OkParseResult } from "@eslint/core";
- * @import { ParserOptions } from "@html-eslint/parser";
- * @import { AST } from "eslint";
+ * @import {
+ *   File,
+ *   FileError,
+ *   Language,
+ *   OkParseResult,
+ *   ParseResult
+ * } from "@eslint/core"
+ * @import {ParserOptions} from "@html-eslint/parser"
+ * @import {AST} from "eslint"
  */
 
 const { visitorKeys, parseForESLint } = require("@html-eslint/parser");
 const { createHTMLSourceCode } = require("./html-source-code");
 
 /**
- * @implements {Language<{ LangOptions: ParserOptions; Code: ReturnType<typeof createHTMLSourceCode>; RootNode: AST.Program; Node: {}}>}
+ * @implements {Language<{
+ *   LangOptions: ParserOptions;
+ *   Code: ReturnType<typeof createHTMLSourceCode>;
+ *   RootNode: AST.Program;
+ *   Node: {};
+ * }>}
  */
 class HTMLLanguage {
   constructor() {
     /**
-     * @property
      * @type {"text"}
+     * @property
      */
     this.fileType = "text";
 
     /**
+     * @type {0 | 1}
      * @property
-     * @type {0|1}
      */
     this.lineStart = 1;
 
     /**
+     * @type {0 | 1}
      * @property
-     * @type {0|1}
      */
     this.columnStart = 0;
 
-    /**
-     * @type {string}
-     */
+    /** @type {string} */
     this.nodeTypeKey = "type";
 
     /**
      * The visitor keys for the es-html-parser AST.
+     *
      * @type {Record<string, string[]>}
      */
     this.visitorKeys = visitorKeys;
   }
 
-  /**
-   * @param {ParserOptions} languageOptions
-   */
+  /** @param {ParserOptions} languageOptions */
   validateLanguageOptions(languageOptions) {
     if (!languageOptions) {
       return;
@@ -82,7 +90,7 @@ class HTMLLanguage {
    * @returns {ParseResult<AST.Program>}
    */
   parse(file, context) {
-    const code = /**  @type {string} */ (file.body);
+    const code = /** @type {string} */ (file.body);
     const languageOptions = (context && context.languageOptions) || {};
     try {
       const result = parseForESLint(code, languageOptions);
@@ -105,7 +113,7 @@ class HTMLLanguage {
    */
   createSourceCode(file, parseResult) {
     return createHTMLSourceCode({
-      text: /**  @type {string} */ (file.body),
+      text: /** @type {string} */ (file.body),
       ast: parseResult.ast,
       comments: parseResult.comments,
     });

package/lib/languages/html-source-code.js

@@ -1,10 +1,18 @@
 /**
- * @import {AST} from 'eslint';
- * @import {SourceLocation, DirectiveType} from '@eslint/plugin-kit';
- * @import {TraversalStep, SourceCode} from '@eslint/core';
- * @import {CommentContent, AnyHTMLNode} from '@html-eslint/types';
- * @import {BaseNode} from '../types';
- *
+ * @import {
+ *   SourceCode,
+ *   TraversalStep
+ * } from "@eslint/core"
+ * @import {
+ *   DirectiveType,
+ *   SourceLocation
+ * } from "@eslint/plugin-kit"
+ * @import {
+ *   AnyHTMLNode,
+ *   CommentContent
+ * } from "@html-eslint/types"
+ * @import {AST} from "eslint"
+ * @import {BaseNode} from "../types"
  */
 const {
   TextSourceCodeBase,
@@ -26,19 +34,13 @@ const INLINE_CONFIG =
 const commentParser = new ConfigCommentParser();
 
 class HTMLSourceCode extends TextSourceCodeBase {
-  /**
-   * @param {{ast: AST.Program, text: string, comments: CommentContent[]}} config
-   */
+  /** @param {{ ast: AST.Program; text: string; comments: CommentContent[] }} config */
   constructor({ ast, text, comments }) {
     super({ ast, text });
 
-    /**
-     * @property
-     */
+    /** @property */
     this.ast = ast;
-    /**
-     * @property
-     */
+    /** @property */
     this.comments = comments;
     this.parentsMap = new Map();
 
@@ -77,12 +79,14 @@ class HTMLSourceCode extends TextSourceCodeBase {
 
   getDisableDirectives() {
     /**
-     * @type {{ruleId: null | string, message: string; loc: SourceLocation}[]}
+     * @type {{
+     *   ruleId: null | string;
+     *   message: string;
+     *   loc: SourceLocation;
+     * }[]}
      */
     const problems = [];
-    /**
-     * @type {Directive[]}
-     */
+    /** @type {Directive[]} */
     const directives = [];
 
     this.getInlineConfigNodes().forEach((comment) => {
@@ -126,13 +130,10 @@ class HTMLSourceCode extends TextSourceCodeBase {
   }
 
   traverse() {
-    /**
-     * @type {TraversalStep[]}
-     */
+    /** @type {TraversalStep[]} */
     const steps = [];
 
     /**
-     *
      * @param {AnyHTMLNode | AST.Program} node
      * @param {AnyHTMLNode | AST.Program | null} parent
      */
@@ -184,10 +185,17 @@ class HTMLSourceCode extends TextSourceCodeBase {
   }
 }
 /**
- * @param {{ast: AST.Program, text: string, comments: CommentContent[]}} config
+ * @param {{ ast: AST.Program; text: string; comments: CommentContent[] }} config
  * @returns {TextSourceCodeBase<any> & {
- *   getDisableDirectives(): { problems: {ruleId: null | string, message: string; loc: SourceLocation}[]; directives: Directive[]}
- *   getInlineConfigNodes(): CommentContent[]
+ *   getDisableDirectives(): {
+ *     problems: {
+ *       ruleId: null | string;
+ *       message: string;
+ *       loc: SourceLocation;
+ *     }[];
+ *     directives: Directive[];
+ *   };
+ *   getInlineConfigNodes(): CommentContent[];
  * }}
  */
 function createHTMLSourceCode(config) {

package/lib/languages/html-traversal-step.js

@@ -1,18 +1,14 @@
 /**
- * @import {AST} from 'eslint';
- * @import {AnyHTMLNode} from '@html-eslint/types';
+ * @import {AnyHTMLNode} from "@html-eslint/types"
+ * @import {AST} from "eslint"
  */
 
 const { VisitNodeStep } = require("@eslint/plugin-kit");
 
 const STEP_PHASE = {
-  /**
-   * @type {1}
-   */
+  /** @type {1} */
   ENTER: 1,
-  /**
-   * @type {2}
-   */
+  /** @type {2} */
   EXIT: 2,
 };
 
@@ -20,8 +16,8 @@ class HTMLTraversalStep extends VisitNodeStep {
   /**
    * @param {Object} options
    * @param {AnyHTMLNode | AST.Program} options.target
-   * @param {1|2} options.phase
-   * @param {Array<any>} options.args
+   * @param {1 | 2} options.phase
+   * @param {any[]} options.args
    */
   constructor({ target, phase, args }) {
     super({ target, phase, args });

package/lib/rules/attrs-newline.js

@@ -1,6 +1,8 @@
 /**
- * @import { RuleFixer, RuleModule } from '../types';
- *
+ * @import {
+ *   RuleFixer,
+ *   RuleModule
+ * } from "../types"
  * @typedef {Object} MessageId
  * @property {"closeStyleWrong"} CLOSE_STYLE_WRONG
  * @property {"newlineMissing"} NEWLINE_MISSING
@@ -14,17 +16,13 @@ const { RULE_CATEGORY } = require("../constants");
 const { createVisitors } = require("./utils/visitors");
 const { getRuleUrl } = require("./utils/rule");
 
-/**
- * @type {MessageId}
- */
+/** @type {MessageId} */
 const MESSAGE_ID = {
   CLOSE_STYLE_WRONG: "closeStyleWrong",
   NEWLINE_MISSING: "newlineMissing",
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -70,15 +68,21 @@ module.exports = {
         if (!shouldBeMultiline) return;
 
         /**
-         * This doesn't do any indentation, so the result will look silly. Indentation should be covered by the `indent` rule
+         * 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) {
           let expected = node.openStart.value;
           for (const attr of node.attributes) {
             expected += `\n${attr.key.value}`;
-            if (attr.startWrapper && attr.value && attr.endWrapper) {
-              expected += `=${attr.startWrapper.value}${attr.value.value}${attr.endWrapper.value}`;
+            if (attr.value) {
+              const startWrapper = attr.startWrapper
+                ? attr.startWrapper.value
+                : "";
+              const endWrapper = attr.endWrapper ? attr.endWrapper.value : "";
+              expected += `=${startWrapper}${attr.value.value}${endWrapper}`;
             }
           }
 

package/lib/rules/class-spacing.js

@@ -0,0 +1,148 @@
+/** @import {RuleModule} from "../types" */
+
+const { NODE_TYPES } = require("@html-eslint/parser");
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  EXTRA_SPACING_START: "extraSpacingStart",
+  EXTRA_SPACING_END: "extraSpacingEnd",
+  EXTRA_SPACING_BETWEEN: "extraSpacingBetween",
+};
+
+const CLASS_BETWEEN_EXTRA_SPACES_REGEX = /\s{2,}/;
+
+/** @type {RuleModule<[]>} */
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "Disallow extra spacing in class attribute values",
+      recommended: false,
+      category: RULE_CATEGORY.STYLE,
+      url: getRuleUrl("class-spacing"),
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.EXTRA_SPACING_START]:
+        "Unexpected space at the start of class attribute value",
+      [MESSAGE_IDS.EXTRA_SPACING_END]:
+        "Unexpected space at the end of class attribute value",
+      [MESSAGE_IDS.EXTRA_SPACING_BETWEEN]:
+        "Unexpected extra spaces between class names",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Attribute(node) {
+        if (node.key.value.toLowerCase() !== "class") {
+          return;
+        }
+
+        const attributeValue = node.value;
+        if (
+          !attributeValue ||
+          !attributeValue.value ||
+          attributeValue.parts.some((part) => part.type === NODE_TYPES.Template)
+        ) {
+          return;
+        }
+
+        const classValue = attributeValue.value;
+        const trimmedValue = classValue.trim();
+
+        if (
+          classValue === trimmedValue &&
+          !CLASS_BETWEEN_EXTRA_SPACES_REGEX.test(classValue)
+        ) {
+          return;
+        }
+
+        const normalizedValue = trimmedValue.replace(/\s+/g, " ");
+
+        // Check for leading spaces
+        if (classValue !== trimmedValue && classValue.startsWith(" ")) {
+          context.report({
+            loc: {
+              start: {
+                line: attributeValue.loc.start.line,
+                column: attributeValue.loc.start.column,
+              },
+              end: {
+                line: attributeValue.loc.start.line,
+                column:
+                  attributeValue.loc.start.column +
+                  (classValue.length - classValue.trimStart().length),
+              },
+            },
+            messageId: MESSAGE_IDS.EXTRA_SPACING_START,
+            fix(fixer) {
+              return fixer.replaceTextRange(
+                attributeValue.range,
+                normalizedValue
+              );
+            },
+          });
+          return;
+        }
+
+        // Check for trailing spaces
+        if (classValue !== trimmedValue && classValue.endsWith(" ")) {
+          context.report({
+            loc: {
+              start: {
+                line: attributeValue.loc.start.line,
+                column:
+                  attributeValue.loc.start.column + classValue.trimEnd().length,
+              },
+              end: {
+                line: attributeValue.loc.start.line,
+                column: attributeValue.loc.start.column + classValue.length,
+              },
+            },
+            messageId: MESSAGE_IDS.EXTRA_SPACING_END,
+            fix(fixer) {
+              return fixer.replaceTextRange(
+                attributeValue.range,
+                normalizedValue
+              );
+            },
+          });
+          return;
+        }
+
+        // Check for extra spaces between class names
+        if (CLASS_BETWEEN_EXTRA_SPACES_REGEX.test(classValue)) {
+          const match = classValue.match(CLASS_BETWEEN_EXTRA_SPACES_REGEX);
+          if (match && match.index !== undefined) {
+            context.report({
+              loc: {
+                start: {
+                  line: attributeValue.loc.start.line,
+                  column: attributeValue.loc.start.column + match.index,
+                },
+                end: {
+                  line: attributeValue.loc.start.line,
+                  column:
+                    attributeValue.loc.start.column +
+                    match.index +
+                    match[0].length,
+                },
+              },
+              messageId: MESSAGE_IDS.EXTRA_SPACING_BETWEEN,
+              fix(fixer) {
+                return fixer.replaceTextRange(
+                  attributeValue.range,
+                  normalizedValue
+                );
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+};

package/lib/rules/element-newline.js

@@ -1,7 +1,16 @@
 /**
- * @import { Text, AnyNode, OpenTagEnd, CloseTag } from '@html-eslint/types';
- * @import { Line, RuleModule } from '../types';
- * @typedef { AnyNode | Line } AnyNodeOrLine
+ * @import {
+ *   AnyNode,
+ *   CloseTag,
+ *   OpenTagEnd,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {
+ *   Line,
+ *   RuleModule
+ * } from "../types"
+ * @typedef {AnyNode | Line} AnyNodeOrLine
+ *
  * @typedef {Object} Option
  * @property {string[]} [Option.skip]
  * @property {string[]} [Option.inline]
@@ -24,9 +33,7 @@ const MESSAGE_IDS = {
   EXPECT_NEW_LINE_AFTER: "expectAfter",
 };
 
-/**
- * @type {Object.<string, Array<string>>}
- */
+/** @type {Object<string, string[]>} */
 const PRESETS = {
   // From https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics
   $inline: `
@@ -64,9 +71,7 @@ wbr
     .split(`\n`),
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -108,9 +113,7 @@ module.exports = {
 
   create(context) {
     const option = context.options[0] || {};
-    /**
-     * @type {string[]}
-     */
+    /** @type {string[]} */
     const skipTags = option.skip || ["pre", "code"];
     const inlineTags = optionsOrPresets(option.inline || []);
 
@@ -119,9 +122,7 @@ module.exports = {
      * @returns {Exclude<AnyNodeOrLine, Text>[]}
      */
     function getChildrenToCheck(children) {
-      /**
-       * @type {Exclude<AnyNodeOrLine, Text>[]}
-       */
+      /** @type {Exclude<AnyNodeOrLine, Text>[]} */
       const childrenToCheck = [];
 
       for (const child of children) {
@@ -224,9 +225,7 @@ module.exports = {
 
       childrenToCheck.forEach((child) => {
         if (isTag(child)) {
-          /**
-           * @type {[OpenTagEnd, CloseTag] | undefined}
-           */
+          /** @type {[OpenTagEnd, CloseTag] | undefined} */
           const wrapper = child.close
             ? [child.openEnd, child.close]
             : undefined;
@@ -298,9 +297,7 @@ module.exports = {
       return `<${node.type}>`;
     }
 
-    /**
-     * @param {Array<string>} options
-     */
+    /** @param {string[]} options */
     function optionsOrPresets(options) {
       const result = [];
       for (const option of options) {

package/lib/rules/id-naming-convention.js

@@ -1,8 +1,17 @@
 /**
- * @import {Tag, ScriptTag, StyleTag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ * @typedef {"camelCase"
+ *   | "snake_case"
+ *   | "PascalCase"
+ *   | "kebab-case"
+ *   | "regex"} Option1
+ *
  *
- * @typedef {"camelCase" | "snake_case" | "PascalCase" | "kebab-case" | "regex"} Option1
  * @typedef {Object} Option2
  * @property {string} pattern
  * @property {string} [flags]
@@ -38,9 +47,7 @@ const CONVENTION_CHECKERS = {
   [CONVENTIONS.KEBAB_CASE]: isKebabCase,
 };
 
-/**
- * @type {RuleModule<[Option1, Option2]>}
- */
+/** @type {RuleModule<[Option1, Option2]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -87,9 +94,7 @@ module.exports = {
             ).test(name)
         : CONVENTION_CHECKERS[convention];
 
-    /**
-     * @param {Tag | ScriptTag | StyleTag} node
-     */
+    /** @param {Tag | ScriptTag | StyleTag} node */
     function check(node) {
       if (isAttributesEmpty(node)) {
         return;
@@ -112,9 +117,7 @@ module.exports = {
       }
     }
 
-    /**
-     * @param {Tag | ScriptTag | StyleTag} node
-     */
+    /** @param {Tag | ScriptTag | StyleTag} node */
     function checkInTemplate(node) {
       if (isAttributesEmpty(node)) {
         return;

package/lib/rules/indent/indent-level.js

@@ -1,6 +1,7 @@
 /**
- * @import {AnyNode} from "@html-eslint/types";
- * @typedef {{ [key in AnyNode['type']]?: number}} IncLevelOptions
+ * @import {AnyNode} from "@html-eslint/types"
+ * @typedef {{ [key in AnyNode["type"]]?: number }} IncLevelOptions
+ *
  * @typedef {(node: AnyNode) => number} GetIncreasingLevel
  */
 
@@ -11,48 +12,40 @@ class IndentLevel {
    */
   constructor(config) {
     /**
-     * @member
      * @private
+     * @member
      * @type {number}
      */
     this.level = -1;
     /**
-     * @member
      * @private
+     * @member
      * @type {number}
      */
     this.baseLevel = 0;
     /**
-     * @member
      * @private
+     * @member
      */
     this.getInc = config.getIncreasingLevel;
   }
 
-  /**
-   * @returns {number}
-   */
+  /** @returns {number} */
   value() {
     return this.level + this.baseLevel;
   }
 
-  /**
-   * @param {AnyNode} node
-   */
+  /** @param {AnyNode} node */
   indent(node) {
     this.level += this.getInc(node);
   }
 
-  /**
-   * @param {AnyNode} node
-   */
+  /** @param {AnyNode} node */
   dedent(node) {
     this.level -= this.getInc(node);
   }
 
-  /**
-   * @param {number} base
-   */
+  /** @param {number} base */
   setBase(base) {
     this.baseLevel = base;
   }