html-validate 6.3.2 → 6.6.0

package/dist/es/core.js

@@ -1476,8 +1476,8 @@ class DOMTokenList extends Array {
     constructor(value, location) {
         if (value && typeof value === "string") {
             /* replace all whitespace with a single space for easier parsing */
-            const condensed = value.replace(/[\t\r\n ]+/g, " ");
-            const { tokens, locations } = parse(condensed, location);
+            const normalized = value.replace(/[\t\r\n]/g, " ");
+            const { tokens, locations } = parse(normalized, location);
             super(...tokens);
             this.locations = locations;
         }
@@ -1880,10 +1880,13 @@ class HtmlElement extends DOMNode {
     }
     /**
      * @internal
+     *
+     * @param namespace - If given it is appended to the tagName.
      */
-    static fromTokens(startToken, endToken, parent, metaTable) {
-        const tagName = startToken.data[2];
-        if (!tagName) {
+    static fromTokens(startToken, endToken, parent, metaTable, namespace = "") {
+        const name = startToken.data[2];
+        const tagName = namespace ? `${namespace}:${name}` : name;
+        if (!name) {
             throw new Error("tagName cannot be empty");
         }
         const meta = metaTable ? metaTable.getMetaFor(tagName) : null;
@@ -2945,7 +2948,7 @@ var TRANSFORMER_API;
 /** @public */
 const name = "html-validate";
 /** @public */
-const version = "6.3.2";
+const version = "6.6.0";
 /** @public */
 const homepage = "https://html-validate.org";
 /** @public */
@@ -2984,6 +2987,42 @@ function parseSeverity(value) {
     }
 }
 
+function escape(value) {
+    return value.replace(/'/g, "\\'");
+}
+function format(value, quote = false) {
+    if (value === null) {
+        return "null";
+    }
+    if (typeof value === "number") {
+        return value.toString();
+    }
+    if (typeof value === "string") {
+        return quote ? `'${escape(value)}'` : value;
+    }
+    if (Array.isArray(value)) {
+        const content = value.map((it) => format(it, true)).join(", ");
+        return `[ ${content} ]`;
+    }
+    if (typeof value === "object") {
+        const content = Object.entries(value)
+            .map(([key, nested]) => `${key}: ${format(nested, true)}`)
+            .join(", ");
+        return `{ ${content} }`;
+    }
+    return String(value);
+}
+/**
+ * Replaces placeholder `{{ ... }}` with values from given object.
+ *
+ * @internal
+ */
+function interpolate(text, data) {
+    return text.replace(/{{\s*([^\s]+)\s*}}/g, (match, key) => {
+        return typeof data[key] !== "undefined" ? format(data[key]) : match;
+    });
+}
+
 const remapEvents = {
     "tag:open": "tag:start",
     "tag:close": "tag:end",
@@ -3118,7 +3157,8 @@ class Rule {
     report(node, message, location, context) {
         if (this.isEnabled() && (!node || node.ruleEnabled(this.name))) {
             const where = this.findLocation({ node, location, event: this.event });
-            this.reporter.add(this, message, this.severity, node, where, context);
+            const interpolated = interpolate(message, context !== null && context !== void 0 ? context : {});
+            this.reporter.add(this, interpolated, this.severity, node, where, context);
         }
     }
     findLocation(src) {
@@ -3643,22 +3683,21 @@ var TokenType;
 (function (TokenType) {
     TokenType[TokenType["UNICODE_BOM"] = 1] = "UNICODE_BOM";
     TokenType[TokenType["WHITESPACE"] = 2] = "WHITESPACE";
-    TokenType[TokenType["NEWLINE"] = 3] = "NEWLINE";
-    TokenType[TokenType["DOCTYPE_OPEN"] = 4] = "DOCTYPE_OPEN";
-    TokenType[TokenType["DOCTYPE_VALUE"] = 5] = "DOCTYPE_VALUE";
-    TokenType[TokenType["DOCTYPE_CLOSE"] = 6] = "DOCTYPE_CLOSE";
-    TokenType[TokenType["TAG_OPEN"] = 7] = "TAG_OPEN";
-    TokenType[TokenType["TAG_CLOSE"] = 8] = "TAG_CLOSE";
-    TokenType[TokenType["ATTR_NAME"] = 9] = "ATTR_NAME";
-    TokenType[TokenType["ATTR_VALUE"] = 10] = "ATTR_VALUE";
-    TokenType[TokenType["TEXT"] = 11] = "TEXT";
-    TokenType[TokenType["TEMPLATING"] = 12] = "TEMPLATING";
-    TokenType[TokenType["SCRIPT"] = 13] = "SCRIPT";
-    TokenType[TokenType["STYLE"] = 14] = "STYLE";
-    TokenType[TokenType["COMMENT"] = 15] = "COMMENT";
-    TokenType[TokenType["CONDITIONAL"] = 16] = "CONDITIONAL";
-    TokenType[TokenType["DIRECTIVE"] = 17] = "DIRECTIVE";
-    TokenType[TokenType["EOF"] = 18] = "EOF";
+    TokenType[TokenType["DOCTYPE_OPEN"] = 3] = "DOCTYPE_OPEN";
+    TokenType[TokenType["DOCTYPE_VALUE"] = 4] = "DOCTYPE_VALUE";
+    TokenType[TokenType["DOCTYPE_CLOSE"] = 5] = "DOCTYPE_CLOSE";
+    TokenType[TokenType["TAG_OPEN"] = 6] = "TAG_OPEN";
+    TokenType[TokenType["TAG_CLOSE"] = 7] = "TAG_CLOSE";
+    TokenType[TokenType["ATTR_NAME"] = 8] = "ATTR_NAME";
+    TokenType[TokenType["ATTR_VALUE"] = 9] = "ATTR_VALUE";
+    TokenType[TokenType["TEXT"] = 10] = "TEXT";
+    TokenType[TokenType["TEMPLATING"] = 11] = "TEMPLATING";
+    TokenType[TokenType["SCRIPT"] = 12] = "SCRIPT";
+    TokenType[TokenType["STYLE"] = 13] = "STYLE";
+    TokenType[TokenType["COMMENT"] = 14] = "COMMENT";
+    TokenType[TokenType["CONDITIONAL"] = 15] = "CONDITIONAL";
+    TokenType[TokenType["DIRECTIVE"] = 16] = "DIRECTIVE";
+    TokenType[TokenType["EOF"] = 17] = "EOF";
 })(TokenType || (TokenType = {}));
 
 /* eslint-disable no-useless-escape */
@@ -3683,7 +3722,7 @@ const MATCH_SCRIPT_DATA = /^[^]*?(?=<\/script)/;
 const MATCH_SCRIPT_END = /^<(\/)(script)/;
 const MATCH_STYLE_DATA = /^[^]*?(?=<\/style)/;
 const MATCH_STYLE_END = /^<(\/)(style)/;
-const MATCH_DIRECTIVE = /^<!--\s*\[html-validate-(.*?)]\s*-->/;
+const MATCH_DIRECTIVE = /^<!--\s*(\[)html-validate-([a-z0-9-]+)\s*(.*?)(]?)\s*-->/;
 const MATCH_COMMENT = /^<!--([^]*?)-->/;
 const MATCH_CONDITIONAL = /^<!\[([^\]]*?)\]>/;
 class InvalidTokenError extends Error {
@@ -3738,15 +3777,15 @@ class Lexer {
             previousState = context.state;
             previousLength = context.string.length;
         }
-        yield this.token(context, TokenType.EOF);
+        yield this.token(context, TokenType.EOF, []);
     }
     token(context, type, data) {
-        const size = data ? data[0].length : 0;
+        const size = data.length > 0 ? data[0].length : 0;
         const location = context.getLocation(size);
         return {
             type,
             location,
-            data: data ? Array.from(data) : null,
+            data: Array.from(data),
         };
     }
     /* istanbul ignore next: used to provide a better error when an unhandled state happens */
@@ -3771,17 +3810,18 @@ class Lexer {
         }
     }
     *match(context, tests, error) {
-        let match = null;
         const n = tests.length;
         for (let i = 0; i < n; i++) {
             const [regex, nextState, tokenType] = tests[i];
-            if (regex === false || (match = context.string.match(regex))) {
+            const match = regex ? context.string.match(regex) : [""];
+            if (match) {
                 let token = null;
                 if (tokenType !== false) {
-                    yield (token = this.token(context, tokenType, match));
+                    token = this.token(context, tokenType, match);
+                    yield token;
                 }
                 const state = this.evalNextState(nextState, token);
-                context.consume(match || 0, state);
+                context.consume(match, state);
                 this.enter(context, state, match);
                 return;
             }
@@ -3828,18 +3868,19 @@ class Lexer {
     *tokenizeTag(context) {
         /* eslint-disable-next-line consistent-return -- exhaustive switch handled by typescript */
         function nextState(token) {
+            const tagCloseToken = token;
             switch (context.contentModel) {
                 case ContentModel.TEXT:
                     return State.TEXT;
                 case ContentModel.SCRIPT:
-                    if (token && token.data[0][0] !== "/") {
+                    if (tagCloseToken && tagCloseToken.data[0][0] !== "/") {
                         return State.SCRIPT;
                     }
                     else {
                         return State.TEXT; /* <script/> (not legal but handle it anyway so the lexer doesn't choke on it) */
                     }
                 case ContentModel.STYLE:
-                    if (token && token.data[0][0] !== "/") {
+                    if (tagCloseToken && tagCloseToken.data[0][0] !== "/") {
                         return State.STYLE;
                     }
                     else {
@@ -5987,7 +6028,7 @@ class NoConditionalComment extends Rule {
     }
     setup() {
         this.on("conditional", (event) => {
-            this.report(null, "Use of conditional comments are deprecated", event.location);
+            this.report(event.parent, "Use of conditional comments are deprecated", event.location);
         });
     }
 }
@@ -9567,7 +9608,7 @@ const config$3 = {
         "no-redundant-for": "error",
         "no-redundant-role": "error",
         "prefer-native-element": "error",
-        "svg-focusable": "error",
+        "svg-focusable": "off",
         "text-content": "error",
         "wcag/h30": "error",
         "wcag/h32": "error",
@@ -9638,7 +9679,7 @@ const config$1 = {
         "prefer-tbody": "error",
         "script-element": "error",
         "script-type": "error",
-        "svg-focusable": "error",
+        "svg-focusable": "off",
         "text-content": "error",
         "unrecognized-char-ref": "error",
         void: "off",
@@ -10413,6 +10454,12 @@ class ParserError extends Error {
     }
 }
 
+function isAttrValueToken(token) {
+    return Boolean(token && token.type === TokenType.ATTR_VALUE);
+}
+function svgShouldRetainTag(foreignTagName, tagName) {
+    return foreignTagName === "svg" && ["title", "desc"].includes(tagName);
+}
 /**
  * Parse HTML document into a DOM tree.
  *
@@ -10425,6 +10472,7 @@ class Parser {
      * @param config - Configuration
      */
     constructor(config) {
+        this.currentNamespace = "";
         this.event = new EventHandler();
         this.dom = null;
         this.metaTable = config.getMetaTable();
@@ -10435,7 +10483,6 @@ class Parser {
      * @param source - HTML markup.
      * @returns DOM tree representing the HTML markup.
      */
-    // eslint-disable-next-line complexity
     parseHtml(source) {
         var _a, _b, _c, _d;
         if (typeof source === "string") {
@@ -10466,43 +10513,7 @@ class Parser {
         let it = this.next(tokenStream);
         while (!it.done) {
             const token = it.value;
-            switch (token.type) {
-                case TokenType.UNICODE_BOM:
-                    /* ignore */
-                    break;
-                case TokenType.TAG_OPEN:
-                    this.consumeTag(source, token, tokenStream);
-                    break;
-                case TokenType.WHITESPACE:
-                    this.trigger("whitespace", {
-                        text: token.data[0],
-                        location: token.location,
-                    });
-                    this.appendText(token.data[0], token.location);
-                    break;
-                case TokenType.DIRECTIVE:
-                    this.consumeDirective(token);
-                    break;
-                case TokenType.CONDITIONAL:
-                    this.trigger("conditional", {
-                        condition: token.data[1],
-                        location: token.location,
-                    });
-                    break;
-                case TokenType.COMMENT:
-                    this.consumeComment(token);
-                    break;
-                case TokenType.DOCTYPE_OPEN:
-                    this.consumeDoctype(token, tokenStream);
-                    break;
-                case TokenType.TEXT:
-                case TokenType.TEMPLATING:
-                    this.appendText(token.data, token.location);
-                    break;
-                case TokenType.EOF:
-                    this.closeTree(source, token.location);
-                    break;
-            }
+            this.consume(source, token, tokenStream);
             it = this.next(tokenStream);
         }
         /* resolve any dynamic meta element properties */
@@ -10549,13 +10560,50 @@ class Parser {
             return Boolean(active.parent && active.parent.is(tagName) && meta.includes(active.tagName));
         }
     }
+    /* eslint-disable-next-line complexity */
+    consume(source, token, tokenStream) {
+        switch (token.type) {
+            case TokenType.UNICODE_BOM:
+                /* ignore */
+                break;
+            case TokenType.TAG_OPEN:
+                this.consumeTag(source, token, tokenStream);
+                break;
+            case TokenType.WHITESPACE:
+                this.trigger("whitespace", {
+                    text: token.data[0],
+                    location: token.location,
+                });
+                this.appendText(token.data[0], token.location);
+                break;
+            case TokenType.DIRECTIVE:
+                this.consumeDirective(token);
+                break;
+            case TokenType.CONDITIONAL:
+                this.consumeConditional(token);
+                break;
+            case TokenType.COMMENT:
+                this.consumeComment(token);
+                break;
+            case TokenType.DOCTYPE_OPEN:
+                this.consumeDoctype(token, tokenStream);
+                break;
+            case TokenType.TEXT:
+            case TokenType.TEMPLATING:
+                this.appendText(token.data[0], token.location);
+                break;
+            case TokenType.EOF:
+                this.closeTree(source, token.location);
+                break;
+        }
+    }
     /* eslint-disable-next-line complexity, sonarjs/cognitive-complexity */
     consumeTag(source, startToken, tokenStream) {
         const tokens = Array.from(this.consumeUntil(tokenStream, TokenType.TAG_CLOSE, startToken.location));
         const endToken = tokens.slice(-1)[0];
         const closeOptional = this.closeOptional(startToken);
         const parent = closeOptional ? this.dom.getActive().parent : this.dom.getActive();
-        const node = HtmlElement.fromTokens(startToken, endToken, parent, this.metaTable);
+        const node = HtmlElement.fromTokens(startToken, endToken, parent, this.metaTable, this.currentNamespace);
         const isStartTag = !startToken.data[1];
         const isClosing = !isStartTag || node.closed !== NodeClosed.Open;
         const isForeign = node.meta && node.meta.foreign;
@@ -10660,6 +10708,15 @@ class Parser {
             const tokens = Array.from(this.consumeUntil(tokenStream, TokenType.TAG_OPEN, errorLocation));
             const [last] = tokens.slice(-1);
             const [, tagClosed, tagName] = last.data;
+            /* special case: svg <title> and <desc> should be intact as it affects accessibility */
+            if (!tagClosed && svgShouldRetainTag(foreignTagName, tagName)) {
+                const oldNamespace = this.currentNamespace;
+                this.currentNamespace = "svg";
+                this.consumeTag(source, last, tokenStream);
+                this.consumeUntilMatchingTag(source, tokenStream, tagName);
+                this.currentNamespace = oldNamespace;
+                continue;
+            }
             /* keep going unless the new tag matches the foreign root element */
             if (tagName !== foreignTagName) {
                 continue;
@@ -10692,15 +10749,15 @@ class Parser {
         const keyLocation = this.getAttributeKeyLocation(token);
         const valueLocation = this.getAttributeValueLocation(next);
         const location = this.getAttributeLocation(token, next);
-        const haveValue = next && next.type === TokenType.ATTR_VALUE;
+        const haveValue = isAttrValueToken(next);
         const attrData = {
             key: token.data[1],
             value: null,
             quote: null,
         };
-        if (next && haveValue) {
+        if (haveValue) {
             const [, , value, quote] = next.data;
-            attrData.value = value !== null && value !== void 0 ? value : null;
+            attrData.value = value;
             attrData.quote = quote !== null && quote !== void 0 ? quote : null;
         }
         /* get callback to process attributes, default is to just return attribute
@@ -10779,12 +10836,16 @@ class Parser {
         };
     }
     consumeDirective(token) {
-        const directive = token.data[1];
-        const match = directive.match(/^([a-zA-Z0-9-]+)\s*(.*?)(?:\s*:\s*(.*))?$/);
+        const [text, , action, directive, end] = token.data;
+        if (end === "") {
+            throw new Error(`Missing end bracket "]" on directive "${text}"`);
+        }
+        const match = directive.match(/^(.*?)(?:\s*(?:--|:)\s*(.*))?$/);
+        /* istanbul ignore next: should not be possible, would be emitted as comment token */
         if (!match) {
-            throw new Error(`Failed to parse directive "${directive}"`);
+            throw new Error(`Failed to parse directive "${text}"`);
         }
-        const [, action, data, comment] = match;
+        const [, data, comment] = match;
         this.trigger("directive", {
             action,
             data,
@@ -10792,17 +10853,33 @@ class Parser {
             location: token.location,
         });
     }
+    /**
+     * Consumes conditional comment in tag form.
+     *
+     * See also the related [[consumeCommend]] method.
+     */
+    consumeConditional(token) {
+        const element = this.dom.getActive();
+        this.trigger("conditional", {
+            condition: token.data[1],
+            location: token.location,
+            parent: element,
+        });
+    }
     /**
      * Consumes comment token.
      *
-     * Tries to find IE conditional comments and emits conditional token if found.
+     * Tries to find IE conditional comments and emits conditional token if
+     * found. See also the related [[consumeConditional]] method.
      */
     consumeComment(token) {
         const comment = token.data[0];
+        const element = this.dom.getActive();
         for (const conditional of parseConditionalComment(comment, token.location)) {
             this.trigger("conditional", {
                 condition: conditional.expression,
                 location: conditional.location,
+                parent: element,
             });
         }
     }
@@ -10811,7 +10888,8 @@ class Parser {
      */
     consumeDoctype(startToken, tokenStream) {
         const tokens = Array.from(this.consumeUntil(tokenStream, TokenType.DOCTYPE_CLOSE, startToken.location));
-        const doctype = tokens[0]; /* first token is the doctype, second is the closing ">" */
+        /* first token is the doctype, second is the closing ">" */
+        const doctype = tokens[0];
         const value = doctype.data[0];
         this.dom.doctype = value;
         this.trigger("doctype", {
@@ -10837,6 +10915,35 @@ class Parser {
         }
         throw new ParserError(errorLocation, `stream ended before ${TokenType[search]} token was found`);
     }
+    /**
+     * Consumes tokens until a matching close-tag is found. Tags are appended to
+     * the document.
+     *
+     * @internal
+     */
+    consumeUntilMatchingTag(source, tokenStream, searchTag) {
+        let numOpen = 1;
+        let it = this.next(tokenStream);
+        while (!it.done) {
+            const token = it.value;
+            this.consume(source, token, tokenStream);
+            if (token.type === TokenType.TAG_OPEN) {
+                const [, close, tagName] = token.data;
+                if (tagName === searchTag) {
+                    if (close) {
+                        numOpen--;
+                    }
+                    else {
+                        numOpen++;
+                    }
+                    if (numOpen === 0) {
+                        return;
+                    }
+                }
+            }
+            it = this.next(tokenStream);
+        }
+    }
     next(tokenStream) {
         const it = tokenStream.next();
         if (!it.done) {
@@ -10844,7 +10951,7 @@ class Parser {
             this.trigger("token", {
                 location: token.location,
                 type: token.type,
-                data: token.data ? Array.from(token.data) : undefined,
+                data: Array.from(token.data),
             });
         }
         return it;
@@ -11104,11 +11211,12 @@ class Engine {
         return lines;
     }
     dumpTokens(source) {
+        var _a;
         const lexer = new Lexer();
         const lines = [];
         for (const src of source) {
             for (const token of lexer.tokenize(src)) {
-                const data = token.data ? token.data[0] : null;
+                const data = (_a = token.data[0]) !== null && _a !== void 0 ? _a : "";
                 lines.push({
                     token: TokenType[token.type],
                     data,