[v0.1.9] Unwanted removal of leading whitespace for concatenated class about prettier-plugin-tailwindcss HOT 5 CLOSED

@bradlc @adamwathan Any new plans for reintroducing this great feature? Maybe as a (default-off) option for the plugin as has been suggested by the community?

We've had a number of new duplicate whitespace commits creep into our codebase, hard to manually review these mistakes.

from prettier-plugin-tailwindcss.

I like the feature of eliminating repeated spaces as well as the same class names. The problem of long class names can be used clsx library. I hope the removed feature will reappear in the new version.

Before:

className={
  'inline-flex items-center' +
  ' rounded-md p-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50' +
  ' bg-dlila text-white transition duration-75 ease-in-out hover:bg-dorange' +
  ' disabled:cursor-not-allowed disabled:bg-gray-200'
}

After:

className={clsx(
  'inline-flex items-center',
  'rounded-md p-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50',
  'bg-dlila hover:bg-dorange text-white transition duration-75 ease-in-out',
  'disabled:cursor-not-allowed disabled:bg-gray-200',
)}

from prettier-plugin-tailwindcss.

This vscode plugin may be useful for anyone wanting to do so: https://github.com/heybourn/headwind

from prettier-plugin-tailwindcss.

For me it wants to replace this

function Test() {
-      :class="['button', ...(buttonClass ? [buttonClass] : [])].join(' ')"
+      :class="['button', ...(buttonClass ? [buttonClass] : [])].join('')"
}

... which is certainly not what I want 😅

from prettier-plugin-tailwindcss.

Thanks for reporting this @bennettdams! For now we have published a new release (v0.1.10) that removes the whitespace removal feature while we consider solutions to the issues you were seeing 👍

from prettier-plugin-tailwindcss.