Incompatibility with other Prettier plugins

reinink commented 2 years ago

To make this plugin work we had to use private Prettier APIs that can only be used by a single plugin at once. This means this plugin is incompatible with other Prettier plugins that are using the same APIs.

This GitHub issue will serve as a place to keep track of which Prettier plugins are incompatible — and hopefully we'll eventually find some workarounds, or even a proper long term solution. 👍

Known incompatibilities

@trivago/prettier-plugin-sort-imports
prettier-plugin-organize-imports
prettier-plugin-svelte (see below)
prettier-plugin-twig-melody

prettier-plugin-svelte

We've bundled the prettier-plugin-svelte directly into prettier-plugin-tailwindcss, so if you'd like to use this plugin with Svelte, just uninstall prettier-plugin-svelte and everything should work as expected.

Workarounds

While I have not tested it yet, @Mattinton provided one possible workaround in this comment.

filipesmedeiros commented 1 year ago

@TrevorLeeman are you using pnpm? I think I noticed the same thing when I moved to pnpm from yarn (v1). I'll try and get back to this thread with a result.

EDIT: confirmed. Reverting to Yarn solved the issue :)

TrevorLeeman commented 1 year ago

@TrevorLeeman are you using pnpm? I think I noticed the same thing when I moved to pnpm from yarn (v1). I'll try and get back to this thread with a result.

EDIT: confirmed. Reverting to Yarn solved the issue :)

Wow spot on, that was my problem as well. Thank you!

drgarlic commented 1 year ago

Hiya, did anyone found a workaround when using pnpm ?

reinink commented 1 year ago

Hey folks! 👋

So just an update on the Prettier plugin compatibility situation. We've just released a new beta version of prettier-plugin-tailwindcss which improves (or at least we hope it does 😅) compatibility with specific other Prettier plugins, including:

prettier-plugin-svelte
prettier-plugin-astro
@trivago/prettier-plugin-sort-imports
prettier-plugin-organize-imports

We've taken a new approach with our Prettier plugin where we no longer bundle any third-party Prettier plugins (including the Svelte plugin — more on that below). And, through a safe list, we've explicitly added support for the above plugins which currently have known incompatibilities.

We've done this by automatically detecting if one of these plugins is installed and enabled in your project, and if it is, we do some magic behind the scenes in our plugin to make sure these plugins still work.

The one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you'll need to explicitly disable the pluginSearchDirs option, and define each of your Prettier plugins in the plugins array:

// .prettierrc
{
  // ..
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ],
  "pluginSearchDirs": false
}

For Svelte users, we no longer bundle the prettier-plugin-svelte plugin within our plugin, so you'll need install and enable it using the instructions above.

For Astro users, this new release supports prettier-plugin-astro, which you can install in the same way.

We've released this updated plugin as a beta version since we're not 100% sure on this approach quite yet, and would really appreciate your help testing it out. You can install it using the beta tag:

npm install prettier-plugin-tailwindcss@beta

Let me know how it goes! 💪

darylknight commented 1 year ago

Thanks for updating this. Sad it's still incompatible with Twig :(

drgarlic commented 1 year ago

Thank you @reinink 👏

For anyone struggling, this works with pnpm:

plugins: [
    require.resolve('@trivago/prettier-plugin-sort-imports'),
    require('prettier-plugin-tailwindcss'),
],

reinink commented 1 year ago

Sup everyone! 👋

Just another update on the Tailwind CSS Prettier plugin. We've now added support for a bunch of other Prettier plugins and have released a new beta version for your testing pleasure.

Here's a complete list of all the plugins we added support for in this release:

@prettier/plugin-php
@prettier/plugin-pug
prettier-plugin-css-order
prettier-plugin-import-sort
prettier-plugin-jsdoc
prettier-plugin-organize-attributes
prettier-plugin-style-order
prettier-plugin-twig-melody

Installing the beta

