fix: enforce compatible plugins load order for proper interoperability

[astrochemx]

Hi, Tailwind Team!
Thank you for the awesome plugin!

Overview

This PR updates the load order of plugins compatible with prettier-plugin-tailwindcss for proper interoperability.

It also removes the obsolete comment about plugins commented out due to incompatibility with Prettier 3.0.

🧐 The Problem

Certain Prettier plugins, like prettier-plugin-multiline-arrays, may cause conflicts or unexpected behavior when loaded in the wrong order, leading to formatting issues or plugin failures.

In my case, prettier-plugin-jsdoc fails to apply its formatting when used with both prettier-plugin-multiline-arrays and prettier-plugin-tailwindcss, but works correctly when prettier-plugin-tailwindcss is excluded and the plugin order is properly set.

💡 The Solution

The loadCompatiblePlugins function has been updated to enforce a specific plugin load order for proper interoperability. The updated code includes a curated list of plugins with a defined sequence.

✔️ Testing

Due to time constraints, I performed only initial testing using the pnpm patch feature with the following Prettier configuration:

/** @type {import("prettier").Config} */
export default {
  multilineArraysWrapThreshold: 0,
  plugins: [
    "prettier-plugin-multiline-arrays",
    "prettier-plugin-jsdoc",
    "prettier-plugin-tailwindcss",
  ],
};

The changes resolved the formatting issue between these plugins in my local setup.

Warning

I’d greatly appreciate it if someone could conduct more comprehensive testing to confirm the plugin load order ensures compatibility across all supported plugins. Although, I plan to conduct additional testing myself when time permits.

🔖 Additional Info

1. Plugin load order recommendations for prettier-plugin-multiline-arrays compatibility
2. Issue discussing the load order of prettier-plugin-jsdoc and @ianvs/prettier-plugin-sort-imports plugins when used with prettier-plugin-multiline-arrays

Looking forward to your review and feedback.
Thanks! 🫶

[thecrypticace]

Hey, @astrochemx. Can you provide a repro of the issue you are seeing? That list is about loading the plugin modules rather than running them in a specific order so I'm curious to know what / how things break.

[astrochemx]

Hi, @thecrypticace!

Please, try this: https://github.com/astrochemx/prettier-plugin-tailwindcss-repro

There are 2 branches - main with the original plugin and patched with the patched by pnpm patch plugin.

I hope it helps!

Note

The scripts in package.json are self-explanatory

P.S.: I've also updated the config in the PR because I initially forgot to include multilineArraysWrapThreshold: 0

[thecrypticace]

Wow, okay. That is surprising. We actually have to load the plugins in a given order. I wonder if our use of Promise.all indicates a potential race condition or not. 🤔

I imagine, if one is possible, it's probably rather unlikely. I'll want to add a test for this because 100% this will break in the future during some refactor if I don't 😄

[thecrypticace]

Thanks! I need to get a release out soon so that'll maybe happen sometime this week 👍

[astrochemx]

Awesome! 🎉

I'll be waiting for the new release!

Thank you, Jordan! 🤝