feat: no-custom-classname adding @html-eslint/parser and alpinejs syntax support

lib/rules/no-custom-classname.js

@@ -177,6 +177,43 @@ module.exports = {
       });
     };
 
+    // @html-eslint/parser node (with proper Alpinejs handling)
+    const htmlElsintParserVisitor = function (node) {
+      const attrName = node.key?.value;
+      const rawValue = node.value?.value;
+
+      const ALPINE_MARKERS = new Set(['x-transition', 'x-cloak']);
+
+      // alpinejs attributes, to be ignored 
+      if (!attrName || attrName.startsWith('x-')) return;
+      if (typeof rawValue !== 'string') return;
+
+      if (attrName === 'class') {
+        const classNames = rawValue
+          .split(/\s+/)
+          .filter((name) => name && !ALPINE_MARKERS.has(name));
+        parseForCustomClassNames(classNames, node);
+      }
+
+      if (attrName === ':class') {
+        // Only extract keys in object-style bindings: { 'foo bar': condition }
+        const matches = rawValue.match(/'([^']+?)'\s*:/g) || [];
+        const classNames = [];
+
+        for (const match of matches) {
+          const rawKey = match.replace(/['":]/g, '').trim();
+          rawKey.split(/\s+/).forEach((name) => {
+            if (name && !ALPINE_MARKERS.has(name)) {
+              classNames.push(name);
+            }
+          });
+        }
+
+        parseForCustomClassNames(classNames, node);
+      }
+    };
+
+
     const scriptVisitor = {
       JSXAttribute: attributeVisitor,
       TextAttribute: attributeVisitor,
@@ -187,6 +224,8 @@ module.exports = {
         }
         astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames, false, false, ignoredKeys);
       },
+      Attribute: htmlElsintParserVisitor,
+
     };
 
     const templateVisitor = {

package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@angular-eslint/template-parser": "^15.2.0",
+    "@html-eslint/parser": "^0.37.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",

tests/lib/rules/no-custom-classname.js

@@ -1123,7 +1123,28 @@ ruleTester.run("no-custom-classname", rule, {
       code: `<template><div :class="['hidden',{'text-red-500': true, 'bg-transparent': false}, {'text-green-500': true}, 'bg-white']">Issue #319</div></template>`,
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
+    },
+    {
+      code: `<div class="flex text-center sm:block md:flex"></div>`,
+      parser: require.resolve("@html-eslint/parser"),
+    },
+    {
+      code: `<div x-data="{ open: true }" class="bg-white rounded-md">Alpine.js x-data</div>`,
+      parser: require.resolve("@html-eslint/parser"),
+    },
+    {
+      code: `<div :class="{ 'text-blue-500': isOpen, 'hidden': !isOpen }"></div>`,
+      parser: require.resolve("@html-eslint/parser"),
+    },
+    {
+      code: `<div class="hover:bg-gray-100 x-transition x-cloak">Should ignore Alpine extras</div>`,
+      parser: require.resolve("@html-eslint/parser"),
+    },
+    {
+      code: `<div class="flex" :class="{ 'bg-white': open, 'text-red-500': !open }">Hybrid class binding</div>`,
+      parser: require.resolve("@html-eslint/parser"),
     }
+
   ],
 
   invalid: [
@@ -1610,5 +1631,31 @@ ruleTester.run("no-custom-classname", rule, {
       code: `<div class="grid grid-flow-col gap-4 grid-rows-supagrid">Subgrid support</div>`,
       errors: generateErrors("grid-rows-supagrid"),
     },
+    {
+      code: `<div class="unknown-class tailwind-fail">Invalid HTML classes</div>`,
+      parser: require.resolve("@html-eslint/parser"),
+      errors: generateErrors("unknown-class tailwind-fail"),
+    },
+    {
+      code: `<div :class="{ 'bg-custom': isActive, 'text-💥': hasError }"></div>`,
+      parser: require.resolve("@html-eslint/parser"),
+      errors: generateErrors("bg-custom text-💥"),
+    },
+    {
+      code: `<div class="rounded shadow custom-btn">Basic + invalid class</div>`,
+      parser: require.resolve("@html-eslint/parser"),
+      errors: generateErrors("custom-btn"),
+    },
+    {
+      code: `<div :class="{ 'foo-bar': isFoo, 'bar-baz': isBar }"></div>`,
+      parser: require.resolve("@html-eslint/parser"),
+      errors: generateErrors("foo-bar bar-baz"),
+    },
+    {
+      code: `<div class="bg-white" :class="{ 'bg-offwhite': hasAlt, 'text-neon': mode === 'neon' }"></div>`,
+      parser: require.resolve("@html-eslint/parser"),
+      errors: generateErrors("bg-offwhite text-neon"),
+    }
+
   ],
 });