[Angular] Support to sort host class

[GregOnNet]

Hi,

in our team, we start using host-Atributes of a Component simplify style-overrides.

@Component({
  standalone: true,
  selector: 'app-title',
  host: {
    class:
      'block font-medium text-sm uppercase text-green-500 text-wrap font-bold',
    role: 'heading',
    'aria-level': '1',
  },
  template: ` <ng-content></ng-content> `,
})
export class TitleComponent {}

Observation

Currently, prettier-plugin-tailwindcss seems not to recognize host-class.

Question

How could we configure/enhance prettier-plugin-tailwindcss to sort tailwind-classes within host:class?

Pull-Request

I would like to help to create a PR for this.
I would need some guidance to start. :-)

[ayush-seth]

I have been frustrated by this problem for some time and this is what I do to work around it:

@Component({
  selector: 'app-title',
  host: {
    "[class]": "hostClasses()"
    role: 'heading',
    'aria-level': '1',
  },
  template: ` <ng-content></ng-content> `,
})
export class TitleComponent {
  hostClasses = signal("block font-medium text-sm uppercase text-green-500 text-wrap font-bold");
}

In .prettierrc, config for the prettier plugin

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["signal"]
}

In settings.json for getting auto-complete and linting from the vscode tailwind plugin

{  "tailwindCSS.classFunctions": ["signal"] }

You can also add any other functions in the list that you might want to use like computed or linkedSignal