@herb-tools/linter 0.6.1 → 0.7.0

package/src/rules/erb-require-whitespace-inside-tags.ts

@@ -58,7 +58,7 @@ class RequireWhitespaceInsideTags extends BaseRuleVisitor {
   }
 
   private checkOpenTagWhitespace(openTag: Token, content:string):void {
-    if (content.startsWith(" ") || content.startsWith("\n")) {
+    if (content.startsWith(" ") || content.startsWith("\n")) {
       return
     }
 
@@ -70,7 +70,7 @@ class RequireWhitespaceInsideTags extends BaseRuleVisitor {
   }
 
   private checkCloseTagWhitespace(closeTag: Token, content:string):void {
-    if (content.endsWith(" ") || content.endsWith("\n")) {
+    if (content.endsWith(" ") || content.endsWith("\n")) {
       return
     }
 

package/src/rules/html-attribute-double-quotes.ts

@@ -1,6 +1,6 @@
 import { ParserRule } from "../types.js"
 import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams, getAttributeValueQuoteType, hasAttributeValue } from "./rule-utils.js"
-import { filterLiteralNodes } from "@herb-tools/core"
+import { filterLiteralNodes } from "@herb-tools/core"
 
 import type { LintOffense, LintContext } from "../types.js"
 import type { ParseResult } from "@herb-tools/core"

package/src/rules/html-boolean-attributes-no-value.ts

@@ -1,27 +1,25 @@
 import { ParserRule } from "../types.js"
 import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams, isBooleanAttribute, hasAttributeValue } from "./rule-utils.js"
+import { IdentityPrinter } from "@herb-tools/printer"
 
 import type { LintOffense, LintContext } from "../types.js"
-import type { ParseResult } from "@herb-tools/core"
+import type { ParseResult, HTMLAttributeNode } from "@herb-tools/core"
 
 class BooleanAttributesNoValueVisitor extends AttributeVisitorMixin {
-  protected checkStaticAttributeStaticValue({ attributeName, attributeNode }: StaticAttributeStaticValueParams) {
-    if (!isBooleanAttribute(attributeName)) return
-    if (!hasAttributeValue(attributeNode)) return
+  protected checkStaticAttributeStaticValue({ originalAttributeName, attributeNode }: StaticAttributeStaticValueParams) {
+    this.checkAttribute(originalAttributeName, attributeNode)
+  }
 
-    this.addOffense(
-      `Boolean attribute \`${attributeName}\` should not have a value. Use \`${attributeName}\` instead of \`${attributeName}="${attributeName}"\`.`,
-      attributeNode.value!.location,
-      "error"
-    )
+  protected checkStaticAttributeDynamicValue({ originalAttributeName, attributeNode }: StaticAttributeDynamicValueParams) {
+    this.checkAttribute(originalAttributeName, attributeNode)
   }
 
-  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode, combinedValue }: StaticAttributeDynamicValueParams) {
+  private checkAttribute(attributeName: string, attributeNode: HTMLAttributeNode) {
     if (!isBooleanAttribute(attributeName)) return
     if (!hasAttributeValue(attributeNode)) return
 
     this.addOffense(
-      `Boolean attribute \`${attributeName}\` should not have a value. Use \`${attributeName}\` instead of \`${attributeName}="${combinedValue}"\`.`,
+      `Boolean attribute \`${IdentityPrinter.print(attributeNode.name)}\` should not have a value. Use \`${attributeName.toLowerCase()}\` instead of \`${IdentityPrinter.print(attributeNode)}\`.`,
       attributeNode.value!.location,
       "error"
     )

package/src/rules/html-no-empty-attributes.ts

@@ -0,0 +1,75 @@
+import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, StaticAttributeStaticValueParams, DynamicAttributeStaticValueParams } from "./rule-utils.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { ParseResult } from "@herb-tools/core"
+
+// Attributes that must not have empty values
+const RESTRICTED_ATTRIBUTES = new Set([
+  'id',
+  'class',
+  'name',
+  'for',
+  'src',
+  'href',
+  'title',
+  'data',
+  'role'
+])
+
+// Check if attribute name matches any restricted patterns
+function isRestrictedAttribute(attributeName: string): boolean {
+  // Check direct matches
+  if (RESTRICTED_ATTRIBUTES.has(attributeName)) {
+    return true
+  }
+
+  // Check for data-* attributes
+  if (attributeName.startsWith('data-')) {
+    return true
+  }
+
+  // Check for aria-* attributes
+  if (attributeName.startsWith('aria-')) {
+    return true
+  }
+
+  return false
+}
+
+class NoEmptyAttributesVisitor extends AttributeVisitorMixin {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeValue, attributeNode }: StaticAttributeStaticValueParams): void {
+    if (!isRestrictedAttribute(attributeName)) return
+    if (attributeValue.trim() !== "") return
+
+    this.addOffense(
+      `Attribute \`${attributeName}\` must not be empty. Either provide a meaningful value or remove the attribute entirely.`,
+      attributeNode.name!.location,
+      "warning"
+    )
+  }
+
+  protected checkDynamicAttributeStaticValue({ combinedName, attributeValue, attributeNode }: DynamicAttributeStaticValueParams): void {
+    const name = (combinedName || "").toLowerCase()
+    if (!isRestrictedAttribute(name)) return
+    if (attributeValue.trim() !== "") return
+
+    this.addOffense(
+      `Attribute \`${combinedName}\` must not be empty. Either provide a meaningful value or remove the attribute entirely.`,
+      attributeNode.name!.location,
+      "warning"
+    )
+  }
+}
+
+export class HTMLNoEmptyAttributesRule extends ParserRule {
+  name = "html-no-empty-attributes"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new NoEmptyAttributesVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-no-positive-tab-index.ts

@@ -12,7 +12,7 @@ class NoPositiveTabIndexVisitor extends AttributeVisitorMixin {
 
     if (!isNaN(tabIndexValue) && tabIndexValue > 0) {
       this.addOffense(
-        `Do not use positive \`tabindex\` values as they are error prone and can severely disrupt navigation experience for keyboard users. Use \`tabindex="0"\` to make an element focusable or \`tabindex=\"-1\"\` to remove it from the tab sequence.`,
+        `Do not use positive \`tabindex\` values as they are error prone and can severely disrupt navigation experience for keyboard users. Use \`tabindex="0"\` to make an element focusable or \`tabindex="-1"\` to remove it from the tab sequence.`,
         attributeNode.location,
         "error"
       )

package/src/rules/html-no-underscores-in-attribute-names.ts

@@ -0,0 +1,58 @@
+import { ParserRule } from "../types.js"
+import {
+  AttributeVisitorMixin,
+  StaticAttributeStaticValueParams,
+  StaticAttributeDynamicValueParams,
+  DynamicAttributeStaticValueParams,
+  DynamicAttributeDynamicValueParams
+} from "./rule-utils.js"
+import { getStaticContentFromNodes } from "@herb-tools/core"
+import { IdentityPrinter } from "@herb-tools/printer"
+import type { LintContext, LintOffense } from "../types.js"
+import type { ParseResult, HTMLAttributeNode } from "@herb-tools/core"
+
+class HTMLNoUnderscoresInAttributeNamesVisitor extends AttributeVisitorMixin {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeNode }: StaticAttributeStaticValueParams): void {
+    this.check(attributeName, attributeNode)
+  }
+
+  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode }: StaticAttributeDynamicValueParams): void {
+    this.check(attributeName, attributeNode)
+  }
+
+  protected checkDynamicAttributeStaticValue({ nameNodes, attributeNode }: DynamicAttributeStaticValueParams) {
+    const attributeName = getStaticContentFromNodes(nameNodes)
+
+    this.check(attributeName, attributeNode)
+  }
+
+  protected checkDynamicAttributeDynamicValue({ nameNodes, attributeNode }: DynamicAttributeDynamicValueParams) {
+    const attributeName = getStaticContentFromNodes(nameNodes)
+
+    this.check(attributeName, attributeNode)
+  }
+
+  private check(attributeName: string | null, attributeNode: HTMLAttributeNode): void {
+    if (!attributeName) return
+
+    if (attributeName.includes("_")) {
+      this.addOffense(
+        `Attribute \`${IdentityPrinter.print(attributeNode.name)}\` should not contain underscores. Use hyphens (-) instead.`,
+        attributeNode.value!.location,
+        "warning"
+      )
+    }
+  }
+}
+
+export class HTMLNoUnderscoresInAttributeNamesRule extends ParserRule {
+  name = "html-no-underscores-in-attribute-names"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new HTMLNoUnderscoresInAttributeNamesVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-tag-name-lowercase.ts

@@ -36,7 +36,7 @@ class TagNameLowercaseVisitor extends BaseRuleVisitor {
     this.checkTagName(node)
   }
 
-  private checkTagName(node: HTMLOpenTagNode | HTMLCloseTagNode | null): void {
+  private checkTagName(node: HTMLOpenTagNode | HTMLCloseTagNode | null): void {
     if (!node) return
 
     const tagName = getTagName(node)

package/src/rules/index.ts

@@ -1,3 +1,4 @@
+export * from "./rule-utils.js"
 export * from "./erb-no-empty-tags.js"
 export * from "./erb-no-output-control-flow.js"
 export * from "./erb-no-silent-tag-in-attribute-name.js"
@@ -20,6 +21,7 @@ export * from "./html-no-aria-hidden-on-focusable.js"
 export * from "./html-no-block-inside-inline.js"
 export * from "./html-no-duplicate-attributes.js"
 export * from "./html-no-duplicate-ids.js"
+export * from "./html-no-empty-attributes.js"
 export * from "./html-no-empty-headings.js"
 export * from "./html-no-nested-links.js"
 export * from "./html-no-positive-tab-index.js"
@@ -27,3 +29,4 @@ export * from "./html-no-self-closing.js"
 export * from "./html-no-title-attribute.js"
 export * from "./html-tag-name-lowercase.js"
 export * from "./svg-tag-name-capitalization.js"
+export * from "./html-no-underscores-in-attribute-names.js"

package/src/rules/rule-utils.ts

@@ -24,8 +24,6 @@ import type {
   Node
 } from "@herb-tools/core"
 
-import { IdentityPrinter } from "@herb-tools/printer"
-
 import { DEFAULT_LINT_CONTEXT } from "../types.js"
 
 import type * as Nodes from "@herb-tools/core"
@@ -180,11 +178,13 @@ export function getTagName(node: HTMLOpenTagNode): string | null {
  * Gets the attribute name from an HTMLAttributeNode (lowercased)
  * Returns null if the attribute name contains dynamic content (ERB)
  */
-export function getAttributeName(attributeNode: HTMLAttributeNode): string | null {
+export function getAttributeName(attributeNode: HTMLAttributeNode, lowercase = true): string | null {
   if (attributeNode.name?.type === "AST_HTML_ATTRIBUTE_NAME_NODE") {
     const nameNode = attributeNode.name as HTMLAttributeNameNode
     const staticName = getStaticAttributeName(nameNode)
 
+    if (!lowercase) return staticName
+
     return staticName ? staticName.toLowerCase() : null
   }
 
@@ -287,7 +287,7 @@ export function getStaticAttributeValueContent(attributeNode: HTMLAttributeNode)
  * Gets the attribute value content from an HTMLAttributeValueNode
  */
 export function getAttributeValue(attributeNode: HTMLAttributeNode): string | null {
-  const valueNode: HTMLAttributeValueNode | null = attributeNode.value as HTMLAttributeValueNode
+  const valueNode: HTMLAttributeValueNode | null = attributeNode.value as HTMLAttributeValueNode
 
   if (valueNode === null) return null
 
@@ -381,7 +381,7 @@ export function hasAttribute(node: HTMLOpenTagNode, attributeName: string): bool
 /**
  * Checks if a tag has a specific attribute
  */
-export function getAttribute(node: HTMLOpenTagNode, attributeName: string): HTMLAttributeNode | null {
+export function getAttribute(node: HTMLOpenTagNode, attributeName: string): HTMLAttributeNode | null {
   const attributes = getAttributes(node)
 
   return findAttributeByName(attributes, attributeName)
@@ -486,6 +486,7 @@ export interface StaticAttributeStaticValueParams {
   attributeName: string
   attributeValue: string
   attributeNode: HTMLAttributeNode
+  originalAttributeName: string
   parentNode: HTMLOpenTagNode
 }
 
@@ -493,6 +494,7 @@ export interface StaticAttributeDynamicValueParams {
   attributeName: string
   valueNodes: Node[]
   attributeNode: HTMLAttributeNode
+  originalAttributeName: string
   parentNode: HTMLOpenTagNode
   combinedValue?: string | null
 }
@@ -632,6 +634,7 @@ export abstract class AttributeVisitorMixin extends BaseRuleVisitor {
   private checkAttributesOnNode(node: HTMLOpenTagNode): void {
     forEachAttribute(node, (attributeNode) => {
       const staticAttributeName = getAttributeName(attributeNode)
+      const originalAttributeName = getAttributeName(attributeNode, false) || ""
       const isDynamicName = hasDynamicAttributeName(attributeNode)
       const staticAttributeValue = getStaticAttributeValue(attributeNode)
       const valueNodes = getAttributeValueNodes(attributeNode)
@@ -643,16 +646,17 @@ export abstract class AttributeVisitorMixin extends BaseRuleVisitor {
           attributeName: staticAttributeName,
           attributeValue: staticAttributeValue,
           attributeNode,
+          originalAttributeName,
           parentNode: node
         })
       } else if (staticAttributeName && isEffectivelyStaticValue && !hasOutputERB) {
         const validatableContent = getValidatableStaticContent(valueNodes) || ""
 
-        this.checkStaticAttributeStaticValue({ attributeName: staticAttributeName, attributeValue: validatableContent, attributeNode, parentNode: node })
+        this.checkStaticAttributeStaticValue({ attributeName: staticAttributeName, attributeValue: validatableContent, attributeNode, originalAttributeName, parentNode: node })
       } else if (staticAttributeName && hasOutputERB) {
         const combinedValue = getAttributeValue(attributeNode)
 
-        this.checkStaticAttributeDynamicValue({ attributeName: staticAttributeName, valueNodes, attributeNode, parentNode: node, combinedValue })
+        this.checkStaticAttributeDynamicValue({ attributeName: staticAttributeName, valueNodes, attributeNode, parentNode: node, originalAttributeName, combinedValue })
       } else if (isDynamicName && staticAttributeValue !== null) {
         const nameNode = attributeNode.name as HTMLAttributeNameNode
         const nameNodes = nameNode.children || []
@@ -673,28 +677,28 @@ export abstract class AttributeVisitorMixin extends BaseRuleVisitor {
   /**
    * Static attribute name with static value: class="container"
    */
-  protected checkStaticAttributeStaticValue(params: StaticAttributeStaticValueParams): void {
+  protected checkStaticAttributeStaticValue(_params: StaticAttributeStaticValueParams): void {
     // Default implementation does nothing
   }
 
   /**
    * Static attribute name with dynamic value: class="<%= css_class %>"
    */
-  protected checkStaticAttributeDynamicValue(params: StaticAttributeDynamicValueParams): void {
+  protected checkStaticAttributeDynamicValue(_params: StaticAttributeDynamicValueParams): void {
     // Default implementation does nothing
   }
 
   /**
    * Dynamic attribute name with static value: data-<%= key %>="foo"
    */
-  protected checkDynamicAttributeStaticValue(params: DynamicAttributeStaticValueParams): void {
+  protected checkDynamicAttributeStaticValue(_params: DynamicAttributeStaticValueParams): void {
     // Default implementation does nothing
   }
 
   /**
    * Dynamic attribute name with dynamic value: data-<%= key %>="<%= value %>"
    */
-  protected checkDynamicAttributeDynamicValue(params: DynamicAttributeDynamicValueParams): void {
+  protected checkDynamicAttributeDynamicValue(_params: DynamicAttributeDynamicValueParams): void {
     // Default implementation does nothing
   }
 }

package/src/rules/svg-tag-name-capitalization.ts

@@ -44,8 +44,8 @@ class SVGTagNameCapitalizationVisitor extends BaseRuleVisitor {
     if (correctCamelCase && tagName !== correctCamelCase) {
       let type: string = node.type
 
-      if (node.type == "AST_HTML_OPEN_TAG_NODE") type = "Opening"
-      if (node.type == "AST_HTML_CLOSE_TAG_NODE") type = "Closing"
+      if (node.type === "AST_HTML_OPEN_TAG_NODE") type = "Opening"
+      if (node.type === "AST_HTML_CLOSE_TAG_NODE") type = "Closing"
 
       this.addOffense(
         `${type} SVG tag name \`${tagName}\` should use proper capitalization. Use \`${correctCamelCase}\` instead.`,