Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

DianaSuvorova
Copy link

@DianaSuvorova DianaSuvorova commented Apr 1, 2025

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

Description

Currently, @angular-eslint/template-parser is recommended for HTML parsing, but it is not compatible with rules or plugins built on @html-eslint/parser, due to limitations discussed in:

eslint/eslint#18808

yeonjuan/html-eslint#211

This makes it difficult to use Tailwind-related ESLint rules in projects that use AlpineJS, since Alpine syntax (e.g. :class, x-cloak, x-transition) causes many false-positive errors.

Example from AlpineJS+Tailwind code (this one):

  10:9   error  Classname '{' is not a Tailwind CSS class!                        tailwindcss/no-custom-classname
  10:9   error  Classname ''border-neutral-200/60' is not a Tailwind CSS class!   tailwindcss/no-custom-classname
  10:9   error  Classname 'text-neutral-800'' is not a Tailwind CSS class!        tailwindcss/no-custom-classname
  10:9   error  Classname 'activeAccordion==id,' is not a Tailwind CSS class!     tailwindcss/no-custom-classname
  10:9   error  Classname ''border-transparent' is not a Tailwind CSS class!      tailwindcss/no-custom-classname
  10:9   error  Classname 'my-custom'' is not a Tailwind CSS class!               tailwindcss/no-custom-classname
  10:9   error  Classname 'activeAccordion!=id' is not a Tailwind CSS class!      tailwindcss/no-custom-classname
  10:9   error  Classname '}' is not a Tailwind CSS class!                        tailwindcss/no-custom-classname

This PR introduces a generic @html-eslint/parser-based visitor that:

  • Works with both vanilla HTML and AlpineJS syntax
  • Properly extracts Tailwind classnames from class and :class bindings
  • Ignores Alpine directives like x-cloak, x-transition, etc.
  • Avoids false positives without introducing any Alpine-specific logic

This change is non-breaking — existing usage with @angular-eslint/template-parser remains fully supported.

I plan to update other rules in the plugin to support @html-eslint/parser after initial feedback on this PR.

Thanks!

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

Added tests using @html-eslint/parser with alpinejs and without

Test Configuration:

  • OS + version: Sequoia 15.3.2
  • NPM version: 8.19.2
  • Node version: v18.12.0

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant