tailwindlabs/prettier-plugin-tailwindcss

Sorting of transparent colors

KnisterPeter opened this issue · 4 comments

KnisterPeter commented

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

v0.5.5

What version of Tailwind CSS are you using?

v3.3.3

What version of Node.js are you using?

v18.16.0

What package manager are you using?

pnpm

What operating system are you using?

Windows with WSL2

Reproduction URL

Describe your issue

The sorting of colors is not consistent.
Transparent utility classes are sorted after colors.

For example these two lists:

  • bg-black text-white
  • bg-transparent text-white

The second line will be re-ordered to text-white bg-transparent while the first line is kept.

RobinMalfait commented

Hey!

Can you share a minimal reproduction repo because I think that you might have other versions of each plugin you are mentioning. Trying this manually it sorts it correctly for me.

I also made a Tailwind Play: https://play.tailwindcss.com/tbviVA95V2

If you press the tidy button then you will see that it gets formatted correctly.

For more context, in an older version of Tailwind CSS sorting was based on plugin order (e.g.: background colors are sorted before text colors). However, utilities within the same plugin were sorted based on which utility was found first in your content paths.

In newer versions of Tailwind CSS, we ensured that within the same plugin, each utility is also sorted deterministically.

  • 👍1
KnisterPeter commented

Hi @RobinMalfait I will do so. If I fail I assume that I have an issue on our setup and will close this issue.
Thanks for your awesome fast feedback. ❤️

thecrypticace commented

Hey there's a chance if you have a plugin or a layer that is adding a rule that includes text-white or bg-transparent alongside another class that it could be the cause. We've just merged a PR to fix that.

The insiders build of Tailwind CSS should be available in about 15–20m.

Once it is I'll post here and if you could give it a try and see if your issue is fixed? Otherwise looking at your setup would be a good idea as it's not reproducible in isolation.

Insiders builds can be installed via npm like so:

npm install tailwindcss@insiders
thecrypticace commented

Okay the insiders build is now available:

npm install tailwindcss@insiders

The version installed should be 0.0.0-insiders.ad66635.

  • ❤️1