group-hover modifier and group-hover/{name} don't get formated/sorted (potentially all group-* modifiers)

[delight]

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

v0.6.9

What version of Tailwind CSS are you using?

v3.4.16

What version of Node.js are you using?

v20.14.0

What package manager are you using?

pnpm

What operating system are you using?

Linux

Describe your issue

Using the Styling based on parent state (group-{modifier}) there is no formating / sorting happening.

[cckrause]

Having the same issue with the latest plugin version v0.6.11 ...

input:

echo '<div class="group-data-[layout=full-width]/layout:min-1668:max-w-[808px] mb-8 group-data-[layout=full-width]/layout:mx-auto group-data-[layout=full-width]/layout:max-w-2xl md:mb-10 xl:mb-12"></div>' | npx prettier --stdin-filepath test.html

output:

<div
  class="mb-8 group-data-[layout=full-width]/layout:mx-auto group-data-[layout=full-width]/layout:max-w-2xl md:mb-10 xl:mb-12 group-data-[layout=full-width]/layout:min-1668:max-w-[808px]"
></div>

expected:

<div
  class="group-data-[layout=full-width]/layout:mx-auto group-data-[layout=full-width]/layout:max-w-2xl group-data-[layout=full-width]/layout:min-1668:max-w-[808px] mb-8 md:mb-10 xl:mb-12"
></div>

[thecrypticace]

@cckrause The expected output should push all group-* classes to the end (well after normal utilities anyway). If you ever have a class with variants that gets sorted to the front then either a variant is invalid/unknown, the utility is invalid/unknown, or your config isn't being used. In your case it's probably that min-1668 isn't a valid variant. Not sure what you meant to write there.

@delight As far as I can tell this works just fine in 3.x and 4.x. It's likely the same problem as above. If you can provide a reproduction and @-mention me I'll take another look.

[delight]

@thecrypticace Hi Jordan I'm on a 1 month vacay. So I don't think I'll be able to review it on time. I bet it's working. If ever I run into the same issues I'll open a new issue.