tailwindlabs/prettier-plugin-tailwindcss

Sorting of extended values does not work properly

dmitrystas opened this issue · 6 comments

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

Latest

What version of Tailwind CSS are you using?

Latest

What version of Node.js are you using?

Latest

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu

Describe your issue

Sorting of some (I've found spacing and fontSize, but maybe there are some others) extended values is broken. For example, here is the result of standard 14 spacing sorting:

class="fixed flex p-14"

Looks good. But if we try to sort some non-standard value, like

export default {
  extend: {
    spacing: {
      15: '3.75rem'
    }
  }
}

we get

class="p-15 fixed flex"

i.e. p-15 is at the beginning.

At first I thought this was true for all non-standard values. But this is not the case, for example, sorting of z-index

export default {
  extend: {
    zIndex: {
      1: '1'
    }
  }
}

works correctly and after sorting z-1 is not at the beginning

class="fixed z-1 flex"

Weird one! Here's a minimal reproduction for when we get a chance to look into this:

https://play.tailwindcss.com/1CAwzxiiNJ

Hmm, it looks like the incorrect behavior is only true for VSCode... In the console
prettier --write ...
works pretty good...

Weird one! Here's a minimal reproduction for when we get a chance to look into this:

https://play.tailwindcss.com/1CAwzxiiNJ

If you hit tidy or cmd-s it sorts correctly.

I saw you're using pnpm — chances are it might be the VSCode prettier extension that's the cause because it can't find your config.

Can you share a reproduction repo?

Jordan, I'm really sorry that you wasted your time on me :( I've updated all my project/VSCode dependencies to the latest versions, and now both VSCode sorting as well as CLI sorting work perfect. I apologize again and thank you!

@dmitrystas No worries at all! And hey, we ended up finding (and fixing) a bug in Play because of it. Though the fix isn't live yet — got a few other things we're working on.