tailwindlabs/prettier-plugin-tailwindcss

Whitespace removal breaks on ternary conditions

mary-ext opened this issue · 2 comments

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

v0.6.1

What version of Tailwind CSS are you using?

v3.4.4

What version of Node.js are you using?

Node.js v22.0.0 / Bun v1.1.12

What package manager are you using?

Bun 1.1.12

What operating system are you using?

Linux (Arch Linux 6.9.3-1-cachyos-bore-lto)

Reproduction URL

https://github.com/mary-ext/repro-prettier-tailwindcss-whitespace/blob/trunk/index.tsx

Describe your issue

The whitespace removal introduced in recent releases doesn't take ternary conditions into account.

jsx = <div class={'h-full w-full overflow-hidden' + (!isMobile ? ' bg-black/90' : '')}></div>;

// This gets transformed into
jsx = <div class={'h-full w-full overflow-hidden' + (!isMobile ? 'bg-black/90' : '')}></div>;
jsx = <div class={'object-cover' + (standalone ? ' aspect-square w-full' : ' min-h-0 grow basis-0')}></div>

// This gets transformed to
jsx = <div class={'object-cover' + (standalone ? 'aspect-square w-full' : 'min-h-0 grow basis-0')}></div>

// It should at least be
jsx = <div class={'object-cover ' + (standalone ? 'aspect-square w-full' : 'min-h-0 grow basis-0')}></div>

I've merged a fix for this in #288 — I'm doing some final testing on the insiders build before I tag a patch release but it'll be out later today!

Released as v0.6.3!