html-validate 6.8.0 → 6.9.0

package/dist/cjs/core.js

@@ -2009,9 +2009,10 @@ class HtmlElement extends DOMNode {
             /* if a unique id is present, use it and short-circuit */
             if (cur.id) {
                 const escaped = escapeSelectorComponent(cur.id);
-                const matches = root.querySelectorAll(`#${escaped}`);
+                const selector = escaped.match(/^\d/) ? `[id="${escaped}"]` : `#${escaped}`;
+                const matches = root.querySelectorAll(selector);
                 if (matches.length === 1) {
-                    parts.push(`#${escaped}`);
+                    parts.push(selector);
                     break;
                 }
             }
@@ -3011,7 +3012,7 @@ var TRANSFORMER_API;
 /** @public */
 const name = "html-validate";
 /** @public */
-const version = "6.8.0";
+const version = "6.9.0";
 /** @public */
 const homepage = "https://html-validate.org";
 /** @public */
@@ -3332,7 +3333,7 @@ function ruleDocumentationUrl(filename) {
     return `${homepage}/rules/${normalized}.html`;
 }
 
-const defaults$q = {
+const defaults$r = {
     allowExternal: true,
     allowRelative: true,
     allowAbsolute: true,
@@ -3376,7 +3377,7 @@ function matchList(value, list) {
 }
 class AllowedLinks extends Rule {
     constructor(options) {
-        super({ ...defaults$q, ...options });
+        super({ ...defaults$r, ...options });
         this.allowExternal = parseAllow(this.options.allowExternal);
         this.allowRelative = parseAllow(this.options.allowRelative);
         this.allowAbsolute = parseAllow(this.options.allowAbsolute);
@@ -3677,13 +3678,13 @@ class CaseStyle {
     }
 }
 
-const defaults$p = {
+const defaults$q = {
     style: "lowercase",
     ignoreForeign: true,
 };
 class AttrCase extends Rule {
     constructor(options) {
-        super({ ...defaults$p, ...options });
+        super({ ...defaults$q, ...options });
         this.style = new CaseStyle(this.options.style, "attr-case");
     }
     static schema() {
@@ -4022,7 +4023,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$o = {
+const defaults$p = {
     pattern: DEFAULT_PATTERN,
     ignoreForeign: true,
 };
@@ -4059,7 +4060,7 @@ function generateDescription(name, pattern) {
 }
 class AttrPattern extends Rule {
     constructor(options) {
-        super({ ...defaults$o, ...options });
+        super({ ...defaults$p, ...options });
         this.pattern = generateRegexp(this.options.pattern);
     }
     static schema() {
@@ -4119,13 +4120,13 @@ var QuoteStyle;
     QuoteStyle["DOUBLE_QUOTE"] = "\"";
     QuoteStyle["AUTO_QUOTE"] = "auto";
 })(QuoteStyle || (QuoteStyle = {}));
-const defaults$n = {
+const defaults$o = {
     style: "auto",
     unquoted: false,
 };
 class AttrQuotes extends Rule {
     constructor(options) {
-        super({ ...defaults$n, ...options });
+        super({ ...defaults$o, ...options });
         this.style = parseStyle$4(this.options.style);
     }
     static schema() {
@@ -4290,12 +4291,12 @@ class AttributeAllowedValues extends Rule {
     }
 }
 
-const defaults$m = {
+const defaults$n = {
     style: "omit",
 };
 class AttributeBooleanStyle extends Rule {
     constructor(options) {
-        super({ ...defaults$m, ...options });
+        super({ ...defaults$n, ...options });
         this.hasInvalidStyle = parseStyle$3(this.options.style);
     }
     static schema() {
@@ -4371,12 +4372,12 @@ function reportMessage$1(attr, style) {
     return "";
 }
 
-const defaults$l = {
+const defaults$m = {
     style: "omit",
 };
 class AttributeEmptyStyle extends Rule {
     constructor(options) {
-        super({ ...defaults$l, ...options });
+        super({ ...defaults$m, ...options });
         this.hasInvalidStyle = parseStyle$2(this.options.style);
     }
     static schema() {
@@ -4484,12 +4485,12 @@ function describePattern(pattern) {
     }
 }
 
-const defaults$k = {
+const defaults$l = {
     pattern: "kebabcase",
 };
 class ClassPattern extends Rule {
     constructor(options) {
-        super({ ...defaults$k, ...options });
+        super({ ...defaults$l, ...options });
         this.pattern = parsePattern(this.options.pattern);
     }
     static schema() {
@@ -4598,13 +4599,13 @@ class CloseOrder extends Rule {
     }
 }
 
-const defaults$j = {
+const defaults$k = {
     include: null,
     exclude: null,
 };
 class Deprecated extends Rule {
     constructor(options) {
-        super({ ...defaults$j, ...options });
+        super({ ...defaults$k, ...options });
     }
     static schema() {
         return {
@@ -4767,12 +4768,12 @@ class NoStyleTag$1 extends Rule {
     }
 }
 
-const defaults$i = {
+const defaults$j = {
     style: "uppercase",
 };
 class DoctypeStyle extends Rule {
     constructor(options) {
-        super({ ...defaults$i, ...options });
+        super({ ...defaults$j, ...options });
     }
     static schema() {
         return {
@@ -4804,12 +4805,12 @@ class DoctypeStyle extends Rule {
     }
 }
 
-const defaults$h = {
+const defaults$i = {
     style: "lowercase",
 };
 class ElementCase extends Rule {
     constructor(options) {
-        super({ ...defaults$h, ...options });
+        super({ ...defaults$i, ...options });
         this.style = new CaseStyle(this.options.style, "element-case");
     }
     static schema() {
@@ -4875,14 +4876,14 @@ class ElementCase extends Rule {
     }
 }
 
-const defaults$g = {
+const defaults$h = {
     pattern: "^[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
     whitelist: [],
     blacklist: [],
 };
 class ElementName extends Rule {
     constructor(options) {
-        super({ ...defaults$g, ...options });
+        super({ ...defaults$h, ...options });
         // eslint-disable-next-line security/detect-non-literal-regexp
         this.pattern = new RegExp(this.options.pattern);
     }
@@ -4923,7 +4924,7 @@ class ElementName extends Rule {
                 ...context.blacklist.map((cur) => `- ${cur}`),
             ];
         }
-        if (context.pattern !== defaults$g.pattern) {
+        if (context.pattern !== defaults$h.pattern) {
             return [
                 `<${context.tagName}> is not a valid element name. This project is configured to only allow names matching the following regular expression:`,
                 "",
@@ -5325,7 +5326,7 @@ class EmptyTitle extends Rule {
     }
 }
 
-const defaults$f = {
+const defaults$g = {
     allowMultipleH1: false,
     minInitialRank: "h1",
     sectioningRoots: ["dialog", '[role="dialog"]'],
@@ -5356,7 +5357,7 @@ function parseMaxInitial(value) {
 }
 class HeadingLevel extends Rule {
     constructor(options) {
-        super({ ...defaults$f, ...options });
+        super({ ...defaults$g, ...options });
         this.stack = [];
         this.minInitialRank = parseMaxInitial(this.options.minInitialRank);
         this.sectionRoots = this.options.sectioningRoots.map((it) => new Pattern(it));
@@ -5514,12 +5515,12 @@ class HeadingLevel extends Rule {
     }
 }
 
-const defaults$e = {
+const defaults$f = {
     pattern: "kebabcase",
 };
 class IdPattern extends Rule {
     constructor(options) {
-        super({ ...defaults$e, ...options });
+        super({ ...defaults$f, ...options });
         this.pattern = parsePattern(this.options.pattern);
     }
     static schema() {
@@ -5870,12 +5871,12 @@ function findLabelByParent(el) {
     return [];
 }
 
-const defaults$d = {
+const defaults$e = {
     maxlength: 70,
 };
 class LongTitle extends Rule {
     constructor(options) {
-        super({ ...defaults$d, ...options });
+        super({ ...defaults$e, ...options });
         this.maxlength = this.options.maxlength;
     }
     static schema() {
@@ -6022,13 +6023,13 @@ class MultipleLabeledControls extends Rule {
     }
 }
 
-const defaults$c = {
+const defaults$d = {
     include: null,
     exclude: null,
 };
 class NoAutoplay extends Rule {
     constructor(options) {
-        super({ ...defaults$c, ...options });
+        super({ ...defaults$d, ...options });
     }
     documentation(context) {
         const tagName = context ? ` on <${context.tagName}>` : "";
@@ -6269,14 +6270,14 @@ Omitted end tags can be ambigious for humans to read and many editors have troub
     }
 }
 
-const defaults$b = {
+const defaults$c = {
     include: null,
     exclude: null,
     allowedProperties: ["display"],
 };
 class NoInlineStyle extends Rule {
     constructor(options) {
-        super({ ...defaults$b, ...options });
+        super({ ...defaults$c, ...options });
     }
     static schema() {
         return {
@@ -6478,7 +6479,7 @@ class NoMultipleMain extends Rule {
     }
 }
 
-const defaults$a = {
+const defaults$b = {
     relaxed: false,
 };
 const textRegexp = /([<>]|&(?![a-zA-Z0-9#]+;))/g;
@@ -6495,7 +6496,7 @@ const replacementTable = {
 };
 class NoRawCharacters extends Rule {
     constructor(options) {
-        super({ ...defaults$a, ...options });
+        super({ ...defaults$b, ...options });
         this.relaxed = this.options.relaxed;
     }
     static schema() {
@@ -6673,13 +6674,13 @@ class NoRedundantRole extends Rule {
 }
 
 const xmlns = /^(.+):.+$/;
-const defaults$9 = {
+const defaults$a = {
     ignoreForeign: true,
     ignoreXML: true,
 };
 class NoSelfClosing extends Rule {
     constructor(options) {
-        super({ ...defaults$9, ...options });
+        super({ ...defaults$a, ...options });
     }
     static schema() {
         return {
@@ -6812,13 +6813,13 @@ const replacement = {
     reset: '<button type="reset">',
     image: '<button type="button">',
 };
-const defaults$8 = {
+const defaults$9 = {
     include: null,
     exclude: null,
 };
 class PreferButton extends Rule {
     constructor(options) {
-        super({ ...defaults$8, ...options });
+        super({ ...defaults$9, ...options });
     }
     static schema() {
         return {
@@ -6893,7 +6894,7 @@ class PreferButton extends Rule {
     }
 }
 
-const defaults$7 = {
+const defaults$8 = {
     mapping: {
         article: "article",
         banner: "header",
@@ -6923,7 +6924,7 @@ const defaults$7 = {
 };
 class PreferNativeElement extends Rule {
     constructor(options) {
-        super({ ...defaults$7, ...options });
+        super({ ...defaults$8, ...options });
     }
     static schema() {
         return {
@@ -7043,7 +7044,7 @@ class PreferTbody extends Rule {
     }
 }
 
-const defaults$6 = {
+const defaults$7 = {
     target: "all",
 };
 const crossorigin = new RegExp("^(\\w+://|//)"); /* e.g. https:// or // */
@@ -7053,7 +7054,7 @@ const supportSri = {
 };
 class RequireSri extends Rule {
     constructor(options) {
-        super({ ...defaults$6, ...options });
+        super({ ...defaults$7, ...options });
         this.target = this.options.target;
     }
     static schema() {
@@ -7181,7 +7182,7 @@ class SvgFocusable extends Rule {
     }
 }
 
-const defaults$5 = {
+const defaults$6 = {
     characters: [
         { pattern: " ", replacement: "&nbsp;", description: "non-breaking space" },
         { pattern: "-", replacement: "&#8209;", description: "non-breaking hyphen" },
@@ -7224,7 +7225,7 @@ function matchAll(text, regexp) {
 }
 class TelNonBreaking extends Rule {
     constructor(options) {
-        super({ ...defaults$5, ...options });
+        super({ ...defaults$6, ...options });
         this.regex = constructRegex(this.options.characters);
     }
     static schema() {
@@ -9303,6 +9304,95 @@ class UnknownCharReference extends Rule {
     }
 }
 
+var RuleContext;
+(function (RuleContext) {
+    RuleContext[RuleContext["EMPTY"] = 1] = "EMPTY";
+    RuleContext[RuleContext["WHITESPACE"] = 2] = "WHITESPACE";
+    RuleContext[RuleContext["LEADING_CHARACTER"] = 3] = "LEADING_CHARACTER";
+    RuleContext[RuleContext["DISALLOWED_CHARACTER"] = 4] = "DISALLOWED_CHARACTER";
+})(RuleContext || (RuleContext = {}));
+const defaults$5 = {
+    relaxed: false,
+};
+class ValidID extends Rule {
+    constructor(options) {
+        super({ ...defaults$5, ...options });
+    }
+    static schema() {
+        return {
+            relaxed: {
+                type: "boolean",
+            },
+        };
+    }
+    documentation(context) {
+        const { relaxed } = this.options;
+        const message = context
+            ? this.messages[context].replace("id", "ID").replace(/^(.)/, (m) => m.toUpperCase())
+            : "Element ID is not valid";
+        const relaxedDescription = relaxed
+            ? []
+            : [
+                "  - ID must begin with a letter",
+                "  - ID must only contain alphanumerical characters, `-` and `_`",
+            ];
+        return {
+            description: [
+                `${message}.`,
+                "",
+                "Under the current configuration the following rules are applied:",
+                "",
+                "  - ID must not be empty",
+                "  - ID must not contain any whitespace characters",
+                ...relaxedDescription,
+            ].join("\n"),
+            url: ruleDocumentationUrl("@/rules/valid-id.ts"),
+        };
+    }
+    setup() {
+        this.on("attr", this.isRelevant, (event) => {
+            const { value } = event;
+            if (value === null || value instanceof DynamicValue) {
+                return;
+            }
+            if (value === "") {
+                const context = RuleContext.EMPTY;
+                this.report(event.target, this.messages[context], event.location, context);
+                return;
+            }
+            if (value.match(/\s/)) {
+                const context = RuleContext.WHITESPACE;
+                this.report(event.target, this.messages[context], event.valueLocation, context);
+                return;
+            }
+            const { relaxed } = this.options;
+            if (relaxed) {
+                return;
+            }
+            if (value.match(/^[^a-zA-Z]/)) {
+                const context = RuleContext.LEADING_CHARACTER;
+                this.report(event.target, this.messages[context], event.valueLocation, context);
+                return;
+            }
+            if (value.match(/[^a-zA-Z0-9-_]/)) {
+                const context = RuleContext.DISALLOWED_CHARACTER;
+                this.report(event.target, this.messages[context], event.valueLocation, context);
+            }
+        });
+    }
+    get messages() {
+        return {
+            [RuleContext.EMPTY]: "element id must not be empty",
+            [RuleContext.WHITESPACE]: "element id must not contain whitespace",
+            [RuleContext.LEADING_CHARACTER]: "element id must begin with a letter",
+            [RuleContext.DISALLOWED_CHARACTER]: "element id must only contain alphanumerical, dash and underscore characters",
+        };
+    }
+    isRelevant(event) {
+        return event.key === "id";
+    }
+}
+
 var Style$1;
 (function (Style) {
     Style[Style["Any"] = 0] = "Any";
@@ -9814,6 +9904,7 @@ const bundledRules = {
     "tel-non-breaking": TelNonBreaking,
     "text-content": TextContent,
     "unrecognized-char-ref": UnknownCharReference,
+    "valid-id": ValidID,
     void: Void,
     "void-content": VoidContent,
     "void-style": VoidStyle,
@@ -9911,6 +10002,7 @@ const config$1 = {
         "tel-non-breaking": "error",
         "text-content": "error",
         "unrecognized-char-ref": "error",
+        "valid-id": ["error", { relaxed: false }],
         void: "off",
         "void-content": "error",
         "void-style": "error",
@@ -9946,6 +10038,7 @@ const config = {
         "no-raw-characters": ["error", { relaxed: true }],
         "script-element": "error",
         "unrecognized-char-ref": "error",
+        "valid-id": ["error", { relaxed: true }],
         "void-content": "error",
     },
 };