npm - @html-eslint/eslint-plugin - Versions diffs - 0.20.0 → 0.22.0 - Mend

@html-eslint/eslint-plugin 0.20.0 → 0.22.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 (47) hide show

package/lib/constants/index.js +0 -2
package/lib/rules/element-newline.js +30 -11
package/lib/rules/id-naming-convention.js +30 -12
package/lib/rules/indent.js +7 -10
package/lib/rules/index.js +8 -0
package/lib/rules/lowercase.js +93 -0
package/lib/rules/no-abstract-roles.js +15 -13
package/lib/rules/no-accesskey-attrs.js +5 -6
package/lib/rules/no-aria-hidden-body.js +2 -6
package/lib/rules/no-duplicate-attrs.js +3 -4
package/lib/rules/no-duplicate-id.js +7 -7
package/lib/rules/no-extra-spacing-attrs.js +29 -9
package/lib/rules/no-inline-styles.js +5 -2
package/lib/rules/no-multiple-empty-lines.js +3 -4
package/lib/rules/no-multiple-h1.js +3 -4
package/lib/rules/no-non-scalable-viewport.js +3 -7
package/lib/rules/no-obsolete-tags.js +4 -2
package/lib/rules/no-positive-tabindex.js +5 -6
package/lib/rules/no-restricted-attr-values.js +9 -3
package/lib/rules/no-restricted-attrs.js +13 -2
package/lib/rules/no-script-style-type.js +69 -0
package/lib/rules/no-skip-heading-levels.js +4 -5
package/lib/rules/no-target-blank.js +5 -9
package/lib/rules/no-trailing-spaces.js +0 -4
package/lib/rules/quotes.js +24 -1
package/lib/rules/require-attrs.js +18 -7
package/lib/rules/require-button-type.js +2 -6
package/lib/rules/require-closing-tags.js +8 -5
package/lib/rules/require-doctype.js +4 -5
package/lib/rules/require-frame-title.js +5 -2
package/lib/rules/require-img-alt.js +10 -0
package/lib/rules/require-lang.js +5 -6
package/lib/rules/require-li-container.js +9 -2
package/lib/rules/require-meta-charset.js +19 -13
package/lib/rules/require-meta-description.js +9 -12
package/lib/rules/require-meta-viewport.js +19 -20
package/lib/rules/require-open-graph-protocol.js +135 -0
package/lib/rules/require-title.js +19 -25
package/lib/rules/sort-attrs.js +158 -0
package/lib/rules/utils/array.js +26 -0
package/lib/rules/utils/node.js +70 -0
package/lib/types.d.ts +262 -246
package/package.json +4 -4
package/lib/constants/node-types.js +0 -13
package/lib/rules/utils/index.js +0 -7
package/lib/rules/utils/node-utils.js +0 -112
/package/lib/rules/utils/{naming-utils.js → naming.js} +0 -0

package/lib/rules/require-meta-viewport.js CHANGED Viewed

