tailwindlabs / prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
MIT License
5.66k stars 135 forks source link

over-aggressive whitespace removal #328

Open happycollision opened 2 weeks ago

happycollision commented 2 weeks ago

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

v0.6.8

What version of Tailwind CSS are you using?

v3.4.3

What version of Node.js are you using?

v22.3.0

What package manager are you using?

pnpm (first noticed when using npm, though)

What operating system are you using?

macOS

Reproduction URL

tag: https://github.com/happycollision/repro-tw-plugin-problems/releases/tag/over-aggressive-whitespace-removal browse at tag: https://github.com/happycollision/repro-tw-plugin-problems/tree/0b76817425c40fc63874c8c82e6e7e67eb9b3dae

The readme explains the same thing as this issue

Describe your issue

Here's the diff on an example component when you run the plugin:

 export default function Example() {
   const a = "size-12"
   const b = "border border-black"

   return (
     <>
-      <div className={a + " p-4 " + b}></div>
+      <div className={a + " p-4" + b}></div>
       <div className={`${a} p-4 ${b}`}></div>
     </>
   )
 }

You can see that the plugin doesn't consider trailing whitespace with +-style concatenation to be important.