prettier path/to/file output differs from prettier .

[FelixZY]

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

0.3.0

What version of Tailwind CSS are you using?

3.2.7

What version of Node.js are you using?

v18.15.0

What package manager are you using?

npm

What operating system are you using?

mcr.microsoft.com/devcontainers/base:bullseye

Reproduction URL

Cannot be provided at this time

Describe your issue

• When I run prettier -w ., I get class names sorted like card-compact group card
• When I run prettier -w path/to/file, I get class names sorted like group card-compact card

This causes lint-staged to format our files differently from what is expected by our CI flow where we run prettier -c .

[thecrypticace]

Hey! This is because prior to v3.3 the sort order of classes was dependent on your source files. And also dependent on the order they were scanned. We fixed this in v3.3 by sorting all classes alphabetically before considering plugin order (and the order of any values in those plugins) to remove any non-determinism.

For more information on this issue see my response in #106 (comment)

I would suggest that you upgrade to v3.3 which will resolve this issue.

Hope that helps! ✨

[FelixZY]

@thecrypticace tested with

    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2"

and the issue unfortunately remains. Request that this report be re-opened.

[thecrypticace]

Can you provide a reproduction? Regardless of whether or not it's minimal? I'm afraid that without one there may not be enough information to go on.

[FelixZY]

I'll see what I can do to force it to rear its ugly head 🤔 . I made an attempt when creating this report but did not have any luck then.

[FelixZY]

I was able to set up a minimal reproduction by process of elimination here: https://github.com/FelixZY/tailwindlabs-prettier-plugin-tailwindcss-issues-174

From the commit message:

Run `npm test` to see issue in action.

Note that the setup is quite volatite. Upgrading DaisyUI or removing any
of the `.tsx` files makes the issue go away in this particular setup.

The issue seems to require some quite specific setup to occur. For example, I'm required to use DaisyUI 2.51.0 and the four tsx files from the repo for the issue to occur. Changing just one of those (upgrading daisy or removing one of the .tsx files) causes the issue to no longer reproduce in the minimal reproduction repo.

[thecrypticace]

Thanks! That's helpful. Took a bit to get it down to a proper minimal repro (basically no external plugins).

Minimal Repro:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.foo': { display: 'block' },
        '.bar': { display: 'block' },
        '.foo-1': { display: 'block' },
        '.foo-2': { display: 'block' },

        // Remove this and the problem goes away:
        '.bar .foo': { display: 'block' },
      })
    },
  ],
};

<!-- index.html -->

<span class="foo-1 foo"></span>
<span class="foo-2 foo"></span>
<span class="bar"></span>

<!-- Because of the presence of `bar` in the class list above anything using .foo is now sorted differently -->
<span class="foo foo-2"></span>

I'm looking into this and will let you know more when I do.

[thecrypticace]

Hey! I've merged the fix into Tailwind CSS itself. It'll be available in our next tagged release of Tailwind CSS. You should be able to use the insiders build in the meantime to test it out:

npm install tailwindcss@insiders

You're going to see some sorting differences in your project but there shouldn't be any instability / inconsistency in the sorting.

Please let me know if you notice anything weird. Thanks! ✨

[FelixZY]

That's great - thank you for the quick responses and fix!

[solomonhawk]

It's a relief to finally find this issue and the fix in insiders after losing some time and sanity to this same problem.

We're also using daisyui + prettier-plugin-tailwindcss and I was seeing different formatting when invoking the Prettier CLI vs VS Code Prettier Extension formatOnSave and also seeing conflicting feedback from ESLint + eslint-plugin-tailwindcss + eslint-config-prettier (I think only related to daisyui classes).

Thanks for reporting this @FelixZY and for working on this @thecrypticace.