@@ -1,10 +1,7 @@
-/**
- * @typedef {import("../types").Rule} Rule
- * @typedef {import("es-html-parser").TagNode} TagNode
- */
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { find } = require("./utils/array");
+const { findAttr } = require("./utils/node");
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -12,14 +9,13 @@ const MESSAGE_IDS = {
 };
 /**
- * Checks whether a given node is a meta tag with viewport attribute or not.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TagNode} Return true if the given node is a meta tag with viewport attribute, otherwise false.
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
  */
 function isMetaViewport(node) {
-  if (node.type === "Tag" && node.name === "meta") {
-    const nameAttribute = NodeUtils.findAttr(node, "name");
-    return (
+  if (node.type === NODE_TYPES.Tag && node.name === "meta") {
+    const nameAttribute = findAttr(node, "name");
+    return !!(
       nameAttribute &&
       nameAttribute.value &&
       nameAttribute.value.value.toLowerCase() === "viewport"
@@ -57,7 +53,7 @@ module.exports = {
           return;
         }
-        const metaViewport = node.children.find(isMetaViewport);
+        const metaViewport = find(node.children, isMetaViewport);
         if (!metaViewport) {
           context.report({
@@ -67,14 +63,17 @@ module.exports = {
           return;
         }
-        const contentAttribute = NodeUtils.findAttr(metaViewport, "content");
-        const isValueEmpty =
-          !contentAttribute.value || !contentAttribute.value.value.length;
+        const contentAttribute = findAttr(metaViewport, "content");
+        const isAttributeEmpty =
+          !contentAttribute ||
+          !contentAttribute.value ||
+          !contentAttribute.value.value.length;
-        if (isValueEmpty) {
-          const reportTarget = !contentAttribute.value
-            ? metaViewport
-            : contentAttribute;
+        if (isAttributeEmpty) {
+          const reportTarget =
+            !contentAttribute || !contentAttribute.value
+              ? metaViewport
+              : contentAttribute;
           context.report({
             node: reportTarget,
             messageId: MESSAGE_IDS.EMPTY,

package/lib/rules/require-open-graph-protocol.js ADDED Viewed

@@ -0,0 +1,135 @@
+const { NODE_TYPES } = require("@html-eslint/parser");
+const { RULE_CATEGORY } = require("../constants");
+const { filter } = require("./utils/array");
+const { findAttr } = require("./utils/node");
+const MESSAGE_IDS = {
+  MISSING: "missing",
+  EMPTY: "empty",
+};
+const DEFAULT_REQUIRED_PROPERTIES = [
+  "og:title",
+  "og:type",
+  "og:url",
+  "og:image",
+];
+/**
+ * @param {string[]} properties
+ * @returns {string[]}
+ */
+function normalize(properties) {
+  return properties.map((prop) => {
+    if (prop.indexOf("og:") === 0) return prop;
+    return `og:${prop}`;
+  });
+}
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: 'Enforce to use `<meta name="viewport">` in `<head>`',
+      category: RULE_CATEGORY.SEO,
+      recommended: false,
+    },
+    fixable: null,
+    schema: [
+      {
+        type: "array",
+        items: {
+          type: "string",
+        },
+        uniqueItems: true,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.MISSING]:
+        "Require use of meta tags for OGP. ({{properties}})",
+      [MESSAGE_IDS.EMPTY]: "Unexpected empty 'content' attribute",
+    },
+  },
+  create(context) {
+    /**
+     * @type {string[]}
+     */
+    const requiredProperties = normalize(
+      (context.options && context.options[0]) || DEFAULT_REQUIRED_PROPERTIES
+    );
+    /**
+     * @param {ChildType<TagNode>} node
+     * @returns {node is TagNode}
+     */
+    function isOgpMeta(node) {
+      const isMeta = node.type === NODE_TYPES.Tag && node.name === "meta";
+      const property = isMeta ? findAttr(node, "property") : undefined;
+      const hasOgProperty =
+        !!property &&
+        !!property.value &&
+        property.value.value.indexOf("og:") === 0;
+      return hasOgProperty;
+    }
+    return {
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+        const children = node.children;
+        const metaTags = filter(children, isOgpMeta);
+        const missingProperties = requiredProperties.filter((required) => {
+          return !metaTags.some((meta) => {
+            const property = findAttr(meta, "property");
+            if (property && property.value) {
+              return property.value.value === required;
+            }
+            return false;
+          });
+        });
+        const emptyContentMetaTags = metaTags.filter((meta) => {
+          const property = findAttr(meta, "property");
+          if (
+            property &&
+            property.value &&
+            requiredProperties.includes(property.value.value)
+          ) {
+            const content = findAttr(meta, "content");
+            return !content || !content.value || !content.value.value;
+          }
+          return false;
+        });
+        if (missingProperties.length) {
+          context.report({
+            node,
+            data: {
+              properties: missingProperties.join(", "),
+            },
+            messageId: MESSAGE_IDS.MISSING,
+          });
+        }
+        if (emptyContentMetaTags.length) {
+          emptyContentMetaTags.forEach((meta) => {
+            const content = findAttr(meta, "content");
+            context.report({
+              node: content || meta,
+              messageId: MESSAGE_IDS.EMPTY,
+            });
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/require-title.js CHANGED Viewed

@@ -1,9 +1,6 @@
-/**
- * @typedef {import("../types").Rule} Rule
- * @typedef {import("es-html-parser").TagNode} TagNode
- * @typedef {import("es-html-parser").TextNode} TextNode
- */
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
+const { find } = require("./utils/array");
 const MESSAGE_IDS = {
   MISSING_TITLE: "missing",
@@ -11,21 +8,19 @@ const MESSAGE_IDS = {
 };
 /**
- * Checks whether the node is a title TagNode.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TagNode} Returns true if the given node is a title TagNode, otherwise false
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
  */
-function isTitleTagNode(node) {
-  return node.type === "Tag" && node.name === "title";
+function isTitle(node) {
+  return node.type === NODE_TYPES.Tag && node.name === "title";
 }
 /**
- * Checks whether the node is a TextNode that has value.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TextNode} Returns true if the given node is a TextNode with non-empty value, otherwise false
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TextNode}
  */
-function isNonEmptyTextNode(node) {
-  return node.type === "Text" && node.value.trim().length > 0;
+function isNonEmptyText(node) {
+  return node.type === NODE_TYPES.Text && node.value.trim().length > 0;
 }
 /**
@@ -55,9 +50,10 @@ module.exports = {
         if (node.name !== "head") {
           return;
         }
-        const titleTag = node.children.find(isTitleTagNode);
-        if (!titleTag) {
+        const title = find(node.children, isTitle);
+        if (!title) {
           context.report({
             node,
             messageId: MESSAGE_IDS.MISSING_TITLE,
@@ -65,15 +61,13 @@ module.exports = {
           return;
         }
-        if (isTitleTagNode(titleTag)) {
-          const titleContentText = titleTag.children.find(isNonEmptyTextNode);
+        const content = find(title.children, isNonEmptyText);
-          if (!titleContentText) {
-            context.report({
-              node: titleTag,
-              messageId: MESSAGE_IDS.EMPTY_TITLE,
-            });
-          }
+        if (!content) {
+          context.report({
+            node: title,
+            messageId: MESSAGE_IDS.EMPTY_TITLE,
+          });
         }
       },
     };

package/lib/rules/sort-attrs.js ADDED Viewed

@@ -0,0 +1,158 @@
+const { RULE_CATEGORY } = require("../constants");
+const MESSAGE_IDS = {
+  UNSORTED: "unsorted",
+};
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Enforce attributes alphabetical sorting",
+      category: RULE_CATEGORY.STYLE,
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          priority: {
+            type: "array",
+            items: {
+              type: "string",
+              uniqueItems: true,
+            },
+          },
+        },
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.UNSORTED]: "Attributes should be sorted alphabetically",
+    },
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const option = context.options[0] || {
+      priority: ["id", "type", "class", "style"],
+    };
+    /**
+     * @type {string[]}
+     */
+    const priority = option.priority;
+    /**
+     * @param {AttributeNode} attrA
+     * @param {AttributeNode} attrB
+     * @return {number}
+     */
+    function compare(attrA, attrB) {
+      const keyA = attrA.key.value;
+      const keyB = attrB.key.value;
+      const keyAReservedValue = priority.indexOf(keyA);
+      const keyBReservedValue = priority.indexOf(keyB);
+      if (keyAReservedValue >= 0 && keyBReservedValue >= 0) {
+        return keyAReservedValue - keyBReservedValue;
+      } else if (keyAReservedValue >= 0) {
+        return -1;
+      } else if (keyBReservedValue >= 0) {
+        return 1;
+      }
+      return keyA.localeCompare(keyB);
+    }
+    /**
+     * @param {string} source
+     * @param {AttributeNode[]} unsorted
+     * @param {AttributeNode[]} sorted
+     * @returns {string}
+     */
+    function getSortedCode(source, unsorted, sorted) {
+      let result = "";
+      unsorted.forEach((unsortedAttr, index) => {
+        const sortedAttr = sorted[index];
+        result += source.slice(sortedAttr.range[0], sortedAttr.range[1]);
+        const nextUnsortedAttr = unsorted[index + 1];
+        if (nextUnsortedAttr) {
+          result += source.slice(
+            unsortedAttr.range[1],
+            nextUnsortedAttr.range[0]
+          );
+        }
+      });
+      return result;
+    }
+    /**
+     * @param {RuleFixer} fixer
+     * @param {AttributeNode[]} unsorted
+     * @param {AttributeNode[]} sorted
+     */
+    function fix(fixer, unsorted, sorted) {
+      const source = sourceCode.getText();
+      return fixer.replaceTextRange(
+        [unsorted[0].range[0], unsorted[unsorted.length - 1].range[1]],
+        getSortedCode(source, unsorted, sorted)
+      );
+    }
+    /**
+     * @param {AttributeNode[]} before
+     * @param {AttributeNode[]} after
+     * @returns {boolean}
+     */
+    function isChanged(before, after) {
+      for (let i = 0; i < before.length; i++) {
+        if (before[i] !== after[i]) return true;
+      }
+      return false;
+    }
+    /**
+     * @param {AttributeNode[]} unsorted
+     */
+    function checkSorting(unsorted) {
+      if (unsorted.length <= 1) {
+        return;
+      }
+      const sorted = [...unsorted].sort(compare);
+      if (!isChanged(unsorted, sorted)) {
+        return;
+      }
+      const first = unsorted[0];
+      const last = unsorted[unsorted.length - 1];
+      context.report({
+        node: {
+          range: [first.range[0], last.range[1]],
+          loc: {
+            start: first.loc.start,
+            end: last.loc.end,
+          },
+        },
+        messageId: MESSAGE_IDS.UNSORTED,
+        fix(fixer) {
+          return fix(fixer, unsorted, sorted);
+        },
+      });
+    }
+    return {
+      ScriptTag(node) {
+        checkSorting(node.attributes);
+      },
+      Tag(node) {
+        checkSorting(node.attributes);
+      },
+      StyleTag(node) {
+        checkSorting(node.attributes);
+      },
+    };
+  },
+};

package/lib/rules/utils/array.js ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * @template T
+ * @template {T} S
+ * @param {T[]} items
+ * @param {(node: T) => node is S} predicate
+ * @returns {S | undefined}
+ */
+function find(items, predicate) {
+  return items.find(predicate);
+}
+/**
+ * @template T
+ * @template {T} S
+ * @param {T[]} items
+ * @param {(node: T) => node is S} predicate
+ * @returns {S[]}
+ */
+function filter(items, predicate) {
+  return items.filter(predicate);
+}
+module.exports = {
+  find,
+  filter,
+};

package/lib/rules/utils/node.js ADDED Viewed

@@ -0,0 +1,70 @@
+module.exports = {
+  /**
+   * @param {TagNode | ScriptTagNode | StyleTagNode} node
+   * @param {string} key
+   * @returns {AttributeNode | undefined}
+   */
+  findAttr(node, key) {
+    return node.attributes.find(
+      (attr) => attr.key && attr.key.value.toLowerCase() === key.toLowerCase()
+    );
+  },
+  /**
+   * Checks whether a node's all tokens are on the same line or not.
+   * @param {AnyNode} node A node to check
+   * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
+   */
+  isNodeTokensOnSameLine(node) {
+    return node.loc.start.line === node.loc.end.line;
+  },
+  /**
+   *
+   * @param {TextNode | CommentContentNode} node
+   * @returns {LineNode[]}
+   */
+  splitToLineNodes(node) {
+    let start = node.range[0];
+    let line = node.loc.start.line;
+    const startCol = node.loc.start.column;
+    return node.value.split("\n").map((value, index) => {
+      const columnStart = index === 0 ? startCol : 0;
+      /**
+       * @type {LineNode}
+       */
+      const lineNode = {
+        type: "Line",
+        value,
+        range: [start, start + value.length],
+        loc: {
+          start: {
+            line,
+            column: columnStart,
+          },
+          end: {
+            line,
+            column: columnStart + value.length,
+          },
+        },
+      };
+      start += value.length + 1;
+      line += 1;
+      return lineNode;
+    });
+  },
+  /**
+   * Get location between two nodes.
+   * @param {BaseNode} before A node placed in before
+   * @param {BaseNode} after A node placed in after
+   * @returns {Location} location between two nodes.
+   */
+  getLocBetween(before, after) {
+    return {
+      start: before.loc.end,
+      end: after.loc.start,
+    };
+  },
+};