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

Config interface is not exported #161

Closed
AndyClausen opened this issue May 17, 2023 · 2 comments · Fixed by #162
Closed

Config interface is not exported #161

AndyClausen opened this issue May 17, 2023 · 2 comments · Fixed by #162
Assignees

Comments

@AndyClausen
Copy link

AndyClausen commented May 17, 2023

What version of prettier-plugin-tailwindcss are you using?
v0.3.0

What version of Tailwind CSS are you using?
v3.3.2

What version of Node.js are you using?
v18.x

What package manager are you using?
npm

What operating system are you using?
Windows

Reproduction URL
https://replit.com/@AndyClausen/EagerAdvancedExternalcommand#prettier.config.js

Describe your issue

Currently, types are not being exported. This means you can't extend your prettier config with the added properties (such as tailwindAttributes) without getting type errors.
Here is the error you'll get:
image

The interface exists here but is not being exported to dist.

I'd like to be able to do something like this:

/** @type {import("prettier").Config & import("prettier-plugin-tailwindcss")} */
const config = {
  plugins: [require.resolve("prettier-plugin-tailwindcss")],
  tailwindAttributes: ['myClassList'],
};

module.exports = config;

A workaround for now is to recreate the interface or make it inline when needed like this:

/** @type {import("prettier").Config & {tailwindAttributes: string[]}} */
@thecrypticace
Copy link
Contributor

I've merged in #162 which adds exported types for the Prettier config. This will be available in our next tagged release. In the meantime you can test it now by installing our insiders build:

npm install prettier-plugin-tailwindcss@insiders

One note, at least in my setup, a require() call is necessary for the prettier config options to show up. Neither the string or require.resolve versions of the config will enable typescript to pick up the config. So my config looked like this:

Screenshot 2023-05-19 at 11 50 03

@AndyClausen
Copy link
Author

Absolute hero. You can also use resolve if you do this:

/** @type {import("prettier").Config & import("prettier-plugin-tailwindcss").PluginOptions} */
const config = {
  plugins: [require.resolve("prettier-plugin-tailwindcss")],
  tailwindAttributes: ["appearance"],
  tailwindFunctions: [],
};

module.exports = config;

But this way, you'll need to add tailwindAttributes and tailwindFunctions since they're not optional in the interface. Idk if they should be, but just a heads-up :)

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

Successfully merging a pull request may close this issue.

2 participants