As previously mentioned, we need to do some shenanigans to get these plugins all working (I'm looking at you @prettier/plugin-php), so we'd really appreciate your help kicking the tires on this new version for us.

To install this latest beta, add it using npm:

npm install prettier-plugin-tailwindcss@beta

As mentioned in my previous comment, the one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you'll need to explicitly disable the pluginSearchDirs option, and define each of your Prettier plugins in the plugins array:

// .prettierrc
{
  // ..
  "plugins": [
    "@prettier/plugin-pug",
    "prettier-plugin-organize-attributes",
    "prettier-plugin-tailwindcss" // MUST come last
  ],
  "pluginSearchDirs": false
}

Other plugins

I think this covers all the Prettier plugins mentioned in this issue other than @shufo/prettier-plugin-blade, which unfortunately is more complicated since that plugin forks out to a different process and doesn't provide an AST — just a string. So we'd have to parse the whole Blade file ourselves to be able to sort classes within it, which is a much bigger undertaking.

sameerxanand commented 1 year ago

@reinink Can you add support for @shopify/prettier-plugin-liquid? This is for Shopify themes. https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/98

reinink commented 1 year ago

@sameeranand1 Done: #102 🤙

This has been released as 0.2.0-beta.3.

reinink commented 1 year ago

Hello everyone, another update, we've just released v0.2.0, which includes all these plugin compatibility fixes.

You can install it using npm:

npm install prettier-plugin-tailwindcss@latest

We've also updated the readme to list all the Prettier plugins that we've added explicit support for:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

With all this complete, I am going to close this issue as resolved. Thanks to everyone here for sharing information about incompatible plugins with us! 🙏

mreduar commented 1 year ago

So with this release already available is it still necessary to edit the .prettierrc file? I tried without editing but it doesn't work.

// .prettierrc
{
  // ..
  "plugins": [
    "@prettier/plugin-pug",
    "prettier-plugin-organize-attributes",
    "prettier-plugin-tailwindcss" // It does not work if I put it here
  ],
  "pluginSearchDirs": false
}

and if I put prettier-plugin-tailwindcss last it doesn't work either.

reinink commented 1 year ago

@mreduar Hey, yes, you still to disable the pluginSearchDirs and list all your plugins in the plugins array, putting Tailwind CSS last (as per the readme).

If it's not working there is probably something else wrong. Feel free to create a minimal reproduction and we can have a closer look 👍

blooddrunk commented 1 year ago

Looking forward for this to be compatible with @ianvs/prettier-plugin-sort-imports

bryanbarrios commented 1 year ago

Hey @blooddrunk, this workaround worked for me:

const tailwindPlugin = require('prettier-plugin-tailwindcss');
const sortImportsPlugin = require('@ianvs/prettier-plugin-sort-imports');

module.exports = {
  parsers: {
    typescript: {
      ...tailwindPlugin.parsers.typescript,
      preprocess: sortImportsPlugin.parsers.typescript.preprocess,
    },
  },
  options: {
    ...sortImportsPlugin.options,
  },
};

`.prettierrc`

{
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

thecrypticace commented 1 year ago

@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.

This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

aurelienbobenrieth commented 11 months ago

It is still not working for me: .prettierrc.cjs

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  singleQuote: false,

  plugins: [
    "prettier-plugin-packagejson",
    "prettier-plugin-jsdoc",
    "@trivago/prettier-plugin-sort-imports",
    // Must be loaded last
    "prettier-plugin-tailwindcss",
  ],

  // prettier-plugin-tailwindcss
  tailwindAttributes: ["classProp"],

  // @trivago/prettier-plugin-sort-imports
  // https://github.com/trivago/prettier-plugin-sort-imports#usage
  importOrder: ["^#styles(.*)$", "<THIRD_PARTY_MODULES>", "^#(.*)$", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderGroupNamespaceSpecifiers: true,
};

package.json

"devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "prettier": "3.1.0",
    "prettier-plugin-jsdoc": "^1.1.1",
    "prettier-plugin-packagejson": "^2.4.6",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "tailwindcss": "^3.3.5",
    "typescript": "5.2.2",
    "vite": "^5.0.0",
  },

Based on : https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

🤔

jeannen commented 11 months ago

Seems like it's not working when used with "prettier-plugin-organize-attributes"

aervxa commented 9 months ago

@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.

This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

The issue was a problem with my VSCode, all worked after restart

tailwindlabs / prettier-plugin-tailwindcss