Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatible with @ianvs/prettier-plugin-sort-imports when using prettier.config.js #158

Closed
chrissantamaria opened this issue May 11, 2023 · 2 comments · Fixed by #159
Closed
Assignees

Comments

@chrissantamaria
Copy link

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

v0.2.8

What version of Tailwind CSS are you using?

v3.3.2

What version of Node.js are you using?

v18.8.0

What package manager are you using?

Yarn v1.22.19

What operating system are you using?

macOS

Reproduction URL

https://github.com/chrissantamaria/prettier-plugin-tailwindcss-sort-order-bug

Describe your issue

I noticed that, despite being listed as a compatible plugin in the README, @ianvs/prettier-plugin-sort-imports is incompatible with prettier-plugin-tailwindcss. With the Tailwind plugin listed last in the plugins array (as instructed in the README), it still takes precedence over the sort plugin and effectively disables it.

Notably, this only occurs when using a JS-based prettier.config.js file (where plugins are require'd) rather than a JSON-based .prettierrc. I suspect this is due to the require changing how plugins are loaded, but I'm not familiar with the internals of either plugin to be sure.

Some alternatives I tried:

  • using @trivago/prettier-plugin-sort-imports instead - this has the same issue
  • using a different package manager - npm v8.18, Yarn v1.22 and pnpm v8.3 all have the same issue
  • using prettier-plugin-tailwindcss v0.2.3, as this was the first version to officially support @ianvs/prettier-plugin-sort-imports - no luck
  • creating a custom plugin combining aspects of both - this actually did work, but is far from elegant

If this is expected functionality, it may be a good idea to make a note of the differences between prettier.config.js and .prettierrc in the README (especially given that it shows examples using both).

(this is a duplicate of a discussion I opened a few weeks ago - didn't get any traction there, but if you'd rather move discussion back feel free to close this!)

@thecrypticace
Copy link
Contributor

Hey, thanks for reporting this one! I've merged a fix in #159 that should resolve this.

Could you install our insiders build and give it a test?

npm install prettier-plugin-tailwindcss@insiders

@chrissantamaria
Copy link
Author

tested on my reproduction repo, works great! thanks for the quick fix :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants