@html-eslint/eslint-plugin 0.38.1 → 0.39.0

package/lib/rules/index.js

@@ -46,6 +46,7 @@ const noNestedInteractive = require("./no-nested-interactive");
 const maxElementDepth = require("./max-element-depth");
 const requireExplicitSize = require("./require-explicit-size");
 const useBaseLine = require("./use-baseline");
+const noDuplicateClass = require("./no-duplicate-class");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -98,6 +99,7 @@ module.exports = {
   "max-element-depth": maxElementDepth,
   "require-explicit-size": requireExplicitSize,
   "use-baseline": useBaseLine,
+  "no-duplicate-class": noDuplicateClass,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

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

@@ -0,0 +1,137 @@
+/**
+ * @typedef { import("@html-eslint/types").Tag } Tag
+ * @typedef { import("@html-eslint/types").StyleTag } StyleTag
+ * @typedef { import("@html-eslint/types").ScriptTag } ScriptTag
+ * @typedef { import("@html-eslint/types").AttributeValue } AttributeValue
+ * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef {Object} ClassInfo
+ * @property {string} name
+ * @property {import("@html-eslint/types").AnyNode['loc']} loc
+ * @property {import("@html-eslint/types").AnyNode['range']} range
+ */
+
+const { NodeTypes } = require("es-html-parser");
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  DUPLICATE_CLASS: "duplicateClass",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallow to use duplicate class",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.DUPLICATE_CLASS]: "The class '{{class}}' is duplicated.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @param {AttributeValue} value
+     * @returns {{value: string, pos: number}[]}
+     */
+    function splitClassAndSpaces(value) {
+      /**
+       * @type {{value: string, pos: number}[]}
+       */
+      const result = [];
+      const regex = /(\s+|\S+)/g;
+      /**
+       * @type {RegExpExecArray | null}
+       */
+      let match = null;
+
+      while ((match = regex.exec(value.value)) !== null) {
+        result.push({
+          value: match[0],
+          pos: match.index,
+        });
+      }
+
+      return result;
+    }
+
+    return createVisitors(context, {
+      Attribute(node) {
+        if (node.key.value.toLowerCase() !== "class") {
+          return;
+        }
+        const attributeValue = node.value;
+        if (
+          !attributeValue ||
+          !attributeValue.value ||
+          attributeValue.parts.some((part) => part.type === NodeTypes.Template)
+        ) {
+          return;
+        }
+        const classesAndSpaces = splitClassAndSpaces(attributeValue);
+        const classSet = new Set();
+        classesAndSpaces.forEach(({ value, pos }, index) => {
+          const className = value.trim();
+
+          if (className.length && classSet.has(className)) {
+            context.report({
+              loc: {
+                start: {
+                  line: attributeValue.loc.start.line,
+                  column: attributeValue.loc.start.column + pos,
+                },
+                end: {
+                  line: attributeValue.loc.start.line,
+                  column:
+                    attributeValue.loc.start.column + pos + className.length,
+                },
+              },
+              data: {
+                class: className,
+              },
+              messageId: MESSAGE_IDS.DUPLICATE_CLASS,
+              fix(fixer) {
+                if (!node.value) {
+                  return null;
+                }
+                const before = classesAndSpaces[index - 1];
+                const after = classesAndSpaces[index + 1];
+                const hasSpacesBefore =
+                  !!before && before.value.trim().length === 0;
+                const hasSpacesAfter =
+                  !!after && after.value.trim().length === 0;
+                const hasClassBefore = !!classesAndSpaces[index - 2];
+                const hasClassAfter = !!classesAndSpaces[index + 2];
+
+                const startRange = hasSpacesBefore
+                  ? attributeValue.range[0] + before.pos
+                  : attributeValue.range[0] + pos;
+
+                const endRange = hasSpacesAfter
+                  ? attributeValue.range[0] +
+                    pos +
+                    value.length +
+                    after.value.length
+                  : attributeValue.range[0] + pos + value.length;
+
+                return fixer.replaceTextRange(
+                  [startRange, endRange],
+                  hasClassBefore && hasClassAfter ? " " : ""
+                );
+              },
+            });
+          } else {
+            classSet.add(className);
+          }
+        });
+      },
+    });
+  },
+};

