npm - @herb-tools/linter - Versions diffs - 0.7.5 → 0.8.0 - Mend

@herb-tools/linter 0.7.5 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (394) hide show

package/docs/rules/html-boolean-attributes-no-value.md CHANGED Viewed

@@ -21,7 +21,7 @@ For example, instead of writing `disabled="disabled"` or `disabled="true"`, simp
 <button disabled>Submit</button>
-<select multiple>
+<select multiple></select>
 ```
 ### 🚫 Bad
@@ -31,7 +31,7 @@ For example, instead of writing `disabled="disabled"` or `disabled="true"`, simp
 <button disabled="true">Submit</button>
-<select multiple="multiple">
+<select multiple="multiple"></select>
 ```
 ## References

package/docs/rules/html-head-only-elements.md ADDED Viewed

@@ -0,0 +1,81 @@
+# Linter Rule: Require head-scoped elements inside `<head>`
+**Rule:** `html-head-only-elements`
+## Description
+Enforce that certain elements only appear inside the `<head>` section of the document.
+Elements like `<title>`, `<meta>`, `<base>`, `<link>`, and `<style>` are permitted only inside the `<head>` element. They must not appear inside `<body>` or outside of `<html>`. Placing them elsewhere produces invalid HTML and relies on browser error correction.
+> [!NOTE] Exception
+> `<title>` elements are allowed inside `<svg>` elements for accessibility purposes.
+## Rationale
+The HTML specification requires certain elements to appear only in the `<head>` section because they affect document metadata, resource loading, or global behavior:
+Placing these elements outside `<head>` leads to invalid HTML and undefined behavior across browsers.
+## Examples
+### ✅ Good
+```erb
+<head>
+  <title>My Page</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <h1>Welcome</h1>
+</body>
+```
+```erb
+<head>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= favicon_link_tag 'favicon.ico' %>
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+  <title><%= content_for?(:title) ? yield(:title) : "Default Title" %></title>
+</head>
+```
+```erb
+<body>
+  <svg>
+    <title>Chart Title</title>
+    <rect width="100" height="100" />
+  </svg>
+</body>
+```
+### 🚫 Bad
+```erb
+<body>
+  <title>My Page</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="/styles.css">
+  <h1>Welcome</h1>
+</body>
+```
+```erb
+<body>
+  <title><%= content_for?(:title) ? yield(:title) : "Default Title" %></title>
+</body>
+```
+## References
+* [HTML Living Standard - The `head` element](https://html.spec.whatwg.org/multipage/semantics.html#the-head-element)

package/docs/rules/html-input-require-autocomplete.md ADDED Viewed

@@ -0,0 +1,64 @@
+# Linter Rule: Require `autocomplete` attributes on `<input>` tags
+**Rule:** `html-input-require-autocomplete`
+## Description
+Require an `autocomplete` attribute on `<input>` elements with types that support autocomplete functionality. This rule ensures that developers explicitly declare autocomplete behavior for form inputs.
+## Rationale
+The HTML `autocomplete` attribute helps users complete forms by using data stored in the browser. This is particularly useful for people with motor disabilities or cognitive impairment who may have difficulties filling out forms online. Without an explicit `autocomplete` attribute, behavior varies across browsers and can lead to inconsistent user experiences.
+If you prefer not to specify a specific autocomplete value, use `autocomplete="on"` to enable browser defaults or `autocomplete="off"` to explicitly disable it.
+## Affected Input Types
+This rule applies to the following input types:
+- `color`
+- `date`
+- `datetime-local`
+- `email`
+- `month`
+- `number`
+- `password`
+- `range`
+- `search`
+- `tel`
+- `text`
+- `time`
+- `url`
+- `week`
+## Examples
+### ✅ Good
+```erb
+<input type="email" autocomplete="email">
+<input type="url" autocomplete="off">
+<input type="password" autocomplete="on">
+```
+### 🚫 Bad
+```erb
+<input type="email">
+<input type="url">
+<input type="password">
+```
+## References
+* [Inspiration: ERB Lint `RequireInputAutocomplete` rule](https://github.com/shopify/erb_lint?tab=readme-ov-file#requireinputautocomplete)
+* [HTML attribute: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+* [WCAG: Using HTML autocomplete attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H98)
+* [HTML Specification: Autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)

package/docs/rules/html-no-aria-hidden-on-focusable.md CHANGED Viewed

@@ -17,7 +17,7 @@ Elements with `aria-hidden="true"` are completely hidden from assistive technolo
 ```erb
 <button>Submit</button>
 <a href="/link">Link</a>
-<input type="text">
+<input type="text" autocomplete="off">
 <textarea></textarea>
 <div aria-hidden="true">Decorative content</div>
@@ -33,7 +33,7 @@ Elements with `aria-hidden="true"` are completely hidden from assistive technolo
 <a href="/link" aria-hidden="true">Link</a>
-<input type="text" aria-hidden="true">
+<input type="text" autocomplete="off" aria-hidden="true">
 <textarea aria-hidden="true"></textarea>

package/docs/rules/html-no-duplicate-attributes.md CHANGED Viewed

@@ -17,7 +17,7 @@ Catching duplicates early helps prevent subtle bugs, improves code correctness,
 ### ✅ Good
 ```erb
-<input type="text" name="username" id="user-id">
+<input type="text" name="username" id="user-id" autocomplete="off">
 <button type="submit" disabled>Submit</button>
 ```
@@ -25,7 +25,7 @@ Catching duplicates early helps prevent subtle bugs, improves code correctness,
 ### 🚫 Bad
 ```erb
-<input type="text" type="password" name="username">
+<input type="text" type="password" name="username" autocomplete="off">
 <button type="submit" type="button" disabled>Submit</button>
 ```

package/docs/rules/html-no-duplicate-meta-names.md ADDED Viewed

@@ -0,0 +1,64 @@
+# Linter Rule: Duplicate `<meta>` name attributes are not allowed
+**Rule:** `html-no-duplicate-meta-names`
+## Description
+Warn when multiple `<meta>` tags share the same `name` or `http-equiv` attribute within the same `<head>` block, unless they are wrapped in conditional comments.
+## Rationale
+In HTML, duplicate `<meta>` tags with the same `name` or `http-equiv` can cause unexpected behavior. For example, search engines or social sharing tools may use the wrong value. These duplicates are often the result of copy-paste or partial rendering logic and should be avoided.
+## Examples
+### ✅ Good
+```erb
+<head>
+  <meta name="description" content="Welcome to our site">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+```
+```erb
+<head>
+  <% if mobile? %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <% else %>
+    <meta name="viewport" content="width=1024">
+  <% end %>
+</head>
+```
+### 🚫 Bad
+```erb
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=1024">
+</head>
+```
+```erb
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="X-UA-Compatible" content="chrome=1">
+</head>
+```
+```erb
+<head>
+  <meta name="viewport" content="width=1024">
+  <% if mobile? %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <% else %>
+    <meta http-equiv="refresh" content="30">
+  <% end %>
+</head>
+```
+## References
+\-

package/docs/rules/html-no-empty-attributes.md CHANGED Viewed

@@ -40,7 +40,7 @@ This rule helps ensure that required attributes are only added when they are pop
 ```erb
 <div id="header"></div>
 <img src="/logo.png" alt="Company logo">
-<input type="text" name="email">
+<input type="text" name="email" autocomplete="off">
 <!-- Dynamic attributes with meaningful values -->
 <div data-<%= key %>="<%= value %>" aria-<%= prop %>="<%= description %>">
@@ -55,8 +55,8 @@ This rule helps ensure that required attributes are only added when they are pop
 ```erb
 <div id=""></div>
-<img src="">
-<input name="">
+<img src="" alt="Company logo">
+<input name="" autocomplete="off">
 <div data-config="">Content</div>
 <button aria-label="">×</button>

package/docs/rules/html-no-empty-headings.md CHANGED Viewed

@@ -15,56 +15,34 @@ Headings relay the structure of a webpage and provide a meaningful, hierarchical
 ### ✅ Good
 ```erb
-<h*>Heading Content</h*>
-```
+<h1>Heading Content</h1>
-```erb
-<h*><span>Text</span><h*>
-```
+<h1><span>Text</span></h1>
-```erb
 <div role="heading" aria-level="1">Heading Content</div>
-```
-```erb
-<h* aria-hidden="true">Heading Content</h*>
-```
+<h1 aria-hidden="true">Heading Content</h1>
-```erb
-<h* hidden>Heading Content</h*>
+<h1 hidden>Heading Content</h1>
 ```
 ### 🚫 Bad
 ```erb
 <h1></h1>
-```
-```erb
 <h2></h2>
-```
-```erb
 <h3></h3>
-```
-```erb
 <h4></h4>
-```
-```erb
 <h5></h5>
-```
-```erb
 <h6></h6>
-```
-```erb
 <div role="heading" aria-level="1"></div>
-```
-```erb
 <h1><span aria-hidden="true">Inaccessible text</span></h1>
 ```

package/docs/rules/html-no-positive-tab-index.md CHANGED Viewed

@@ -41,8 +41,7 @@ The recommended approach is to structure your HTML in the correct tab order and
 <button tabindex="2">Second in tab order</button>
-<input tabindex="5" type="text">
+<input tabindex="5" type="text" autocomplete="off">
 <button tabindex="10">Submit</button>
 ```

package/docs/rules/html-no-self-closing.md CHANGED Viewed

@@ -22,6 +22,21 @@ Self-closing syntax is an XHTML artifact. In HTML:
 Removing the slash ensures HTML5-compliant, cleaner markup and avoids mixing
 XHTML and HTML styles.
+## Exception for Email Templates
+::: info
+This rule is automatically disabled for ActionMailer view files (paths matching `**/views/**/*_mailer/**/*`) because older email clients, particularly legacy versions of Microsoft Outlook, require self-closing syntax for proper rendering of void elements like `<br />`.
+:::
+If you want to enable this rule for email templates as well, you can override the default exclusion in your `.herb.yml` configuration:
+```yaml [.herb.yml]
+linter:
+  rules:
+    html-no-self-closing:
+      exclude: []  # Override to enable for all files including ActionMailer views
+```
 ## Examples
 ### ✅ Good
@@ -33,7 +48,7 @@ XHTML and HTML styles.
 <custom-element></custom-element>
 <img src="/logo.png" alt="Logo">
-<input type="text">
+<input type="text" autocomplete="off">
 <br>
 <hr>
 ```
@@ -51,7 +66,7 @@ XHTML and HTML styles.
 <img src="/logo.png" alt="Logo" />
-<input type="text" />
+<input type="text" autocomplete="off" />
 <br />

package/docs/rules/html-no-space-in-tag.md ADDED Viewed

@@ -0,0 +1,66 @@
+# Linter Rule: Enforce consistent spacing within HTML tags
+**Rule:** `html-no-space-in-tag`
+## Description
+Enforce consistent spacing within HTML opening and closing tags. This rule ensures:
+- Exactly one space between tag name and first attribute
+- Exactly one space between attributes
+- No extra spaces before the closing `>` in non-self-closing tags
+- Exactly one space before `/>` in self-closing tags
+- No whitespace in closing tags (e.g., `</div>`)
+- Consistent indentation in multiline tags
+## Rationale
+Consistent spacing within HTML tags improves code readability and maintainability. Extra or missing spaces can make templates harder to scan and can indicate formatting inconsistencies across a codebase. This rule enforces a canonical style that is both readable and machine-parseable.
+Self-closing tags (`<img />`, `<br />`) should have exactly one space before the `/>` to maintain visual consistency with HTML5 and JSX conventions.
+## Examples
+### ✅ Good
+```erb
+<div class="foo"></div>
+<img src="/logo.png" alt="Logo">
+<input class="foo" name="bar">
+<div class="foo" data-x="bar"></div>
+<div
+  class="foo"
+  data-x="bar"
+>
+  foo
+</div>
+```
+### 🚫 Bad
+```erb
+<div  class="foo"></div>
+<div class="foo" ></div>
+<img alt="Logo" src="/logo.png">
+<div class="foo"      data-x="bar"></div>
+<div
+   class="foo"
+    data-x="bar"
+>
+  foo
+</div>
+<div >
+</  div>
+```
+## References
+- [Inspiration: ERB Lint `SpaceInHtmlTag` rule](https://github.com/shopify/erb_lint)

package/docs/rules/html-no-title-attribute.md CHANGED Viewed

@@ -33,7 +33,7 @@ This rule allows `title` on `<iframe>` and `<link>` elements where it serves spe
 <button aria-label="Close dialog">×</button>
 <!-- Use aria-describedby for additional context -->
-<input type="password" aria-describedby="pwd-help">
+<input type="password" aria-describedby="pwd-help" autocomplete="off">
 <div id="pwd-help">Password must be at least 8 characters</div>
 <!-- Exceptions: title allowed on iframe and links -->
@@ -52,7 +52,7 @@ This rule allows `title` on `<iframe>` and `<link>` elements where it serves spe
 <span title="Required field">*</span>
 <!-- Don't use title on form elements -->
-<input type="text" title="Enter your name">
+<input type="text" title="Enter your name" autocomplete="off">
 <select title="Choose your country">
   <option>US</option>

package/docs/rules/html-no-underscores-in-attribute-names.md CHANGED Viewed

@@ -23,7 +23,7 @@ Underscores in attribute names violate the HTML specification and are not suppor
 ```html
 <div data-user-id="123"></div>
-<img aria-label="Close">
+<img aria-label="Close" alt="Close">
 <div data-<%= key %>-attribute="value"></div>
 ```
@@ -33,7 +33,7 @@ Underscores in attribute names violate the HTML specification and are not suppor
 ```html
 <div data_user_id="123"></div>
-<img aria_label="Close">
+<img aria_label="Close" alt="Close">
 <div data-<%= key %>_attribute="value"></div>
 ```

package/docs/rules/html-tag-name-lowercase.md CHANGED Viewed

@@ -33,7 +33,7 @@ This rule does not apply to child elements within `<svg>` tags, as SVG element n
 ```erb
 <div class="container"></div>
-<input type="text" name="username">
+<input type="text" name="username" autocomplete="off">
 <span>Label</span>
@@ -45,7 +45,7 @@ This rule does not apply to child elements within `<svg>` tags, as SVG element n
 ```erb
 <DIV class="container"></DIV>
-<Input type="text" name="username">
+<Input type="text" name="username" autocomplete="off">
 <Span>Label</Span>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/linter",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "HTML+ERB linter for validating HTML structure and enforcing best practices",
   "license": "MIT",
   "homepage": "https://herb-tools.dev",
@@ -36,13 +36,21 @@
       "types": "./dist/types/src/cli.d.ts",
       "require": "./dist/src/cli.js",
       "default": "./dist/src/cli.js"
+    },
+    "./loader": {
+      "types": "./dist/types/loader.d.ts",
+      "import": "./dist/loader.js",
+      "require": "./dist/loader.cjs",
+      "default": "./dist/loader.js"
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.7.5",
-    "@herb-tools/highlighter": "0.7.5",
-    "@herb-tools/node-wasm": "0.7.5",
-    "@herb-tools/printer": "0.7.5",
+    "@herb-tools/config": "0.8.0",
+    "@herb-tools/core": "0.8.0",
+    "@herb-tools/highlighter": "0.8.0",
+    "@herb-tools/node-wasm": "0.8.0",
+    "@herb-tools/printer": "0.8.0",
+    "@herb-tools/rewriter": "0.8.0",
     "glob": "^11.0.3"
   },
   "files": [