Inconsistent sorting between formatting all files and a single file

[lesha1201]

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

v0.5.11

What version of Tailwind CSS are you using?

v3.4.1

What version of Node.js are you using?

v20.10.0

What package manager are you using?

npm, pnpm

What operating system are you using?

Windows (WSL)

Reproduction URL

https://github.com/lesha1201/tailwind-prettier-plugin-inconsistent-sorting-issue

Describe your issue

button-social-facebook.tsx.-.tailwind-inconsistent-sorting-issue.WSL_.Ubuntu.-.Visual.Studio.Code.2024-02-08.14-33-06.mp4

prettier-plugin-tailwindcss formats a certain file differently when you format all files and only that file. In the reproduction example, there are two components: ButtonSocialApple and ButtonSocialFacebook which have similar tailwind classes.

// src/app/button-social/button-social.apple.tsx
// ...
export function ButtonSocialApple({ children }: ButtonSocialAppleProps) {
  return (
    <div className="[--dr-social-button-color-bg-brand:#000] [--dr-social-button-color-bg-brand_hover:#000] [--dr-social-button-color-fg_on-brand:#fff]">
      {children}
    </div>
  );
}

// src/app/button-social/button-social.apple.tsx
// ...
export function ButtonSocialFacebook({ children }: ButtonSocialFacebookProps) {
  return (
    <div className="[--dr-social-button-color-bg-brand:#1877F2] [--dr-social-button-color-bg-brand_hover:#0C63D4] [--dr-social-button-color-fg_on-brand:#fff]">
      {children}
    </div>
  );
}

When you format all files by running:

npx prettier --write .

It produces one result for ButtonSocialFacebook:

export function ButtonSocialFacebook({ children }: ButtonSocialFacebookProps) {
  return (
    <div className="[--dr-social-button-color-fg_on-brand:#fff] [--dr-social-button-color-bg-brand:#1877F2] [--dr-social-button-color-bg-brand_hover:#0C63D4]">
      {children}
    </div>
  );
}

When you format only ButtonSocialFacebook:

npx prettier --write ./src/app/button-social/button-social-facebook.tsx

It produces a different result:

export function ButtonSocialFacebook({ children }: ButtonSocialFacebookProps) {
  return (
    <div className="[--dr-social-button-color-bg-brand:#1877F2] [--dr-social-button-color-bg-brand_hover:#0C63D4] [--dr-social-button-color-fg_on-brand:#fff]">
      {children}
    </div>
  );
}

However, when you remove ButtonSocialApple component, it formats ButtonSocialFacebook consistently.

[lesha1201]

If I remove env.context.getClassOrder from sortClassList then it works fine so I guess the issue is in env.context.getClassOrder.

export function sortClassList(classList, { env }) {
  let classNamesWithOrder = env.context.getClassOrder
    ? env.context.getClassOrder(classList)
    : getClassOrderPolyfill(classList, { env })

  return classNamesWithOrder
    .sort(([, a], [, z]) => {
      if (a === z) return 0
      // if (a === null) return options.unknownClassPosition === 'start' ? -1 : 1
      // if (z === null) return options.unknownClassPosition === 'start' ? 1 : -1
      if (a === null) return -1
      if (z === null) return 1
      return bigSign(a - z)
    })
    .map(([className]) => className)
}

[thecrypticace]

Hey — so this is a problem in Tailwind CSS itself coupled with the fact that we have to do some things in the Prettier plugin for performance reasons.

I've merged in a fix in tailwindlabs/tailwindcss#12911 and I'm going to work on back porting to v3.4 and get a patch release out this week.

Thanks for pointing this out!