Eslint plugin isn't working with attributify

zumm commented 1 month ago

UnoCSS version

0.61.5

Describe the bug

Eslint plugin isn't working with attributify. Utility classes are sorting inside class attribute, but not inside other attributes. See reproduction, in App.vue wrong order classes order inside class and un-before attributes, but eslint warns only about class.

<template>
  <h1
    class="text-center font-sans color-gray"
    un-before="text-center font-sans color-gray"
  >
    Hello World
  </h1>
</template>

Reproduction

https://stackblitz.com/edit/unocss-unocss-cfjwep?file=uno.config.ts

Go to terminal and execute: eslint ./src/App.vue

❯ eslint ./src/App.vue

/home/projects/unocss-unocss-cfjwep/src/App.vue
  3:11  warning  UnoCSS utilities are not ordered  unocss/order

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.

System Info

No response

Validations

[X] Read the Contributing Guidelines.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

antfu commented 1 month ago

This is currently the limitation. From my point of view I see no robust solution to that - but if you are interested, feel free to experiment and send a PR if you find a good solution

alexanderl19 commented 1 month ago

Should this be documented on the ESLint page? Currently, the @unocss/order-attributify rule makes this seem possible. Does that rule only order the attributes themselves and not their contents?

unocss / unocss