Doesn't work when coupled with prettier-plugin-tailwindcss

[NayamAmarshe]

This is a strange one. I'm trying to get both prettier-plugin-tailwindcss and prettier-plugin-sort-imports to work but when one works, the other doesn't.

So far I've tried adding a configuration, restarting and reinstalling but maybe I'm doing something wrong?

{
  "sortingMethod": "lineLength",
  "pluginSearchDirs": ["./node_modules"],
  "plugins": [
    "./node_modules/prettier-plugin-sort-imports",
    "./node_modules/prettier-plugin-tailwindcss"
  ]
}

When using this configuration, If I remove the tailwindcss plugin, sorting works but if I keep the sorting plugin with tailwindcss, import sorting doesn't work.

[SanderRonde]

Wow this is an interesting case. I did some investigating and it looks like this is a general issue with the way prettier plugins are written. Basically, when a new plugin is registered, it is registered as follows:

import tsPrettierParser from 'prettier/parser-typescript';

module.exports = {
    parsers: {
        typescript: {
            ...tsPrettierParser,
            preprocess: () => {
            // Custom preprocessor where stuff happens
            }   
        }
    }
}

As you can imagine, once this same code is ran twice in different plugins, module.exports.parsers. is just overwritten by the last one that gets to run. That is exactly what's happening in this scenario. First the prettier-plugin-sort-imports plugin is registered. It registers its handlers. Then the tailwind plugin is registered and it overwrites the same object, removing any functions the first plugin registered.

I tried out a different prettier plugin @trivago/prettier-plugin-sort-imports and it looks like that one also conflicts with tailwind. I'll be looking into whether anyone is already trying to fix this over at prettier and if not, create an issue for it. I'll keep you posted.

[NayamAmarshe]

I'll be looking into whether anyone is already trying to fix this over at prettier and if not, create an issue for it. I'll keep you posted.

Nice, thanks a lot!

[NayamAmarshe]

@SanderRonde Any luck with this?

[SanderRonde]

No response yet to my issue unfortunately.

[NayamAmarshe]

@SanderRonde tailwindlabs/prettier-plugin-tailwindcss#31

[NayamAmarshe]

Fix:
Create a file named prettier.config.js in project's root directory.
Enter the contents as below:

const pluginSortImports = require("prettier-plugin-sort-imports");
const pluginTailwindcss = require("prettier-plugin-tailwindcss");

/** @type {import("prettier").Parser}  */
const myParser = {
  ...pluginSortImports.parsers.typescript,
  parse: pluginTailwindcss.parsers.typescript.parse,
};

/** @type {import("prettier").Plugin}  */
const myPlugin = {
  parsers: {
    typescript: myParser,
  },
};

module.exports = {
  plugins: [myPlugin],
  // REST OF YOUR CUSTOM PRETTIER CONFIG GOES BELOW
  arrowParens: "always",
  bracketSpacing: true,
  endOfLine: "lf",
  htmlWhitespaceSensitivity: "css",
  jsxSingleQuote: false,
  printWidth: 80,
  proseWrap: "preserve",
  quoteProps: "as-needed",
  semi: true,
  tabWidth: 2,
  trailingComma: "es5",
};