Removal of duplicate classes impacts AlpineJS x-mask directive

[bnzo]

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

v0.6.1

What version of Tailwind CSS are you using?

v3.4.3

What version of Node.js are you using?

v21.7.3

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

Using Alpine.js and its x-mask directive with a repetitive pattern:

<input
    type="text"
    x-mask="99 99 99 99 99"
/>

Will result into:

<input
    type="text"
    x-mask="99"
/>

I guess removal of duplicate classes should only impact class or className attributes

Workaround

Set the new tailwindPreserveDuplicates option to disable removal of duplicate classes to true (#276)

{
  "tailwindPreserveDuplicates": true
}

[thecrypticace]

What does your prettier config look like? This should only happen to attributes that are considered class attributes.

[thecrypticace]

I've confirmed that this doesn't happen in a barebones project with alpine, prettier, and our plugin.

Most likely you have something like this in your Prettier config:

"tailwindAttributes": [
  "x-mask"
]

You'll want to remove that and it'll start working. 👍

[bnzo]

@thecrypticace thanks, I should have check the entire config...

{
    "plugins": [
        "prettier-plugin-blade",
        "prettier-plugin-tailwindcss"
    ]
}

There is a conflict with this other plugin prettier-plugin-blade

https://github.com/stillat/blade-parser-typescript

[thecrypticace]

Ah yeah that sounds like a bug in prettier-plugin-blade then