html-validate 10.7.0 → 10.9.0

package/dist/cjs/core.js

@@ -4008,7 +4008,7 @@ class Rule {
   }
 }
 
-const defaults$z = {
+const defaults$B = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -4052,7 +4052,7 @@ class AllowedLinks extends Rule {
   allowRelative;
   allowAbsolute;
   constructor(options) {
-    super({ ...defaults$z, ...options });
+    super({ ...defaults$B, ...options });
     this.allowExternal = parseAllow(this.options.allowExternal);
     this.allowRelative = parseAllow(this.options.allowRelative);
     this.allowAbsolute = parseAllow(this.options.allowAbsolute);
@@ -4220,7 +4220,7 @@ class AllowedLinks extends Rule {
   }
 }
 
-const defaults$y = {
+const defaults$A = {
   accessible: true
 };
 function findByTarget(target, siblings) {
@@ -4250,7 +4250,7 @@ function getDescription$1(context) {
 }
 class AreaAlt extends Rule {
   constructor(options) {
-    super({ ...defaults$y, ...options });
+    super({ ...defaults$A, ...options });
   }
   static schema() {
     return {
@@ -4329,7 +4329,7 @@ class AriaHiddenBody extends Rule {
   }
 }
 
-const defaults$x = {
+const defaults$z = {
   allowAnyNamable: false,
   elements: {
     include: null,
@@ -4377,7 +4377,7 @@ function isValidUsage(target, meta) {
 }
 class AriaLabelMisuse extends Rule {
   constructor(options) {
-    super({ ...defaults$x, ...options });
+    super({ ...defaults$z, ...options });
   }
   static schema() {
     return {
@@ -4546,14 +4546,14 @@ class CaseStyle {
   }
 }
 
-const defaults$w = {
+const defaults$y = {
   style: "lowercase",
   ignoreForeign: true
 };
 class AttrCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$w, ...options });
+    super({ ...defaults$y, ...options });
     this.style = new CaseStyle(this.options.style, "attr-case");
   }
   static schema() {
@@ -4958,7 +4958,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$v = {
+const defaults$x = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4991,7 +4991,7 @@ function generateDescription(name, pattern) {
 class AttrPattern extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$v, ...options });
+    super({ ...defaults$x, ...options });
     this.pattern = generateRegexp(this.options.pattern);
   }
   static schema() {
@@ -5038,7 +5038,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$u = {
+const defaults$w = {
   style: "auto",
   unquoted: false
 };
@@ -5104,7 +5104,7 @@ class AttrQuotes extends Rule {
     };
   }
   constructor(options) {
-    super({ ...defaults$u, ...options });
+    super({ ...defaults$w, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   setup() {
@@ -5260,13 +5260,13 @@ class AttributeAllowedValues extends Rule {
   }
 }
 
-const defaults$t = {
+const defaults$v = {
   style: "omit"
 };
 class AttributeBooleanStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$v, ...options });
     this.hasInvalidStyle = parseStyle$2(this.options.style);
   }
   static schema() {
@@ -5336,13 +5336,13 @@ function reportMessage$1(attr, style) {
   return "";
 }
 
-const defaults$s = {
+const defaults$u = {
   style: "omit"
 };
 class AttributeEmptyStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$s, ...options });
+    super({ ...defaults$u, ...options });
     this.hasInvalidStyle = parseStyle$1(this.options.style);
   }
   static schema() {
@@ -5459,6 +5459,122 @@ class AttributeMisuse extends Rule {
   }
 }
 
+const defaults$t = {
+  preferred: void 0
+};
+function isPasswordInput(event) {
+  const { target } = event;
+  if (!target.is("input")) {
+    return false;
+  }
+  const type = target.getAttribute("type");
+  return type?.value?.toString().toLowerCase() === "password";
+}
+function isGroupingToken(token) {
+  return token.startsWith("section-") || token === "shipping" || token === "billing";
+}
+class AutocompletePassword extends Rule {
+  preferred;
+  constructor(options) {
+    super({ ...defaults$t, ...options });
+    this.preferred = options.preferred?.toLowerCase();
+  }
+  static schema() {
+    return {
+      preferred: {
+        type: "string"
+      }
+    };
+  }
+  documentation(context) {
+    const url = "https://html-validate.org/rules/autocomplete-password.html";
+    switch (context.kind) {
+      case "preferred-mismatch":
+        return {
+          description: [
+            `\`<input type="password">\` should use \`autocomplete="${context.preferred}"\`.`,
+            "",
+            `The configured preferred autocomplete value is \`"${context.preferred}"\` but the element uses \`"${context.value}"\`.`
+          ].join("\n"),
+          url
+        };
+      case "off":
+      case "missing":
+      default: {
+        const error = context.kind === "off" ? '`<input type="password">` should not use `autocomplete="off"`.' : '`<input type="password">` must have the `autocomplete` attribute.';
+        return {
+          description: [
+            error,
+            "",
+            "Browsers and password managers often ignore the absence of autocomplete and autofill password fields anyway, which can lead to unexpected behavior where users unknowingly submit autofilled passwords for unrelated fields.",
+            "",
+            "Use one of the following values:",
+            "",
+            '- `autocomplete="new-password"` for password creation forms',
+            '- `autocomplete="current-password"` for login forms'
+          ].join("\n"),
+          url
+        };
+      }
+    }
+  }
+  setup() {
+    this.on("tag:ready", isPasswordInput, (event) => {
+      const { preferred } = this;
+      const { target } = event;
+      const autocomplete = target.getAttribute("autocomplete");
+      if (!autocomplete) {
+        const context = { kind: "missing" };
+        this.report({
+          node: target,
+          message: '<input type="password"> is missing required "autocomplete" attribute',
+          location: target.location,
+          context
+        });
+        return;
+      }
+      if (autocomplete.isDynamic || !autocomplete.value) {
+        return;
+      }
+      const raw = autocomplete.value.toString().toLowerCase();
+      const tokens = new DOMTokenList(raw, autocomplete.valueLocation);
+      const index = tokens.findIndex((token) => !isGroupingToken(token));
+      const value = tokens.item(index);
+      const location = tokens.location(index);
+      if (!value) {
+        return;
+      }
+      if (value === "off") {
+        const context = { kind: "off" };
+        this.report({
+          node: target,
+          message: '<input type="password"> should not use autocomplete="off"',
+          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- location must be present if value is */
+          location,
+          context
+        });
+        return;
+      }
+      if (preferred) {
+        if (value !== preferred) {
+          const context = {
+            kind: "preferred-mismatch",
+            value,
+            preferred
+          };
+          this.report({
+            node: target,
+            message: `<input type="password"> should use autocomplete="${preferred}"`,
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- location must be present if value is */
+            location,
+            context
+          });
+        }
+      }
+    });
+  }
+}
+
 const patternNamesValues = [
   "kebabcase",
   "camelcase",
@@ -5590,7 +5706,7 @@ class BasePatternRule extends Rule {
   }
 }
 
-const defaults$r = {
+const defaults$s = {
   pattern: "kebabcase"
 };
 class ClassPattern extends BasePatternRule {
@@ -5598,7 +5714,7 @@ class ClassPattern extends BasePatternRule {
     super({
       ruleId: "class-pattern",
       attr: "class",
-      options: { ...defaults$r, ...options },
+      options: { ...defaults$s, ...options },
       allowedPatterns: patternNames
       // allow all patterns
     });
@@ -5748,13 +5864,13 @@ class CloseOrder extends Rule {
   }
 }
 
-const defaults$q = {
+const defaults$r = {
   include: null,
   exclude: null
 };
 class Deprecated extends Rule {
   constructor(options) {
-    super({ ...defaults$q, ...options });
+    super({ ...defaults$r, ...options });
   }
   static schema() {
     return {
@@ -5862,6 +5978,137 @@ function prettySource(source) {
   }
 }
 
+function quote(value, char = '"') {
+  return `${char}${value}${char}`;
+}
+
+const defaults$q = {
+  classes: []
+};
+function isRelevant$6(event) {
+  return event.key.toLowerCase() === "class";
+}
+function normalizeEntry(entry) {
+  const { class: className, message, replacement = [], url } = entry;
+  return {
+    class: className,
+    message,
+    replacement: Array.isArray(replacement) ? replacement : [replacement],
+    url
+  };
+}
+function formatDeprecatedMessage(className, entry) {
+  let message = `class "${className}" is deprecated`;
+  if (entry.replacement.length > 0) {
+    const joined = utils_naturalJoin.naturalJoin(
+      entry.replacement.map((r) => quote(r)),
+      "or"
+    );
+    message += ` and replaced with ${joined}`;
+  }
+  if (entry.message) {
+    message += `: ${entry.message}`;
+  }
+  return message;
+}
+function formatDocumentationDescription(context) {
+  const text = [];
+  const className = context.class;
+  let description = `The class \`${className}\` is deprecated and should not be used`;
+  if (context.message) {
+    description += `: ${context.message}.`;
+  } else {
+    description += ".";
+  }
+  text.push(description);
+  if (context.replacement.length === 1) {
+    text.push(`Use the replacement class ${quote(context.replacement[0], "`")} instead.`);
+  } else if (context.replacement.length > 1) {
+    const listItems = context.replacement.map((r) => `- ${quote(r, "`")}`);
+    text.push(`Use one of the following replacement classes instead:
+${listItems.join("\n")}`);
+  }
+  if (context.url) {
+    text.push(`For details see: ${context.url}`);
+  }
+  return text.join("\n\n");
+}
+class DeprecatedClass extends Rule {
+  deprecatedMap;
+  constructor(options) {
+    super({ ...defaults$q, ...options });
+    const { classes } = this.options;
+    this.deprecatedMap = new Map(classes.map((entry) => [entry.class, normalizeEntry(entry)]));
+  }
+  static schema() {
+    return {
+      classes: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            class: {
+              type: "string"
+            },
+            message: {
+              type: "string"
+            },
+            replacement: {
+              anyOf: [
+                {
+                  type: "string"
+                },
+                {
+                  type: "array",
+                  items: {
+                    type: "string"
+                  }
+                }
+              ]
+            },
+            url: {
+              type: "string"
+            }
+          },
+          required: ["class"],
+          additionalProperties: false
+        }
+      }
+    };
+  }
+  documentation(context) {
+    return {
+      description: formatDocumentationDescription(context),
+      url: "https://html-validate.org/rules/deprecated-class.html"
+    };
+  }
+  setup() {
+    this.on("attr", isRelevant$6, (event) => {
+      const { value, valueLocation, target } = event;
+      const classes = new DOMTokenList(value, valueLocation);
+      for (const { item, location } of classes.iterator()) {
+        const deprecatedEntry = this.deprecatedMap.get(item);
+        if (!deprecatedEntry) {
+          continue;
+        }
+        const message = formatDeprecatedMessage(item, deprecatedEntry);
+        const context = {
+          class: item,
+          message: deprecatedEntry.message ?? null,
+          replacement: deprecatedEntry.replacement,
+          url: deprecatedEntry.url ?? null
+        };
+        this.report({
+          node: target,
+          message,
+          location,
+          context
+        });
+      }
+    });
+  }
+}
+
 class DeprecatedRule extends Rule {
   documentation(context) {
     const preamble = context ? `The rule "${context}"` : "This rule";
@@ -9755,9 +10002,7 @@ const fieldNameGroup = {
   nickname: "text",
   username: "username",
   "new-password": "password",
-  // eslint-disable-line sonarjs/no-hardcoded-passwords -- false positive, it is not used as a password
   "current-password": "password",
-  // eslint-disable-line sonarjs/no-hardcoded-passwords -- false positive, it is not used as a password
   "one-time-code": "password",
   "organization-title": "text",
   organization: "text",
@@ -10799,10 +11044,12 @@ const bundledRules = {
   "attribute-boolean-style": AttributeBooleanStyle,
   "attribute-empty-style": AttributeEmptyStyle,
   "attribute-misuse": AttributeMisuse,
+  "autocomplete-password": AutocompletePassword,
   "class-pattern": ClassPattern,
   "close-attr": CloseAttr,
   "close-order": CloseOrder,
   deprecated: Deprecated,
+  "deprecated-class": DeprecatedClass,
   "deprecated-rule": DeprecatedRule,
   "doctype-html": NoStyleTag$1,
   "doctype-style": DoctypeStyle,
@@ -11164,6 +11411,7 @@ const config$1 = {
     "attribute-boolean-style": "error",
     "attribute-empty-style": "error",
     "attribute-misuse": "error",
+    "autocomplete-password": "error",
     "close-attr": "error",
     "close-order": "error",
     deprecated: "error",
@@ -12178,7 +12426,7 @@ class EventHandler {
 }
 
 const name = "html-validate";
-const version = "10.7.0";
+const version = "10.9.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function freeze(src) {