(PostCSS plugin): Add `postcss` to `referencedDependencies` when using Tailwind CSS with PostCSS

[taro-28]

Suggest an idea for this project

Hello!

I have encountered an issue where postcss is marked as an unused Dependency when using it with Tailwind CSS.

Reproduction

https://stackblitz.com/edit/knip-postcss-with-tailwind

❯ npm run knip

> knip
> knip

Unused devDependencies (1)
postcss  package.json

Cause

I believe the cause is that postcss is not included in the peerDependencies of Tailwind CSS.
https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/package.json

When using PostCSS with Tailwind CSS, postcss is typically not used in scripts within package.json or in import statements in source files.
As a result, if it is not included in peerDependencies, Knip will end up listing postcss as an unused Dependency.

The simplest solution would be for Tailwind CSS to add postcss to its peerDependencies, but the following issue makes that seem unlikely.

• tailwindlabs/tailwindcss#2440

Therefore, I would like to suggest that Knip’s PostCSS plugin handle this situation.

Suggestion

How about using the resolve function of the Plugin interface in the PostCSS plugin to add postcss to referencedDependencies when all the following conditions are met?

• A PostCSS config file exists.
• tailwindcss is included as a plugin in the PostCSS config.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

If you have a better solution, please let me know!

[webpro]

Thanks @taro-28. It feels odd indeed to check for plugins.includes('tailwindcss') to then return postcss itself from the PostCSS plugin, but it is indeed a simple and effective solution (given they're not going to add the peerDep indeed).

If you're willing to submit a PR for this, that would be great!

[taro-28]

@webpro
Thank you for your quick reply! I'll try it!