Skip to content

Svete/Kit: classnames not sorted correctly in expression blocks #117

@ditoglez

Description

@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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions