Modifier order does not change
dmitrystas opened this issue · 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
Plugin does not change the order of the modifiers in case we use 2 or more modifiers, for example hover:after:left-0 and after:hover:left-0. After formatting It should be hover:after:left-0 in both cases, but it is not.
Hey! So the order of variants in a utility is important. The fact that both hover:after:left-0 and after:hover:left-0 work is for legacy compatibility because pseudo elements in nearly all cases must be at the end of a CSS selector.
In some cases pseudo elements can have pseudo classes attached and the order is then observable an different — on both inputs hover the text and then just the button itself to see a difference in behavior:
https://play.tailwindcss.com/4BCtjYqsZV
We're also doing some thinking around this stuff in v4 which will mean that we'd want to explicitly avoid sorting these because ::after:hover could become valid in the future and we'd want to be able to write variant(s) that represent that.
Gonna close this but appreciate the suggestion!
Thank you for explanation Jordan! I didn't know about this legacy behavior, I raised this issue because I noticed that in both cases in CSS it will be :hover::after. It would be great if v4 will allow ::after:hover 👍