[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 tailwindlabs/tailwindcss#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:

<template>
  <div class="flex justify-center">
    <div class="mb-3 mt-5"></div>
  </div>
</template>

I use the following prettier config:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "singleQuote": true,
  "semi": false,
  "printWidth": 160
}

and the following eslint config:

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-5witht-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 !