package/lib/rules/use-baseline.js

@@ -178,6 +178,65 @@ module.exports = {
       return isSupported(globalAttrStatus);
     }
 
+    /**
+     *
+     * @param {string} element
+     * @param {string} key
+     * @param {string} value
+     * @returns {string | null}
+     */
+    function getElementAttributeSpecificStatusKey(element, key, value) {
+      const elementName = element.toLowerCase();
+      const attributeKey = key.toLowerCase();
+      const attributeValue = value.toLowerCase();
+
+      // <input type="...">
+      if (elementName === "input" && attributeKey === "type") {
+        return `input.type_${attributeValue}`;
+      }
+
+      // <a href="sms:0000..">
+      if (
+        elementName === "a" &&
+        attributeKey === "href" &&
+        attributeValue.trim().startsWith("sms:")
+      ) {
+        return "a.href.href_sms";
+      }
+
+      // <td rowspan="0"> <th rowspan="0">
+      if (
+        (elementName === "td" || elementName === "th") &&
+        attributeKey === "rowspan" &&
+        attributeValue === "0"
+      ) {
+        return `${elementName}.rowspan.rowspan_zero`;
+      }
+      return null;
+    }
+
+    /**
+     * @param {string} element
+     * @param {string} key
+     * @param {string} value
+     * @returns {boolean}
+     */
+    function isSupportedElementSpecificAttributeKeyValue(element, key, value) {
+      const statusKey = getElementAttributeSpecificStatusKey(
+        element,
+        key,
+        value
+      );
+      if (!statusKey) {
+        return true;
+      }
+      const elementStatus = elements.get(statusKey);
+      if (!elementStatus) {
+        return true;
+      }
+      return isSupported(elementStatus);
+    }
+
     /**
      * @param {Tag | ScriptTag | StyleTag} node
      * @param {string} elementName
@@ -224,6 +283,11 @@ module.exports = {
               elementName,
               attribute.key.value,
               attribute.value.value
+            ) ||
+            !isSupportedElementSpecificAttributeKeyValue(
+              elementName,
+              attribute.key.value,
+              attribute.value.value
             )
           ) {
             context.report({

package/lib/rules/utils/baseline.js

@@ -11,7 +11,10 @@ const elements = new Map([
   ["a.attributionsrc", "0:"],
   ["a.download", "10:2019"],
   ["a.href", "10:2015"],
+  ["a.href.href_sms", "0:"],
+  ["a.href.href_top", "10:2015"],
   ["a.hreflang", "10:2015"],
+  ["a.implicit_noopener", "10:2021"],
   ["a.ping", "0:"],
   ["a.referrerpolicy", "10:2020"],
   ["a.referrerpolicy.no-referrer-when-downgrade", "0:"],
@@ -22,6 +25,7 @@ const elements = new Map([
   ["a.rel.noreferrer", "10:2015"],
   ["a.target", "10:2015"],
   ["a.target.unfencedTop", "0:"],
+  ["a.text_fragments", "5:2024"],
   ["a.type", "10:2015"],
   ["abbr", "10:2015"],
   ["address", "10:2015"],
@@ -31,6 +35,7 @@ const elements = new Map([
   ["area.coords", "10:2015"],
   ["area.download", "10:2017"],
   ["area.href", "10:2015"],
+  ["area.implicit_noopener", "10:2021"],
   ["area.ping", "0:"],
   ["area.referrerpolicy", "10:2020"],
   ["area.referrerpolicy.no-referrer-when-downgrade", "0:"],
@@ -56,6 +61,8 @@ const elements = new Map([
   ["b", "10:2015"],
   ["base", "10:2015"],
   ["base.href", "10:2015"],
+  ["base.href.forbid_data_javascript_urls", "5:2024"],
+  ["base.href.relative_url", "10:2015"],
   ["base.target", "10:2015"],
   ["bdi", "10:2020"],
   ["bdo", "10:2015"],
@@ -75,6 +82,7 @@ const elements = new Map([
   ["button.formtarget", "10:2015"],
   ["button.name", "10:2015"],
   ["button.popovertarget", "5:2024"],
+  ["button.popovertarget.implicit_anchor_reference", "0:"],
   ["button.popovertargetaction", "5:2024"],
   ["button.type", "10:2015"],
   ["button.value", "10:2015"],
@@ -203,6 +211,7 @@ const elements = new Map([
   ["iframe.width", "10:2015"],
   ["img", "10:2015"],
   ["img.alt", "10:2015"],
+  ["img.aspect_ratio_computed_from_attributes", "10:2021"],
   ["img.attributionsrc", "0:"],
   ["img.crossorigin", "10:2015"],
   ["img.decoding", "10:2020"],
@@ -244,12 +253,38 @@ const elements = new Map([
   ["input.pattern", "10:2015"],
   ["input.placeholder", "10:2015"],
   ["input.popovertarget", "5:2024"],
+  ["input.popovertarget.implicit_anchor_reference", "0:"],
   ["input.popovertargetaction", "5:2024"],
   ["input.readonly", "10:2015"],
   ["input.required", "10:2015"],
   ["input.size", "10:2015"],
   ["input.src", "10:2015"],
   ["input.step", "10:2015"],
+  ["input.type_button", "10:2015"],
+  ["input.type_checkbox", "10:2015"],
+  ["input.type_color", "0:"],
+  ["input.type_date", "10:2021"],
+  ["input.type_datetime-local", "10:2021"],
+  ["input.type_email", "10:2015"],
+  ["input.type_file", "10:2015"],
+  ["input.type_hidden", "10:2015"],
+  ["input.type_image", "10:2015"],
+  ["input.type_month", "0:"],
+  ["input.type_number", "10:2015"],
+  ["input.type_password", "10:2015"],
+  ["input.type_password.insecure_login_handling", "0:"],
+  ["input.type_radio", "10:2015"],
+  ["input.type_range", "10:2017"],
+  ["input.type_range.tick_marks", "5:2023"],
+  ["input.type_range.vertical_orientation", "5:2024"],
+  ["input.type_reset", "10:2015"],
+  ["input.type_search", "10:2015"],
+  ["input.type_submit", "10:2015"],
+  ["input.type_tel", "10:2015"],
+  ["input.type_text", "10:2015"],
+  ["input.type_time", "10:2021"],
+  ["input.type_url", "10:2015"],
+  ["input.type_week", "0:"],
   ["ins", "10:2015"],
   ["ins.cite", "10:2015"],
   ["ins.datetime", "10:2015"],
@@ -276,6 +311,7 @@ const elements = new Map([
   ["link.referrerpolicy.origin-when-cross-origin", "0:"],
   ["link.referrerpolicy.unsafe-url", "0:"],
   ["link.rel", "10:2015"],
+  ["link.rel.alternate_stylesheet", "0:"],
   ["link.rel.dns-prefetch", "5:2024"],
   ["link.rel.expect", "0:"],
   ["link.rel.manifest", "0:"],
@@ -372,13 +408,17 @@ const elements = new Map([
   ["script.type.module", "10:2018"],
   ["script.type.speculationrules", "0:"],
   ["script.type.speculationrules.eagerness", "0:"],
+  ["script.type.speculationrules.expects_no_vary_search", "0:"],
   ["script.type.speculationrules.prefetch", "0:"],
   ["script.type.speculationrules.prerender", "0:"],
+  ["script.type.speculationrules.referrer_policy", "0:"],
+  ["script.type.speculationrules.relative_to", "0:"],
   ["script.type.speculationrules.requires", "0:"],
   [
     "script.type.speculationrules.requires.anonymous-client-ip-when-cross-origin",
     "0:",
   ],
+  ["script.type.speculationrules.source_optional", "0:"],
   ["script.type.speculationrules.urls", "0:"],
   ["script.type.speculationrules.where", "0:"],
   ["search", "5:2023"],
@@ -386,6 +426,7 @@ const elements = new Map([
   ["select", "10:2015"],
   ["select.disabled", "10:2015"],
   ["select.form", "10:2015"],
+  ["select.hr_in_select", "0:"],
   ["select.multiple", "10:2015"],
   ["select.name", "10:2015"],
   ["select.required", "10:2015"],
@@ -409,6 +450,7 @@ const elements = new Map([
   ["style.media", "10:2015"],
   ["sub", "10:2015"],
   ["summary", "10:2020"],
+  ["summary.display_list_item", "0:"],
   ["sup", "10:2015"],
   ["table", "10:2015"],
   ["tbody", "10:2015"],
@@ -416,6 +458,7 @@ const elements = new Map([
   ["td.colspan", "10:2015"],
   ["td.headers", "10:2015"],
   ["td.rowspan", "10:2015"],
+  ["td.rowspan.rowspan_zero", "0:"],
   ["template", "10:2015"],
   ["template.shadowrootclonable", "0:"],
   ["template.shadowrootdelegatesfocus", "0:"],
@@ -431,6 +474,7 @@ const elements = new Map([
   ["textarea.minlength", "10:2018"],
   ["textarea.name", "10:2015"],
   ["textarea.placeholder", "10:2015"],
+  ["textarea.placeholder.line_breaks", "10:2022"],
   ["textarea.readonly", "10:2015"],
   ["textarea.required", "10:2015"],
   ["textarea.rows", "10:2015"],
@@ -443,6 +487,7 @@ const elements = new Map([
   ["th.colspan", "10:2015"],
   ["th.headers", "10:2015"],
   ["th.rowspan", "10:2015"],
+  ["th.rowspan.rowspan_zero", "0:"],
   ["th.scope", "10:2015"],
   ["thead", "10:2015"],
   ["time", "10:2017"],
@@ -459,6 +504,7 @@ const elements = new Map([
   ["ul", "10:2015"],
   ["var", "10:2015"],
   ["video", "10:2015"],
+  ["video.aspect_ratio_computed_from_attributes", "10:2020"],
   ["video.autoplay", "10:2016"],
   ["video.controls", "10:2015"],
   ["video.controlslist", "0:"],
@@ -484,10 +530,12 @@ const globalAttributes = new Map([
   ["enterkeyhint", "10:2021"],
   ["exportparts", "10:2020"],
   ["inert", "5:2023"],
+  ["inert.ignores_find_in_page", "0:"],
   ["inputmode", "10:2021"],
   ["is", "0:"],
   ["lang", "10:2015"],
   ["nonce", "10:2022"],
+  ["nonce.nonce_hiding", "10:2022"],
   ["part", "10:2020"],
   ["popover", "5:2024"],
   ["popover.hint", "0:"],
@@ -496,6 +544,7 @@ const globalAttributes = new Map([
   ["style", "10:2015"],
   ["tabindex", "10:2015"],
   ["title", "10:2015"],
+  ["title.multi-line_titles", "10:2018"],
   ["translate", "5:2023"],
   ["virtualkeyboardpolicy", "0:"],
   ["writingsuggestions", "0:"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -37,12 +37,12 @@
     "accessibility"
   ],
   "dependencies": {
-    "@html-eslint/template-parser": "^0.38.0",
-    "@html-eslint/template-syntax-parser": "^0.38.0"
+    "@html-eslint/template-parser": "^0.39.0",
+    "@html-eslint/template-syntax-parser": "^0.39.0"
   },
   "devDependencies": {
-    "@html-eslint/parser": "^0.38.0",
-    "@html-eslint/types": "^0.38.0",
+    "@html-eslint/parser": "^0.39.0",
+    "@html-eslint/types": "^0.39.0",
     "@types/eslint": "^9.6.1",
     "@types/estree": "^0.0.47",
     "es-html-parser": "0.1.1",
@@ -50,5 +50,5 @@
     "espree": "^10.3.0",
     "typescript": "^5.7.2"
   },
-  "gitHead": "501ee2415f685bada6b4a967e0e7e72f605b403c"
+  "gitHead": "baf5c0359f6c4c45d70fe67eba88ec408a141036"
 }

package/types/index.d.ts

@@ -65,6 +65,7 @@ type AllRules = {
     "max-element-depth": import("./types").RuleModule<[import("./rules/max-element-depth").Option]>;
     "require-explicit-size": import("./types").RuleModule<[import("./rules/require-explicit-size").Option]>;
     "use-baseline": import("./types").RuleModule<[import("./rules/use-baseline").Option]>;
+    "no-duplicate-class": import("./types").RuleModule<[]>;
 };
 type RecommendedConfig = {
     rules: {

package/types/rules/index.d.ts

@@ -47,6 +47,7 @@ declare const _exports: {
     "max-element-depth": import("../types").RuleModule<[maxElementDepth.Option]>;
     "require-explicit-size": import("../types").RuleModule<[requireExplicitSize.Option]>;
     "use-baseline": import("../types").RuleModule<[useBaseLine.Option]>;
+    "no-duplicate-class": import("../types").RuleModule<[]>;
 };
 export = _exports;
 import requireImgAlt = require("./require-img-alt");

package/types/rules/no-duplicate-class.d.ts

@@ -0,0 +1,16 @@
+declare namespace _exports {
+    export { Tag, StyleTag, ScriptTag, AttributeValue, RuleModule, ClassInfo };
+}
+declare const _exports: RuleModule;
+export = _exports;
+type Tag = import("@html-eslint/types").Tag;
+type StyleTag = import("@html-eslint/types").StyleTag;
+type ScriptTag = import("@html-eslint/types").ScriptTag;
+type AttributeValue = import("@html-eslint/types").AttributeValue;
+type RuleModule = import("../types").RuleModule<[]>;
+type ClassInfo = {
+    name: string;
+    loc: import("@html-eslint/types").AnyNode["loc"];
+    range: import("@html-eslint/types").AnyNode["range"];
+};
+//# sourceMappingURL=no-duplicate-class.d.ts.map

package/types/rules/no-duplicate-class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-duplicate-class.d.ts","sourceRoot":"","sources":["../../lib/rules/no-duplicate-class.js"],"names":[],"mappings":";;;wBAqBU,UAAU;;WApBN,OAAO,oBAAoB,EAAE,GAAG;gBAChC,OAAO,oBAAoB,EAAE,QAAQ;iBACrC,OAAO,oBAAoB,EAAE,SAAS;sBACtC,OAAO,oBAAoB,EAAE,cAAc;kBAC3C,OAAO,UAAU,EAAE,UAAU,CAAC,EAAE,CAAC;;UAEjC,MAAM;SACN,OAAO,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC;WAC3C,OAAO,oBAAoB,EAAE,OAAO,CAAC,OAAO,CAAC"}

package/types/rules/utils/baseline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"baseline.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/baseline.js"],"names":[],"mappings":"AAOA,2CAodG;AACH,mDAyBG;AArfH;;GAEG;AACH,4BAAsB,EAAE,CAAC;AACzB,2BAAqB,CAAC,CAAC;AACvB,6BAAuB,CAAC,CAAC"}
+{"version":3,"file":"baseline.d.ts","sourceRoot":"","sources":["../../../lib/rules/utils/baseline.js"],"names":[],"mappings":"AAOA,2CAkgBG;AACH,mDA4BG;AAtiBH;;GAEG;AACH,4BAAsB,EAAE,CAAC;AACzB,2BAAqB,CAAC,CAAC;AACvB,6BAAuB,CAAC,CAAC"}