Svete/Kit: classnames not sorted correctly in expression blocks

[ditoglez]

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

v0.2.1

What version of Tailwind CSS are you using?

v3.2.4

What version of Node.js are you using?

v16.17.1

What package manager are you using?

pnpm

What operating system are you using?

macOS

Reproduction URL

https://github.com/ditoglez/sveltekit-prettier-tailwindcss

Describe your issue

Seems like prettier is unable to format code wrapped in expression blocks in Svelte / Kit. More specifically after doing some investigation - the {#await...} block.

I created an example repo with some expression blocks in the template to check.
Having an expression block like:

{#await promise()}
    <h1 class="text-2xl text-blue-600 animate-pulse font-bold">Loading...</h1>
{:then}
    <h1 class="text-blue-400 text-2xl font-bold">Loaded</h1>
{/await}

{#await promise() then}
    <h1 class="font-bold text-blue-400 text-2xl">Loaded without status</h1>
{/await}

and running pnpm format from the command line I would expect the classnames be formatted like:

{#await promise()}
    <h1 class="animate-pulse text-2xl font-bold text-blue-600">Loading...</h1>
{:then}
    <h1 class="text-2xl font-bold text-blue-400 ">Loaded</h1>
{/await}

{#await promise() then}
    <h1 class="text-2xl font-bold text-blue-400">Loaded without status</h1>
{/await}

Seems like classes in other blocks {#if}, {#each} are sorted correctly.

[thecrypticace]

Hey, appreciate the report. We weren't traversing the await expressions in Svelte which is why these weren't sorted. I've merged the fix for this in #118. Will tag a release with this fix by EOD. Thanks! ✨