Conflicts with prettier-plugin-tailwindcss

[mattiaz9]

Your Environment

• Prettier version: 2.7.1
• node version: 18.8
• package manager: yarn@1.22.18
• IDE: VScode

Describe the bug

It seems like this plugin is conflicting with prettier-plugin-tailwindcss and by uninstalling prettier-plugin-sort-imports it starts to work again.

To Reproduce

• yarn add -D prettier-plugin-tailwindcss
• yarn add -D @ianvs/prettier-plugin-sort-imports

Expected behavior

I expect the tailwind plugin to sort all my classes.

Screenshots, code sample, etc

Before installing prettier-plugin-sort-imports:

After installing prettier-plugin-sort-imports:

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

{
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 100,
  "singleQuote": false,
  "semi": false,
  "useTabs": false,
  "proseWrap": "always",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "importOrder": [
    "",
    "^react",
    "<THIRD_PARTY_MODULES>",
    "",
    ".s?css$",
    "^@heroicons",
    "^@/assets",
    "",
    "^[./]",
    "^@/",
    "",
    "<THIRD_PARTY_TYPES>",
    "<TYPE>"
  ],
  "importOrderSeparation": false,
  "importOrderMergeDuplicateImports": true,
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@ianvs/prettier-plugin-sort-imports"
  ]
}

Error log

no errors

[IanVS]

Unfortunately this is a known issue since both plugins use some of the same APIs. You can read more, with some workarounds, in https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/9.

[mattiaz9]

@IanVS thanks for the info, but unfortunately that workaround isn't working for me

[IanVS]

How about this one? https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734

[mattiaz9]

@IanVS yes that worked, thank you! 🎉

[felixgren]

That fix didn't work for me due to TypeError: Cannot read properties of undefined (reading 'map').

This workaround solved it.

const baseConfig = require('../../prettier.config.cjs');

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

/** @type {import("prettier").Plugin}  */
const mixedPlugin = {
  parsers: {
    typescript: {
      ...pluginTailwindcss.parsers.typescript,
      preprocess: pluginSortImports.parsers.typescript.preprocess,
    },
  },
  options: {
    ...pluginSortImports.options,
  },
};

module.exports = {
  ...baseConfig,
  tailwindConfig: './tailwind.config.cjs',
  plugins: [mixedPlugin],
};