search

yeonjuan / html-eslint

ESLint plugin for linting HTML
https://html-eslint.org
MIT License
162 stars 28 forks source link

Support for "sort-attrs" rule in Twig files #231

Open julien-lmnr opened 3 days ago

julien-lmnr commented 3 days ago

Hi 👋,

I've encountered an issue with the sort-attrs rule when working with Twig files. The rule works correctly for standard HTML attributes, such as:

<span class="font-semibold text-emerald-500">Test</span>

However, it fails when there is Twig-specific syntax within the attributes. For example, with the following code:

<span class="font-semibold text-emerald-500" {{ stimulus_controller('test') }}>Test</span>

This should be considered valid, but it is not. When I run eslint with the --fix option, it produces incorrect output:

<span class="font-semibold text-emerald-500" {{  }} stimulus_controller('test')></span>

The Twig directive is broken, and the output is no longer valid.

Expected Behavior:

The sort-attrs rule should correctly handle attributes that contain Twig-specific syntax and maintain their structure when sorting.

Actual Behavior:

The rule fails to validate attributes with Twig directives and produces invalid code when using the --fix option.

Steps to Reproduce:

  1. Create a file with the following content:
<span class="font-semibold text-emerald-500" {{ stimulus_controller('test') }}>Test</span>
  1. Run eslint with the --fix option using the sort-attrs rule enabled:
eslint your-file.twig --fix
  1. Observe that the output is invalid:
<span class="font-semibold text-emerald-500" {{  }} stimulus_controller('test')></span>

Suggestion:

Would it be possible to enhance the sort-attrs rule to correctly handle attributes that include Twig directives or custom syntax? Perhaps the rule could recognize such syntax and exclude it from sorting operations or process it as a single unit.

Thank you for your work on this project, and let me know if I can provide more information!

yeonjuan commented 2 days ago

Hi @julien-lmnr Thanks for reporting the issue. It would be nice to support linting for this twig as well, since it is used with many different template engines, rather than just HTML as is. However, I don't think it's a good idea to have special treatment only in sort-attrs. Perhaps it would be nice to allow es-html-parser to handle template engine syntax. This will take some time to develop, but it would be great to see it developed, thank you.