@herb-tools/linter 0.4.1 → 0.4.2

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

@@ -24,14 +24,43 @@ class RequireWhitespaceInsideTags extends BaseRuleVisitor {
 
     const value = content.value
 
-    this.checkOpenTagWhitespace(openTag, value)
-    this.checkCloseTagWhitespace(closeTag, value)
+    if (openTag.value === "<%#") {
+      this.checkCommentTagWhitespace(openTag, closeTag, value)
+    } else {
+      this.checkOpenTagWhitespace(openTag, value)
+      this.checkCloseTagWhitespace(closeTag, value)
+    }
+  }
+
+  private checkCommentTagWhitespace(openTag: Token, closeTag: Token, content: string): void {
+    if (!content.startsWith(" ") && !content.startsWith("\n") && !content.startsWith("=")) {
+      this.addOffense(
+        `Add whitespace after \`${openTag.value}\`.`,
+        openTag.location,
+        "error"
+      )
+    } else if (content.startsWith("=") && content.length > 1 && !content[1].match(/\s/)) {
+      this.addOffense(
+        `Add whitespace after \`<%#=\`.`,
+        openTag.location,
+        "error"
+      )
+    }
+
+    if (!content.endsWith(" ") && !content.endsWith("\n")) {
+      this.addOffense(
+        `Add whitespace before \`${closeTag.value}\`.`,
+        closeTag.location,
+        "error"
+      )
+    }
   }
 
   private checkOpenTagWhitespace(openTag: Token, content:string):void {
     if (content.startsWith(" ") || content.startsWith("\n")) {
       return
     }
+
     this.addOffense(
       `Add whitespace after \`${openTag.value}\`.`,
       openTag.location,
@@ -43,6 +72,7 @@ class RequireWhitespaceInsideTags extends BaseRuleVisitor {
     if (content.endsWith(" ") || content.endsWith("\n")) {
       return
     }
+
     this.addOffense(
       `Add whitespace before \`${closeTag.value}\`.`,
       closeTag.location,
@@ -53,6 +83,7 @@ class RequireWhitespaceInsideTags extends BaseRuleVisitor {
 
 export class ERBRequireWhitespaceRule implements Rule {
   name = "erb-require-whitespace-inside-tags"
+
   check(node: Node): LintOffense[] {
     const visitor = new RequireWhitespaceInsideTags(this.name)
     visitor.visit(node)

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

@@ -1,17 +1,29 @@
 import { BaseRuleVisitor } from "./rule-utils.js"
 
 import type { Rule, LintOffense } from "../types.js"
-import type { HTMLOpenTagNode, HTMLCloseTagNode, HTMLSelfCloseTagNode, Node } from "@herb-tools/core"
+import type { HTMLElementNode, HTMLOpenTagNode, HTMLCloseTagNode, HTMLSelfCloseTagNode, Node } from "@herb-tools/core"
 
 class TagNameLowercaseVisitor extends BaseRuleVisitor {
-  visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
-    this.checkTagName(node)
-    this.visitChildNodes(node)
-  }
+  visitHTMLElementNode(node: HTMLElementNode): void {
+    const tagName = node.tag_name?.value
+
+    if (node.open_tag) {
+      this.checkTagName(node.open_tag as HTMLOpenTagNode)
+    }
+
+    if (tagName && ["svg"].includes(tagName.toLowerCase())) {
+      if (node.close_tag) {
+        this.checkTagName(node.close_tag as HTMLCloseTagNode)
+      }
+
+      return
+    }
 
-  visitHTMLCloseTagNode(node: HTMLCloseTagNode): void {
-    this.checkTagName(node)
     this.visitChildNodes(node)
+
+    if (node.close_tag) {
+      this.checkTagName(node.close_tag as HTMLCloseTagNode)
+    }
   }
 
   visitHTMLSelfCloseTagNode(node: HTMLSelfCloseTagNode): void {
@@ -21,9 +33,12 @@ class TagNameLowercaseVisitor extends BaseRuleVisitor {
 
   private checkTagName(node: HTMLOpenTagNode | HTMLCloseTagNode | HTMLSelfCloseTagNode): void {
     const tagName = node.tag_name?.value
+
     if (!tagName) return
 
-    if (tagName !== tagName.toLowerCase()) {
+    const lowercaseTagName = tagName.toLowerCase()
+
+    if (tagName !== lowercaseTagName) {
       let type: string = node.type
 
       if (node.type == "AST_HTML_OPEN_TAG_NODE") type = "Opening"
@@ -31,7 +46,7 @@ class TagNameLowercaseVisitor extends BaseRuleVisitor {
       if (node.type == "AST_HTML_SELF_CLOSE_TAG_NODE") type = "Self-closing"
 
       this.addOffense(
-        `${type} tag name \`${tagName}\` should be lowercase. Use \`${tagName.toLowerCase()}\` instead.`,
+        `${type} tag name \`${tagName}\` should be lowercase. Use \`${lowercaseTagName}\` instead.`,
         node.tag_name!.location,
         "error"
       )

package/src/rules/index.ts

@@ -13,3 +13,4 @@ export * from "./html-no-duplicate-ids.js"
 export * from "./html-no-empty-headings.js"
 export * from "./html-no-nested-links.js"
 export * from "./html-tag-name-lowercase.js"
+export * from "./svg-tag-name-capitalization.js"

package/src/rules/rule-utils.ts

@@ -188,6 +188,53 @@ 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",

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
+  }
+}