[v0.1.9] Unwanted removal of leading whitespace for concatenated class

[bennettdams]

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

v0.1.9

What version of Tailwind CSS are you using?

v3.0.24

What version of Node.js are you using?

v16.13.0

What package manager are you using?

npm

What operating system are you using?

Windows

Reproduction URL

https://github.com/bennettdams/tailwind-prettier-whitespace-bug

Describe your issue

Version v0.1.9 introduced a change for frameworks like React that will introduce "bugs".

Here is a basic example. When a class consists of multiple concatenated strings, the plugin now removes the leading whitespace:

function Test() {
-      return <div className={"text-white" + " bg-red-100"} />;
+      return <div className={"text-white" + "bg-red-100"} />;
}

I use this format of concatenated strings for visibility when there are a lot of classes, e.g.:

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'
}

[dargmuesli]

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 😅

[bradlc]

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 👍

[thevuong]

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',
)}

[karlhorky]

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

[stefanosandes]

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