Need for a declaration file

[arshaan-abh]

I kept getting these ESlint errors:

Unsafe call of an `any` typed value.
Require statement not part of import statement.

So, I researched a bit and found out a solution here. But when I implemented the solution, I figured out that there is no declaration file for this plugin:

Therefore, a Typescript declaration file would do good.

[GauthierWebDev]

I was in the same situation, so I cobbled together a definition file to solve the problem. It's far from perfect, but it's already calmed Typescript down a bit!

declare module "tailwind-easing-gradients" {
  type Direction = "to top" | "to right" | "to bottom" | "to left";
  type ColorMode = "lrgb";
  type Type = "linear" | "radial";
  type Easing = "ease" | "ease-in-out";
  type GradientColors = [string, string];
  type Variants = "responsive";

  interface Settings {
    easing: string;
    color: GradientColors;
    steps?: number;
  }

  interface Directions {
    t?: Direction;
    r?: Direction;
    b?: Direction;
    l?: Direction;
  }

  interface Gradients {
    [key: string]: GradientColors | Settings;
  }

  interface Options {
    variants?: Variants[];
    directions?: Directions;
    gradients?: Gradients;
    alphaDecimals?: number;
    colorMode?: ColorMode;
    type?: Type;
    easing?: Easing;
    colorStops?: number;
  }

  interface PluginArgs {
    e: (className: string) => string;
    addUtilities: (
      utilities: CSSRuleObject | CSSRuleObject[],
      options?: Partial<{ respectPrefix: boolean; respectImportant: boolean }>
    ) => void;
  }

  export default function index(options?: Options): (args: PluginArgs) => void;
}

Feel free to improve it, it's just a temporary fix 🙂

[arshaan-abh]

I was in the same situation, so I cobbled together a definition file to solve the problem. It's far from perfect, but it's already calmed Typescript down a bit!

declare module "tailwind-easing-gradients" {
  type Direction = "to top" | "to right" | "to bottom" | "to left";
  type ColorMode = "lrgb";
  type Type = "linear" | "radial";
  type Easing = "ease" | "ease-in-out";
  type GradientColors = [string, string];
  type Variants = "responsive";

  interface Settings {
    easing: string;
    color: GradientColors;
    steps?: number;
  }

  interface Directions {
    t?: Direction;
    r?: Direction;
    b?: Direction;
    l?: Direction;
  }

  interface Gradients {
    [key: string]: GradientColors | Settings;
  }

  interface Options {
    variants?: Variants[];
    directions?: Directions;
    gradients?: Gradients;
    alphaDecimals?: number;
    colorMode?: ColorMode;
    type?: Type;
    easing?: Easing;
    colorStops?: number;
  }

  interface PluginArgs {
    e: (className: string) => string;
    addUtilities: (
      utilities: CSSRuleObject | CSSRuleObject[],
      options?: Partial<{ respectPrefix: boolean; respectImportant: boolean }>
    ) => void;
  }

  export default function index(options?: Options): (args: PluginArgs) => void;
}

Feel free to improve it, it's just a temporary fix 🙂

Thanks!