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

0.6.3 didn't expose PluginOptions interface #291

Closed
exneval opened this issue Jun 12, 2024 · 8 comments · Fixed by #292
Closed

0.6.3 didn't expose PluginOptions interface #291

exneval opened this issue Jun 12, 2024 · 8 comments · Fixed by #292

Comments

@exneval
Copy link

exneval commented Jun 12, 2024

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

v0.6.3

What version of Tailwind CSS are you using?

v3.4.4

What version of Node.js are you using?

v20.13.1

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu

Reproduction URL

Describe your issue

Found typing issue with 0.6.3

/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */

the line above not working anymore

0.6.2 index.d.ts

import { Parser, Printer, SupportOption } from 'prettier'

export interface PluginOptions {
  /**
   * Path to the Tailwind config file.
   */
  tailwindConfig?: string

  /**
   * Path to the Tailwind entry point (v4+)
   */
  tailwindEntryPoint?: string

  /**
   * List of custom function and tag names that contain classes.
   */
  tailwindFunctions?: string[]

  /**
   * List of custom attributes that contain classes.
   */
  tailwindAttributes?: string[]
}

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

export const options: Record<keyof PluginOptions, SupportOption>
export const parsers: Record<string, Parser>
export const printers: Record<string, Printer>

0.6.3 index.d.ts

import { SupportOption, Printer, Parser } from 'prettier';

declare const options: Record<string, SupportOption>;

declare const printers: Record<string, Printer>;
declare const parsers: Record<string, Parser>;
interface PluginOptions {
    /**
     * Path to the Tailwind config file.
     */
    tailwindConfig?: string;
    /**
     * Path to the Tailwind entry point (v4+)
     */
    tailwindEntryPoint?: string;
    /**
     * List of custom function and tag names that contain classes.
     */
    tailwindFunctions?: string[];
    /**
     * List of custom attributes that contain classes.
     */
    tailwindAttributes?: string[];
}
declare module 'prettier' {
    interface RequiredOptions extends PluginOptions {
    }
    interface ParserOptions extends PluginOptions {
    }
}

export { options, parsers, printers };
@thecrypticace
Copy link
Contributor

thecrypticace commented Jun 12, 2024

Is there a reason you're typing as PluginOptions from our plugin rather than Options from prettier?

e.g. /** @type {import('prettier').Options} */

@thecrypticace thecrypticace added the question Further information is requested label Jun 12, 2024
@exneval
Copy link
Author

exneval commented Jun 12, 2024

Is there a reason you're typing as PluginOptions from our plugin rather than Options from prettier?

e.g. /** @type {import('prettier').Options} */

It happened to be in a config from this project

can you give a recommendation for how to use it start from 0.6.3?

@biohackerellie
Copy link

biohackerellie commented Jun 12, 2024

@exneval

if you're using an isolated prettier module like in t3's monorepo example, you can get around this by adding a types.d.ts to the prettier package and set it yourself until it gets resolved, like this

//prettier/types.d.ts
declare module "prettier-plugin-tailwindcss" {


  export interface PluginOptions {
    /**
     * Path to the Tailwind config file.
     */
    tailwindConfig?: string;
    /**
     * Path to the Tailwind entry point (v4+)
     */
    tailwindEntryPoint?: string;
    /**
     * List of custom function and tag names that contain classes.
     */
    tailwindFunctions?: string[];
    /**
     * List of custom attributes that contain classes.
     */
    tailwindAttributes?: string[];
  }
}

@thecrypticace thecrypticace removed the question Further information is requested label Jun 12, 2024
@thecrypticace
Copy link
Contributor

@exneval @biohackerellie If you have control over the config you should just remove the import and the typedef. The definitions will still show up and click through will still work. It's the entire reason we have the declare module 'prettier' { … } code in the types:

Screenshot 2024-06-12 at 14 36 11 Screenshot 2024-06-12 at 14 36 23

I'm going to merge in a fix for this and push a patch release out because it's an unintentional breaking change — but as far as I know there should never be a reason for a project to need to import or use that type.

@thecrypticace
Copy link
Contributor

Fix released in v0.6.4

@thecrypticace
Copy link
Contributor

thecrypticace commented Jun 12, 2024

Aside: I just created a project with that template and it indeed doesn't work by default. Something must be going on with the typescript config there because it's supposed to work.

Adding a reference comment in the file fixes this tho:

/// <reference types="prettier-plugin-tailwindcss" />

@biohackerellie
Copy link

Tagging @juliusmarminge here since this should be updated in t3-turbo as well

@juliusmarminge
Copy link
Contributor

Tagging @juliusmarminge here since this should be updated in t3-turbo as well

File a PR :)

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.

4 participants