tailwindlabs/prettier-plugin-tailwindcss

Removal of duplicate classes also removes inline conditions

Jeggle-s opened this issue · 4 comments

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

v0.6.0

What version of Tailwind CSS are you using?

v3.3.5

What version of Node.js are you using?

v18.19.0

What package manager are you using?

npm

What operating system are you using?

macOS and Linux

Describe your issue

Since the recent update to version 0.6.0 the formatter in our project is no longer working correctly.
For example we have this class attribute with inline if conditions:

 <button class="{f:if(condition: '{i.isFirst}', then: 'items-baseline', else: '')} {f:if(condition: '{i.isLast}', then: 'items-end', else: '')} {f:if(condition: '!{i.isLast} && !{i.isFirst}', then: 'items-center', else: '')} group group relative flex cursor-default flex-col whitespace-nowrap"> 
Button text
</button>

After running prettier, the class looks like this:

<button class="{f:if(condition: '{i.isFirst}', then: 'items-baseline', else: '')} '{i.isLast}', 'items-end', '!{i.isLast} && !{i.isFirst}', 'items-center', group relative flex cursor-default flex-col whitespace-nowrap">
 Button text
</button>

As you can see, not only the duplicate 'group' class is removed but also all occurences of {f:if(condition:.

We have conditions like this all over the place in multiple projects. A "prettiere-ignore" comment at all occurences would therefore involve many adjustments.

The syntax is part of the Fluid-templating Language: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fluid/Index.html

For now we had to rollback to a previous version as this change breaks our code.

Is this a bug the plugin can handle or do we have to avoid using this feature in this case?

What language is that parsed as? Nvm lol

Okay, so Fluid takes HTML and adds stuff to it. I'll see if there's something we can do here. But ultimately that means setting the prettier language to HTML is incorrect because the expressions in the class attribute are not valid in HTML by themselves (or rather, they represent something else). I'm a little surprised that this plugin hasn't completely broken things for you in the past.

I'll look into it.

Thank you. If you need more information or support you can ask me at any time.

v0.6.1 has been released with a fix for this. Set the "tailwindPreserveDuplicates": true option in your config.

I'm going to investigate only removing duplicates of Tailwind classes in a future release which should make that option unnecessary for you.