[Prettier Plugin] Handle two more plugins

[un33k]

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/13630

^{Originally posted by un33k May 3, 2024}

Description

We are encountering a compatibility issue where certain Prettier plugins must be able to precede the Tailwind CSS plugin without losing functionality or disabling Tailwind. This compatibility is crucial for maintaining our project's code formatting standards and utility functionality.

Affected Plugins

• @softonus/prettier-plugin-duplicate-remover
• @softonus/prettier-plugin-whitespace-remover

Desired Outcome

The desired outcome is for these plugins to function correctly when placed before the Tailwind CSS plugin in the Prettier configuration file. This would allow for better flexibility in managing code formatting and style consistency.

Current Behavior

• When these plugins are placed before the Tailwind plugin: They do not function as expected.
• When placed after the Tailwind plugin: They lead to the Tailwind plugin being disabled.

Steps to Reproduce

1. Set up a project with Prettier and Tailwind CSS.
2. Install and configure the aforementioned plugins in the .prettierrc file.
3. Arrange the plugins before the Tailwind CSS plugin and attempt to format the files.
4. Observe the lack of expected functionality from the plugins.

Suggested Solution

Investigate potential changes or enhancements in the plugin architecture or initialization sequence that would allow these plugins to operate effectively when configured before the Tailwind CSS plugin. This might involve modifications to how plugins are loaded or processed by Prettier when working with CSS frameworks like Tailwind.

Beneficial Side Effect:

Implementing this change will also have the added advantage of negating the need for the Tailwind plugin to include its own duplicate and whitespace remover functionalities. This would not only streamline the Tailwind plugin but also reduce redundancy and potential conflicts between these utilities.

We appreciate your consideration and any efforts to enhance the compatibility of these tools, which are crucial for our development workflows.

They should be added to this file: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/3c9ce4e488c09851be1d5be37940b39679e10c1c/src/plugins.js#L174

    '@ianvs/prettier-plugin-sort-imports',
    '@trivago/prettier-plugin-sort-imports',
    'prettier-plugin-organize-imports',
    'prettier-plugin-css-order',
    'prettier-plugin-import-sort',
    'prettier-plugin-jsdoc',
    'prettier-plugin-organize-attributes',
    'prettier-plugin-style-order',
    'prettier-plugin-sort-imports',
    '@softonus/prettier-plugin-whitespace-remover',   // <- this one
    '@softonus/prettier-plugin-duplicate-remover'   // and this one
  ]

[un33k]

How to patch

Note: I use pnpm here, but you can use npm or yarn.

1 - Install the following dev dependencies.

  "devDependencies": {
    "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
    "@softonus/prettier-plugin-whitespace-remover": "^1.0.1",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "0.5.14" // <-- pin down this by removing the ^
  }

2 - Run the patch command from within the root of your project.

pnpm patch prettier-plugin-tailwindcss -d tmp

3 - Open the right file to update

vim tmp/dist/index.mjs

4 - Find the list includes

prettier-plugin-sort-imports

5 - Manually add the whitespace-remover and duplicate-remover to the list

let e=[
    "@ianvs/prettier-plugin-sort-imports",
    "@trivago/prettier-plugin-sort-imports",
    "@softonus/prettier-plugin-whitespace-remover",  // <- this
    "@softonus/prettier-plugin-duplicate-remover",     // <- and this
    "prettier-plugin-organize-imports",
    "prettier-plugin-css-order",
    "prettier-plugin-import-sort",
    "prettier-plugin-jsdoc",
    "prettier-plugin-organize-attributes",
    "prettier-plugin-style-order",
    "prettier-plugin-sort-imports"
]

6 - Extract the patch file to a local directory called .patches

pnpm patch-commit tmp  --patches-dir .patches

7 - Install the new patch in package.json

pnpm install

8 - Verify the patch

Look at the package.json file and you should see something like this:

  "pnpm": {
    "patchedDependencies": {
      "[email protected]": ".patches/[email protected]"
    }

9 - Clean up

rm -rf tmp

10 - Update your prettier config

  plugins: [
    require.resolve('@softonus/prettier-plugin-whitespace-remover'),
    require.resolve('@softonus/prettier-plugin-duplicate-remover'),
    require.resolve('prettier-plugin-tailwindcss'),
  ],

11 - Commit the .patches directory, and the changes to package.json and prettier config to git

git add .patches
git commit -am "Add patch for tailwindcss whitespace and duplicate removal"
git push

You are done!

Before:

After:

[un33k]

Heads up - If you add the patch, make sure you format the entire repository once without making any other changes. Raise a PR, and let others know that they might need to resolve conflicts.

This applies to large projects. Since whitespace and duplicate Tailwind CSS will be removed, it could create conflicts.

Hence, it is important to have an atomic patch creation and format of the entire repo in a single PR.

[un33k]

The official fix has been merged in via https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/272. Version 0.6.0.