Sorting does not work with Angular class HostBinding

[dandax]

What version of prettier-plugin-tailwindcss are you using?

v0.5.6

What version of Tailwind CSS are you using?

v3.3.5

What version of Node.js are you using?

v18.15.0

What package manager are you using?

npm

What operating system are you using?

Windows

Reproduction URL

https://github.com/dandax/ng-tailwind

Describe your issue

Since Angular components will generate a parent node to house its content, I would like to specify the class list using HostBinding. Two possible methods for this are as follows:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  host: {
    class: 'relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12'
  },
  standalone: true
})
export class AppComponent {}

or

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true
})
export class AppComponent {
  @HostBinding('class') get class() {
    return 'relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12';
  }
}

If I change the value to relative min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 flex, it will not move the flex class to the right of relative.

I have also tried using a template literal as described here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-classes-in-template-literals, but it also does not work.

It's worth noting that the following does work, but I would rather not use @apply.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  styles: [
    `
      :host {
        @apply relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12;
      }
    `,
  ],
})
export class AppComponent {}

[thecrypticace]

Hey, so this is a very, very specific feature that we're not likely to add a feature to detect. That said, you can use existing features today to sort those classes:

1. First update your prettier config to add "tw" to the tailwindFunctions option (as discussed in the README)
2. Then define a tw function (also mentioned in the readme — but also listed below)
3. Then use a template literal tagged with tw like this:

const tw = (strings, ...values) => String.raw({ raw: strings }, ...values)

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true
})
export class AppComponent {
  @HostBinding('class')
  get class() {
    // Note how this is tagged with `tw`
    return tw`relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12`;
  }
}

[dandax]

Gah! I tried this so many times and it did not work. Against my better judgement, I should've reloaded VS Code after making the change to the config file. Turns out the Prettier extension is caching the configuration and doesn't refresh when the file is changed.

Thanks for the nudge @thecrypticace!