Different result based on folder structure

[Torsten85]

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

v0.2.0

What version of Tailwind CSS are you using?

v3.2.4

What version of Node.js are you using?

v17.9.1

What package manager are you using?

pnpm

What operating system are you using?

macOS, Linux

Reproduction URL

https://github.com/Torsten85/eslint-prettier-tailwind-bug

Describe your issue

Hello,
I'm not completely sure if this is an prettier-plugin-tailwindcss / prettier / eslint issue, but I have to start somewhere 😉

In the linked repo, there are two tasks.

pnpm test-1 will lint the directory src1 and will print an eslint / prettier error bc of a wrong tailwind class order.

pnpm test-2 will lint the directory src2 but will not print any errors.

The problem is: Both directories have exactly the same files, the only difference is, that one file in src1 is in a subfolder.

Because of that issue, I don't get any errors in my vscode instance but the CI pipeline keeps crashing. Fixing the errors for the pipeline results in errors in vscode.

[thecrypticace]

Hey, really appreciate you bringing this one to our attention. This sorting behavior is a side-effect of some non-deterministic-ish sorting behavior in Tailwind CSS itself. This is because we register arbitrary variants the moment we first encounter them. This gives them a sort order based on the order they appear in the content and based on the order we process the content files. Because the OS is ultimately in charge of passing us files to check against content globs the order happens to be OS dependent. Hence the difference you are seeing.

In your case there's a difference in two ways:

1. The order the variants first appear in each set of files is different
2. The order the files are read is different between your development machine and CI.

This can result in different sorting in Prettier and different order in the built output. I've merged a fix for the release of Tailwind that will address this issue. We now explicitly sort them in a manner that shouldn't be different across environments.

This change is in the latest insiders build of Tailwind CSS: npm install tailwindcss@insiders

Here's a screenshot of before / after behavior:

Let me know if you have any further questions. And thanks again — definitely needed to get this one fixed. ✨

[Torsten85]

Thanks! Great work!