@html-eslint/eslint-plugin 0.36.0 → 0.38.0

package/lib/configs/recommended.js

@@ -20,5 +20,6 @@ module.exports = {
     "@html-eslint/no-obsolete-tags": "error",
     "@html-eslint/require-closing-tags": "error",
     "@html-eslint/no-duplicate-attrs": "error",
+    "@html-eslint/use-baseline": "error",
   },
 };

package/lib/rules/attrs-newline.js

@@ -4,7 +4,6 @@
  * @typedef {Object} MessageId
  * @property {"closeStyleWrong"} CLOSE_STYLE_WRONG
  * @property {"newlineMissing"} NEWLINE_MISSING
- * @property {"newlineUnexpected"} NEWLINE_UNEXPECTED
  *
  * @typedef {Object} Option
  * @property {"sameline" | "newline"} [option.closeStyle]
@@ -22,7 +21,6 @@ const { createVisitors } = require("./utils/visitors");
 const MESSAGE_ID = {
   CLOSE_STYLE_WRONG: "closeStyleWrong",
   NEWLINE_MISSING: "newlineMissing",
-  NEWLINE_UNEXPECTED: "newlineUnexpected",
 };
 
 /**
@@ -56,8 +54,6 @@ module.exports = {
       [MESSAGE_ID.CLOSE_STYLE_WRONG]:
         "Closing bracket was on {{actual}}; expected {{expected}}",
       [MESSAGE_ID.NEWLINE_MISSING]: "Newline expected before {{attrName}}",
-      [MESSAGE_ID.NEWLINE_UNEXPECTED]:
-        "Newlines not expected between attributes, since this tag has fewer than {{attrMin}} attributes",
     },
   },
 
@@ -70,21 +66,22 @@ module.exports = {
     return createVisitors(context, {
       Tag(node) {
         const shouldBeMultiline = node.attributes.length > attrMin;
+        if (!shouldBeMultiline) return;
 
         /**
          * This doesn't do any indentation, so the result will look silly. Indentation should be covered by the `indent` rule
          * @param {RuleFixer} fixer
          */
         function fix(fixer) {
-          const spacer = shouldBeMultiline ? "\n" : " ";
           let expected = node.openStart.value;
           for (const attr of node.attributes) {
-            expected += `${spacer}${attr.key.value}`;
+            expected += `\n${attr.key.value}`;
             if (attr.startWrapper && attr.value && attr.endWrapper) {
               expected += `=${attr.startWrapper.value}${attr.value.value}${attr.endWrapper.value}`;
             }
           }
-          if (shouldBeMultiline && closeStyle === "newline") {
+
+          if (closeStyle === "newline") {
             expected += "\n";
           } else if (node.selfClosing) {
             expected += " ";
@@ -97,66 +94,38 @@ module.exports = {
           );
         }
 
-        if (shouldBeMultiline) {
-          let index = 0;
-          for (const attr of node.attributes) {
-            const attrPrevious = node.attributes[index - 1];
-            const relativeToNode = attrPrevious || node.openStart;
-            if (attr.loc.start.line === relativeToNode.loc.end.line) {
-              return context.report({
-                node,
-                data: {
-                  attrName: attr.key.value,
-                },
-                fix,
-                messageId: MESSAGE_ID.NEWLINE_MISSING,
-              });
-            }
-            index += 1;
-          }
-
-          const attrLast = node.attributes[node.attributes.length - 1];
-          const closeStyleActual =
-            node.openEnd.loc.start.line === attrLast.loc.end.line
-              ? "sameline"
-              : "newline";
-          if (closeStyle !== closeStyleActual) {
+        let index = 0;
+        for (const attr of node.attributes) {
+          const attrPrevious = node.attributes[index - 1];
+          const relativeToNode = attrPrevious || node.openStart;
+          if (attr.loc.start.line === relativeToNode.loc.end.line) {
             return context.report({
               node,
               data: {
-                actual: closeStyleActual,
-                expected: closeStyle,
+                attrName: attr.key.value,
               },
               fix,
-              messageId: MESSAGE_ID.CLOSE_STYLE_WRONG,
+              messageId: MESSAGE_ID.NEWLINE_MISSING,
             });
           }
-        } else {
-          let expectedLastLineNum = node.openStart.loc.start.line;
-          for (const attr of node.attributes) {
-            if (shouldBeMultiline) {
-              expectedLastLineNum += 1;
-            }
-            if (attr.value) {
-              const valueLineSpan =
-                attr.value.loc.end.line - attr.value.loc.start.line;
-              expectedLastLineNum += valueLineSpan;
-            }
-          }
-          if (shouldBeMultiline && closeStyle === "newline") {
-            expectedLastLineNum += 1;
-          }
+          index += 1;
+        }
 
-          if (node.openEnd.loc.end.line !== expectedLastLineNum) {
-            return context.report({
-              node,
-              data: {
-                attrMin: `${attrMin}`,
-              },
-              fix,
-              messageId: MESSAGE_ID.NEWLINE_UNEXPECTED,
-            });
-          }
+        const attrLast = node.attributes[node.attributes.length - 1];
+        const closeStyleActual =
+          node.openEnd.loc.start.line === attrLast.loc.end.line
+            ? "sameline"
+            : "newline";
+        if (closeStyle !== closeStyleActual) {
+          return context.report({
+            node,
+            data: {
+              actual: closeStyleActual,
+              expected: closeStyle,
+            },
+            fix,
+            messageId: MESSAGE_ID.CLOSE_STYLE_WRONG,
+          });
         }
       },
     });

package/lib/rules/indent/indent.js

@@ -12,6 +12,8 @@
  * @typedef { import("@html-eslint/types").TemplateLiteral } TemplateLiteral
  * @typedef { import("@html-eslint/types").OpenTemplate } OpenTemplate
  * @typedef { import("@html-eslint/types").CloseTemplate } CloseTemplate
+ * @typedef { import("@html-eslint/types").ScriptTag } ScriptTag
+ * @typedef { import("@html-eslint/types").StyleTag } StyleTag
  *
  * @typedef {AnyNode | Line} AnyNodeOrLine
  * @typedef {Object} IndentType
@@ -40,6 +42,8 @@ const {
   isLine,
   isTag,
   hasTemplate,
+  isScript,
+  isStyle,
 } = require("../utils/node");
 const {
   shouldCheckTaggedTemplateExpression,
@@ -121,7 +125,7 @@ module.exports = {
     const { indentType, indentSize, indentChar } = getIndentOptionInfo(context);
 
     /**
-     * @param {Tag} node
+     * @param {Tag | ScriptTag | StyleTag} node
      * @return {number}
      */
     function getTagIncreasingLevel(node) {
@@ -150,7 +154,7 @@ module.exports = {
       if (isLine(node)) {
         return 1;
       }
-      if (isTag(node)) {
+      if (isTag(node) || isScript(node) || isStyle(node)) {
         return getTagIncreasingLevel(node);
       }
       const type = node.type;

package/lib/rules/index.js

@@ -45,6 +45,7 @@ const noInvalidRole = require("./no-invalid-role");
 const noNestedInteractive = require("./no-nested-interactive");
 const maxElementDepth = require("./max-element-depth");
 const requireExplicitSize = require("./require-explicit-size");
+const useBaseLine = require("./use-baseline");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -96,6 +97,7 @@ module.exports = {
   "require-input-label": requireInputLabel,
   "max-element-depth": maxElementDepth,
   "require-explicit-size": requireExplicitSize,
+  "use-baseline": useBaseLine,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

package/lib/rules/no-duplicate-attrs.js

@@ -3,6 +3,8 @@
  * @typedef { import("@html-eslint/types").StyleTag } StyleTag
  * @typedef { import("@html-eslint/types").ScriptTag } ScriptTag
  * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("@html-eslint/types").Attribute } Attribute
+ * @typedef { import("../types").SuggestionReportDescriptor } SuggestionReportDescriptor
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -10,6 +12,7 @@ const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   DUPLICATE_ATTRS: "duplicateAttrs",
+  REMOVE_ATTR: "removeAttr",
 };
 
 /**
@@ -26,14 +29,33 @@ module.exports = {
     },
 
     fixable: null,
+    hasSuggestions: true,
     schema: [],
     messages: {
       [MESSAGE_IDS.DUPLICATE_ATTRS]:
         "The attribute '{{attrName}}' is duplicated.",
+      [MESSAGE_IDS.REMOVE_ATTR]:
+        "Remove this duplicate '{{attrName}}' attribute.",
     },
   },
 
   create(context) {
+    /**
+     * @param {Attribute} node
+     * @returns {SuggestionReportDescriptor[]}
+     */
+    function getSuggestions(node) {
+      return [
+        {
+          messageId: MESSAGE_IDS.REMOVE_ATTR,
+          fix: (fixer) => fixer.removeRange(node.range),
+          data: {
+            attrName: node.key.value,
+          },
+        },
+      ];
+    }
+
     /**
      * @param {Tag | StyleTag | ScriptTag} node
      */
@@ -48,6 +70,7 @@ module.exports = {
                 attrName: attr.key.value,
               },
               messageId: MESSAGE_IDS.DUPLICATE_ATTRS,
+              suggest: getSuggestions(attr),
             });
           } else {
             attrsSet.add(attr.key.value.toLowerCase());

package/lib/rules/require-button-type.js

@@ -1,5 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("@html-eslint/types").AttributeValue } AttributeValue
+ * @typedef { import("../types").SuggestionReportDescriptor } SuggestionReportDescriptor
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -9,6 +11,9 @@ const { createVisitors } = require("./utils/visitors");
 const MESSAGE_IDS = {
   MISSING: "missing",
   INVALID: "invalid",
+  REPLACE_TO_SUBMIT: "replaceToSubmit",
+  REPLACE_TO_BUTTON: "replaceToButton",
+  REPLACE_TO_RESET: "replaceToReset",
 };
 
 const VALID_BUTTON_TYPES_SET = new Set(["submit", "button", "reset"]);
@@ -26,16 +31,41 @@ module.exports = {
       recommended: false,
     },
 
-    fixable: null,
+    fixable: true,
+    hasSuggestions: true,
     schema: [],
     messages: {
       [MESSAGE_IDS.MISSING]: "Missing a type attribute for button",
       [MESSAGE_IDS.INVALID]:
         '"{{type}}" is an invalid value for button type attribute.',
+      [MESSAGE_IDS.REPLACE_TO_BUTTON]: "Replace the type with 'button'",
+      [MESSAGE_IDS.REPLACE_TO_SUBMIT]: "Replace the type with 'submit'",
+      [MESSAGE_IDS.REPLACE_TO_RESET]: "Replace the type with 'reset'",
     },
   },
 
   create(context) {
+    /**
+     * @param {AttributeValue} node
+     * @returns {SuggestionReportDescriptor[]}
+     */
+    function getSuggestions(node) {
+      return [
+        {
+          messageId: MESSAGE_IDS.REPLACE_TO_SUBMIT,
+          fix: (fixer) => fixer.replaceTextRange(node.range, "submit"),
+        },
+        {
+          messageId: MESSAGE_IDS.REPLACE_TO_BUTTON,
+          fix: (fixer) => fixer.replaceTextRange(node.range, "button"),
+        },
+        {
+          messageId: MESSAGE_IDS.REPLACE_TO_RESET,
+          fix: (fixer) => fixer.replaceTextRange(node.range, "reset"),
+        },
+      ];
+    }
+
     return createVisitors(context, {
       Tag(node) {
         if (node.name !== "button") {
@@ -46,6 +76,9 @@ module.exports = {
           context.report({
             node: node.openStart,
             messageId: MESSAGE_IDS.MISSING,
+            fix(fixer) {
+              return fixer.insertTextAfter(node.openStart, ' type="submit"');
+            },
           });
         } else if (
           !VALID_BUTTON_TYPES_SET.has(typeAttr.value.value) &&
@@ -57,6 +90,7 @@ module.exports = {
             data: {
               type: typeAttr.value.value,
             },
+            suggest: getSuggestions(typeAttr.value),
           });
         }
       },

package/lib/rules/use-baseline.js

@@ -0,0 +1,269 @@
+/**
+ * @typedef {Object} Option
+ * @property {"widely" | "newly" | number} Option.available
+ * @typedef { import("../types").RuleModule<[Option]> } RuleModule
+ * @typedef {import("@html-eslint/types").Attribute} Attribute
+ * @typedef {import("@html-eslint/types").Tag} Tag
+ * @typedef {import("@html-eslint/types").ScriptTag} ScriptTag
+ * @typedef {import("@html-eslint/types").StyleTag} StyleTag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const {
+  elements,
+  globalAttributes,
+  BASELINE_HIGH,
+  BASELINE_LOW,
+} = require("./utils/baseline");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  NOT_BASELINE_ELEMENT: "notBaselineElement",
+  NOT_BASELINE_ELEMENT_ATTRIBUTE: "notBaselineElementAttribute",
+  NOT_BASELINE_GLOBAL_ATTRIBUTE: "notBaselineGlobalAttribute",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Enforce the use of baseline features.",
+      recommended: true,
+      category: RULE_CATEGORY.BEST_PRACTICE,
+    },
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          available: {
+            anyOf: [
+              {
+                enum: ["widely", "newly"],
+              },
+              {
+                // baseline year
+                type: "integer",
+                minimum: 2000,
+                maximum: new Date().getFullYear(),
+              },
+            ],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+
+    messages: {
+      [MESSAGE_IDS.NOT_BASELINE_ELEMENT]:
+        "Element '{{element}}' is not a {{availability}} available baseline feature.",
+      [MESSAGE_IDS.NOT_BASELINE_ELEMENT_ATTRIBUTE]:
+        "Attribute '{{attr}}' on '{{element}}' is not a {{availability}} available baseline feature.",
+      [MESSAGE_IDS.NOT_BASELINE_GLOBAL_ATTRIBUTE]:
+        "Attribute '{{attr}}' is not a {{availability}} available baseline feature.",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || { available: "widely" };
+    const available = options.available;
+
+    const baseYear = typeof available === "number" ? available : null;
+    const baseStatus = available === "widely" ? BASELINE_HIGH : BASELINE_LOW;
+    const availability = String(available);
+
+    /**
+     * @param {string} element
+     * @returns {boolean}
+     */
+    function isCustomElement(element) {
+      return element.includes("-");
+    }
+
+    /**
+     * @param {string} encoded
+     * @returns {[number, number]}
+     */
+    function decodeStatus(encoded) {
+      const [status, year = NaN] = encoded
+        .split(":")
+        .map((part) => Number(part));
+      return [status, year];
+    }
+
+    /**
+     * @param {string} encoded
+     * @returns {boolean}
+     */
+    function isSupported(encoded) {
+      const [status, year = NaN] = decodeStatus(encoded);
+      if (baseYear) {
+        return year <= baseYear;
+      }
+      return status >= baseStatus;
+    }
+
+    /**
+     * @param {string} element
+     * @returns {boolean}
+     */
+    function isSupportedElement(element) {
+      const elementEncoded = elements.get(element);
+      if (!elementEncoded) {
+        return true;
+      }
+      return isSupported(elementEncoded);
+    }
+
+    /**
+     * @param {string[]} parts
+     * @returns {string}
+     */
+    function toStatusKey(...parts) {
+      return parts.map((part) => part.toLowerCase().trim()).join(".");
+    }
+
+    /**
+     * @param {string} element
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function isSupportedElementAttributeKey(element, key) {
+      const elementStatus = elements.get(toStatusKey(element, key));
+      if (!elementStatus) {
+        return true;
+      }
+      return isSupported(elementStatus);
+    }
+
+    /**
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function isSupportedGlobalAttributeKey(key) {
+      const globalAttrStatus = globalAttributes.get(toStatusKey(key));
+      if (!globalAttrStatus) {
+        return true;
+      }
+      return isSupported(globalAttrStatus);
+    }
+
+    /**
+     * @param {string} element
+     * @param {string} key
+     * @param {string} value
+     * @returns {boolean}
+     */
+    function isSupportedElementAttributeKeyValue(element, key, value) {
+      const elementStatus = elements.get(toStatusKey(element, key, value));
+      if (!elementStatus) {
+        return true;
+      }
+      return isSupported(elementStatus);
+    }
+
+    /**
+     * @param {string} key
+     * @param {string} value
+     * @returns {boolean}
+     */
+    function isSupportedGlobalAttributeKeyValue(key, value) {
+      const globalAttrStatus = globalAttributes.get(toStatusKey(key, value));
+      if (!globalAttrStatus) {
+        return true;
+      }
+      return isSupported(globalAttrStatus);
+    }
+
+    /**
+     * @param {Tag | ScriptTag | StyleTag} node
+     * @param {string} elementName
+     * @param {Attribute[]} attributes
+     */
+    function check(node, elementName, attributes) {
+      if (isCustomElement(elementName)) {
+        return;
+      }
+
+      if (!isSupportedElement(elementName)) {
+        context.report({
+          node: node.openStart,
+          messageId: MESSAGE_IDS.NOT_BASELINE_ELEMENT,
+          data: {
+            element: `<${elementName}>`,
+            availability,
+          },
+        });
+      }
+      attributes.forEach((attribute) => {
+        if (!isSupportedElementAttributeKey(elementName, attribute.key.value)) {
+          context.report({
+            node: attribute.key,
+            messageId: MESSAGE_IDS.NOT_BASELINE_ELEMENT_ATTRIBUTE,
+            data: {
+              element: `<${elementName}>`,
+              attr: attribute.key.value,
+              availability,
+            },
+          });
+        } else if (!isSupportedGlobalAttributeKey(attribute.key.value)) {
+          context.report({
+            node: attribute.key,
+            messageId: MESSAGE_IDS.NOT_BASELINE_GLOBAL_ATTRIBUTE,
+            data: {
+              attr: attribute.key.value,
+              availability,
+            },
+          });
+        } else if (attribute.value) {
+          if (
+            !isSupportedElementAttributeKeyValue(
+              elementName,
+              attribute.key.value,
+              attribute.value.value
+            )
+          ) {
+            context.report({
+              node: attribute.key,
+              messageId: MESSAGE_IDS.NOT_BASELINE_ELEMENT_ATTRIBUTE,
+              data: {
+                element: `<${elementName}>`,
+                attr: `${attribute.key.value}="${attribute.value.value}"`,
+                availability,
+              },
+            });
+          } else if (
+            !isSupportedGlobalAttributeKeyValue(
+              attribute.key.value,
+              attribute.value.value
+            )
+          ) {
+            context.report({
+              node: attribute,
+              messageId: MESSAGE_IDS.NOT_BASELINE_GLOBAL_ATTRIBUTE,
+              data: {
+                attr: `${attribute.key.value}="${attribute.value.value}"`,
+                availability,
+              },
+            });
+          }
+        }
+      });
+    }
+
+    return createVisitors(context, {
+      ScriptTag(node) {
+        check(node, "script", node.attributes);
+      },
+      StyleTag(node) {
+        check(node, "style", node.attributes);
+      },
+      Tag(node) {
+        check(node, node.name, node.attributes);
+      },
+    });
+  },
+};