@herb-tools/linter 0.4.0 → 0.4.2

package/src/rules/rule-utils.ts

@@ -2,16 +2,15 @@ import {
   Visitor
 } from "@herb-tools/core"
 
-import type { 
-  ERBNode, 
+import type {
+  ERBNode,
   HTMLAttributeNameNode,
-  HTMLAttributeNode, 
-  HTMLAttributeValueNode, 
-  HTMLOpenTagNode, 
-  HTMLSelfCloseTagNode, 
-  LiteralNode, 
-  Location, 
-  Node 
+  HTMLAttributeNode,
+  HTMLAttributeValueNode,
+  HTMLOpenTagNode,
+  HTMLSelfCloseTagNode,
+  LiteralNode,
+  Location
 } from "@herb-tools/core"
 import type { LintOffense, LintSeverity, } from "../types.js"
 
@@ -83,18 +82,36 @@ export function getAttributeName(attributeNode: HTMLAttributeNode): string | nul
  * Gets the attribute value content from an HTMLAttributeValueNode
  */
 export function getAttributeValue(attributeNode: HTMLAttributeNode): string | null {
-  if (attributeNode.value?.type === "AST_HTML_ATTRIBUTE_VALUE_NODE") {
-    const valueNode = attributeNode.value as HTMLAttributeValueNode
+  const valueNode: HTMLAttributeValueNode | null = attributeNode.value as HTMLAttributeValueNode
+
+  if (valueNode === null) return null
+
+  if (valueNode.type !== "AST_HTML_ATTRIBUTE_VALUE_NODE" || !valueNode.children?.length) {
+    return null
+  }
+
+  let result = ""
+
+  for (const child of valueNode.children) {
+    switch (child.type) {
+      case "AST_ERB_CONTENT_NODE": {
+        const erbNode = child as ERBNode
+
+        if (erbNode.content) {
+          result += `${erbNode.tag_opening?.value}${erbNode.content.value}${erbNode.tag_closing?.value}`
+        }
+
+        break
+      }
 
-    if (valueNode.children && valueNode.children.length > 0) {
-      return valueNode.children
-        .filter(child => child.type === "AST_LITERAL_NODE")
-        .map(child => (child as LiteralNode).content)
-        .join("")
+      case "AST_LITERAL_NODE": {
+        result += (child as LiteralNode).content
+        break
+      }
     }
   }
 
-  return null
+  return result
 }
 
 /**
@@ -171,6 +188,117 @@ export const HTML_BOOLEAN_ATTRIBUTES = new Set([
 
 export const HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"])
 
+/**
+ * SVG elements that use camelCase naming
+ */
+export const SVG_CAMEL_CASE_ELEMENTS = new Set([
+  "animateMotion",
+  "animateTransform",
+  "clipPath",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "foreignObject",
+  "glyphRef",
+  "linearGradient",
+  "radialGradient",
+  "textPath"
+])
+
+/**
+ * Mapping from lowercase SVG element names to their correct camelCase versions
+ * Generated dynamically from SVG_CAMEL_CASE_ELEMENTS
+ */
+export const SVG_LOWERCASE_TO_CAMELCASE = new Map(
+  Array.from(SVG_CAMEL_CASE_ELEMENTS).map(element => [element.toLowerCase(), element])
+)
+
+export const VALID_ARIA_ROLES = new Set([
+  "banner", "complementary", "contentinfo", "form", "main", "navigation", "region", "search",
+  "article", "cell", "columnheader", "definition", "directory", "document", "feed", "figure",
+  "group", "heading", "img", "list", "listitem", "math", "none", "note", "presentation",
+  "row", "rowgroup", "rowheader", "separator", "table", "term", "tooltip",
+  "alert", "alertdialog", "button", "checkbox", "combobox", "dialog", "grid", "gridcell", "link",
+  "listbox", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "option",
+  "progressbar", "radio", "radiogroup", "scrollbar", "searchbox", "slider", "spinbutton",
+  "status", "switch", "tab", "tablist", "tabpanel", "textbox", "timer", "toolbar", "tree",
+  "treegrid", "treeitem",
+  "log", "marquee"
+]);
+
+export const ARIA_ATTRIBUTES =  new Set([
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-details',
+  'aria-disabled',
+  'aria-dropeffect',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-grabbed',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-modal',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+])
+
 /**
  * Checks if an element is inline
  */

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

@@ -0,0 +1,73 @@
+import { BaseRuleVisitor, SVG_CAMEL_CASE_ELEMENTS, SVG_LOWERCASE_TO_CAMELCASE } from "./rule-utils.js"
+
+import type { Rule, LintOffense } from "../types.js"
+import type { HTMLElementNode, HTMLOpenTagNode, HTMLCloseTagNode, HTMLSelfCloseTagNode, Node } from "@herb-tools/core"
+
+class SVGTagNameCapitalizationVisitor extends BaseRuleVisitor {
+  private insideSVG = false
+
+  visitHTMLElementNode(node: HTMLElementNode): void {
+    const tagName = node.tag_name?.value
+
+    if (tagName && ["svg"].includes(tagName.toLowerCase())) {
+      const wasInsideSVG = this.insideSVG
+      this.insideSVG = true
+      this.visitChildNodes(node)
+      this.insideSVG = wasInsideSVG
+      return
+    }
+
+    if (this.insideSVG) {
+      if (node.open_tag) {
+        this.checkTagName(node.open_tag as HTMLOpenTagNode)
+      }
+      if (node.close_tag) {
+        this.checkTagName(node.close_tag as HTMLCloseTagNode)
+      }
+    }
+
+    this.visitChildNodes(node)
+  }
+
+  visitHTMLSelfCloseTagNode(node: HTMLSelfCloseTagNode): void {
+    if (this.insideSVG) {
+      this.checkTagName(node)
+    }
+    this.visitChildNodes(node)
+  }
+
+  private checkTagName(node: HTMLOpenTagNode | HTMLCloseTagNode | HTMLSelfCloseTagNode): void {
+    const tagName = node.tag_name?.value
+
+    if (!tagName) return
+
+    if (SVG_CAMEL_CASE_ELEMENTS.has(tagName)) return
+
+    const lowercaseTagName = tagName.toLowerCase()
+    const correctCamelCase = SVG_LOWERCASE_TO_CAMELCASE.get(lowercaseTagName)
+
+    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_SELF_CLOSE_TAG_NODE") type = "Self-closing"
+
+      this.addOffense(
+        `${type} SVG tag name \`${tagName}\` should use proper capitalization. Use \`${correctCamelCase}\` instead.`,
+        node.tag_name!.location,
+        "error"
+      )
+    }
+  }
+}
+
+export class SVGTagNameCapitalizationRule implements Rule {
+  name = "svg-tag-name-capitalization"
+
+  check(node: Node): LintOffense[] {
+    const visitor = new SVGTagNameCapitalizationVisitor(this.name)
+    visitor.visit(node)
+    return visitor.offenses
+  }
+}