ESLint: HTML classname ordering

[HugoMendes98]

Context

As described here, the order of CSS classes in the class attribute does not matter.
So, to avoid conflicts, the alphabetical order is the preferred solution.

Bad:

<div class="my-class a-class"></div>

Good:

<div class="a-class my-class"></div>

Preliminary tasks

• Find if a rule/plugin already exists
  • If so, set and configure
• If not, create one
  • Not necessary for Nx-NestJS-Angular only, it could be a regular ESLint plugin used by anyone

The rule

In case no existing solution is found.

Even if the main priority is the class attribute, this ordering rule could be used to others.
For instance, if a custom attribute is used:

<div class="a b" tags="colors-blue-red-white"></div>

So it is more a eslint-html-attr-ordering plugin.

Specs

An error should be returned values inside an attribute are not ordered.

The rule should allow the following configuration:

• Case sensitive: Does the case affects the ordering
• Direction: Order the decorators a->z or z->a
• Allow exceptions
  • With a regex match ?
• Fixable (at least, by default)
• Define separator
  • With a regex match ?
  • Default:
• Does it need some special configuration for frameworks (Angular, React, Vue, ...)

The configuration should probably by an array.
It could look like:

{
  "myRule": [
      "warn",
      [
        {
          "attribute": "src",
          "caseSensitive": false
        },
        {
          "attribute": "tags",
          "except": ["color"],
          "separator": "-",
        }
      ]
    ]
}

Note:
If tailwind is set, then the eslint-plugin-tailwindcss should probably be used.

This rule's purpose is not to replace it, but to be an alternative and aims to be able to order other fields.