[Prettier Plugin] v4 Different `prettier/prettier` eslint rule sorting behavior and results on Windows and Linux emitting warnings on the other OS

[sceee]

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/13510

^{Originally posted by **sceee** April 12, 2024} Versions used: * `"tailwindcss": "^4.0.0-alpha.13"` * `"prettier-plugin-tailwindcss": "^0.5.13"` * `"prettier": "^3.2.5"` * `"eslint": "^8.57.0"` I have a very simple vue 3 component: ```vue ``` I use the following prettier config: ```json { "plugins": ["prettier-plugin-tailwindcss"], "singleQuote": true, "semi": false, "printWidth": 160 } ``` and the following eslint config: ```js module.exports = { root: true, extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier'], parserOptions: { ecmaVersion: 'latest', }, plugins: ['no-only-tests'], } ``` When I lint the file on Windows (German), I receive no warning. But when I lint the same file on Linux (English), I receive the following warning: `warning Replace `b-3·mt-5` with `t-5·mb-3` prettier/prettier` Also, on Linux, VS Code emits the warning:  But as we can see, it just markes `b-3 mt-5` so it cuts of the `m` from the `mb-3`. If I let eslint fix the warning on Linux, it creates `mt-5 mb-3`. However, then the `mt-5 mb-3` is reported as warning on Windows. And on Windows, it would fix it again and create `mb-3 mt-5`. ### **Update:** I debugged into this and came to the following result: * Linting on Linux: In the `sortClassList(['mb-3', 'mt-5'], {...})` function, the `classNamesWithOrder` is set to this:  * Linting on Windows: In the `sortClassList(['mb-3', 'mt-5'], {...})` function, the `classNamesWithOrder` is set to this:  As we can see, the numbers assigned to the classes differ and therefore, the order flips later in the code: * Class `mb-3` gets assigned `1n` on Linux and `3n` on Windows. * Class `mt-5` gets assigned `0n` on Linux and `4n` on Windows _Notice, `mb3` gets the higher value on Linux whereas `mt-5` gets the higher value on Windows._ Unfortunately I did not manage to debug further down into this as I think the code relevant for this is `getClassOrder` https://github.com/tailwindlabs/tailwindcss/blob/0060508c6e769346d10870abacc94c42852f497e/packages/tailwindcss/src/sort.ts#L4 and I did not have a non-minified build of tailwindcss v4. I guess the issue lies somewhere in the AST generation of `compileCandidates` ( https://github.com/tailwindlabs/tailwindcss/blob/0060508c6e769346d10870abacc94c42852f497e/packages/tailwindcss/src/compile.ts#L8 ).

Reproduction URL https://github.com/sceee/tailwindcss-repro

Action run that demonstrates the issue on Windows and Linux: https://github.com/sceee/tailwindcss-repro/actions/runs/8663153843

On the Ubuntu job, eslint emits the lint warning (to swap the class order) whereas on Windows, no warning is emitted.

I opened this issue here in the tailwindcss repository as I think the issue lies in the compileCandidates code that is in this repository (instead of prettier-plugin-tailwindcss)

[thecrypticace]

This was happening because we detected the path for tailwindcss but didn't convert it to a file url first before loading. This breaks on Windows because absolute paths contain a colon that looks like a protocol. Then the extension was falling back to built-in, default Tailwind v3 settings.

I've merged a fix for this. I'm gonna do a double check test against our insiders build and then tag a release.

[thecrypticace]

I've released v0.5.14 which fixes this problem. 👍

npm install prettier-plugin-tailwindcss@latest

[sceee]

Interesting. Great, thanks @thecrypticace !