Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind PluginOptions polluting Prettier types in global scope #339

Open
drake-nathan opened this issue Jan 9, 2025 · 0 comments
Open

Comments

@drake-nathan
Copy link

drake-nathan commented Jan 9, 2025

What version of prettier-plugin-tailwindcss are you using?

v0.6.9

What version of Tailwind CSS are you using?

N/A

What version of Node.js are you using?

v22.12.0

What package manager are you using?

pnpm, npm

What operating system are you using?

macOS

Reproduction URL

Sandbox
GitHub

Describe your issue

I am creating a style guide that includes a Prettier config. The Tailwind plugin gets enabled with a boolean or an object of Tailwind plugin options (see screenshot below). Because of that, I don't want the Tailwind config interface merged with the Prettier config. But that is what's happening because of this line in src/index.ts:

declare module 'prettier' {
  interface RequiredOptions extends PluginOptions {}
  interface ParserOptions extends PluginOptions {}
}

I get why this is here, likely to add type safety for Prettier configs in .js files. However, declare is not the way to handle this, IMO. This merged the interfaces globally for everyone using this package, and there's no easy way to override it.

Instead, the type safety can be handled safely with JSDoc in your prettier.config.js like this:

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */

To see this in action, clone my example repo above, or open the sandbox. You'll see the Tailwind plugin options in the autocomplete list inside of prettierConfig({}), even though I didn't include them in my interface.

If you go into node_modules/prettier-plugin-tailwindcss/dist/index.d.ts and delete the declare statement, it will behave as expected.

Screenshot 2025-01-08 at 6 49 25 PM

I'd be more than happy to contribute, or assist with documentation if I can. However, it seems like this would be a breaking change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant