v0.6.0 removes white space???
cope opened this issue · comments
What version of prettier-plugin-tailwindcss are you using?
"prettier-plugin-tailwindcss": v0.6.0
What version of Tailwind CSS are you using?
"@tailwindcss/forms": 0.5.7
"tailwindcss": 3.4.3
What version of Node.js are you using?
v22.0.0
What package manager are you using?
pnpm
What operating system are you using?
Windows
Reproduction URL
This is all you need:
<template><div :class="'border-l-4 ' + borderColor + ' p-3'"></template>
<script setup>const borderColor = 'border-gray-400';</script>
Which, when rendered gives correctly class="border-l-4 border-gray-400 p-3".
However, after formatting it becomes:
<template><div :class="'border-l-4' + borderColor + 'p-3'"></template>
<script setup>const borderColor = 'border-gray-400';</script>
Where the spaces have been removed in :class and now when rendered becomes wrong class="border-l-4border-gray-400p-3".
Describe your issue
See above, it removes spaces for some reason, breaking the content completely.
Hey! We just added this because it was one of the most requested features across all of our projects:
...but you're right it has this edge case where it can remove necessary whitespace if you're doing string concatenation, and unfortunately we haven't found a way to reliably detect it.
When we first added this feature back in 2022 we ultimately reverted it because of this, but so many people still wanted it that we decided to include it with the ability to disabled it in your Prettier config:
{
"tailwindPreserveWhitespace": true
}If you'd like to use this feature and not disable it, you can tweak your code so you don't need that whitespace — I'd write your example like this in Vue personally:
<template><div class="border-l-4 p-3" :class="borderColor"></template>
<script setup>const borderColor = 'border-gray-400';</script>All that to say this is currently by design but I'm going to leave this open for a bit so I remember to talk to team and see how difficult (or impossible) it is to detect when a string is preceded or followed by a + and not touch the whitespace in those scenarios.
I completely agree with clearing the white spaces in plain class - that is something I would definitely expect the tool to do, for sure.
But :class is a bit different as it may need more than just :class="someVariable"... like conditionals, etc.
My current problem is that I have the + case in 100+ places, otherwise I would just switch them all to template literals which are naturally not affected...
But, if "tailwindPreserveWhitespace": true works, I'm perfectly good with that.
Yeah, "tailwindPreserveWhitespace": true seems to work 😌
Heads up I released v0.6.1 which improves the behavior for string concatenation. Not guaranteed to catch everything but there's a chance it'll work better without needing to disable it entirely.