stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.73k stars 252 forks source link

Export type of the `...composers` param from the `css` method of `@stitches/core` #924

Closed fabien-ml closed 2 years ago

fabien-ml commented 2 years ago

Is your feature request related to a problem? Please describe. Hi, i'm trying to create a simplistic styled method that create SolidJS components, under the hood it use the css method from @stitches/core. But in order to get a proper typescript support, meaning autocompletion of variants in the object passed to my styled method i need the type of the ...composers param from the cssmethod.

Describe the solution you'd like Export the type of the ...composers param from the cssmethod. Maybe something like this :

export type CSSComposer<
  Composers extends (string | Util.Function | { [name: string]: unknown })[],
  CSS = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
> = {
  [K in keyof Composers]: Composers[K] extends string | Util.Function // Strings and Functions can be skipped over
    ? Composers[K]
    : RemoveIndex<CSS> & {
        /** The **variants** property lets you set a subclass of styles based on a key-value pair.
         *
         * [Read Documentation](https://stitches.dev/docs/variants)
         */
        variants?: {
          [Name in string]: {
            [Pair in number | string]: CSS;
          };
        };
        /** The **compoundVariants** property lets you to set a subclass of styles based on a combination of active variants.
         *
         * [Read Documentation](https://stitches.dev/docs/variants#compound-variants)
         */
        compoundVariants?: (("variants" extends keyof Composers[K]
          ? {
              [Name in keyof Composers[K]["variants"]]?:
                | Util.Widen<keyof Composers[K]["variants"][Name]>
                | Util.String;
            }
          : Util.WideObject) & {
          css: CSS;
        })[];
        /** The **defaultVariants** property allows you to predefine the active key-value pairs of variants.
         *
         * [Read Documentation](https://stitches.dev/docs/variants#default-variants)
         */
        defaultVariants?: "variants" extends keyof Composers[K]
          ? {
              [Name in keyof Composers[K]["variants"]]?:
                | Util.Widen<keyof Composers[K]["variants"][Name]>
                | Util.String;
            }
          : Util.WideObject;
      } & CSS & {
          [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants"
            ? unknown
            : K2 extends keyof CSS
            ? CSS[K2]
            : unknown;
        };
};

Describe alternatives you've considered Actually i've copy pasted the type declaration of the ...composers param from the stitches source code into my code which is not great and will probably break if the stitches api changes in the futur.

ivanbanov commented 2 years ago

I also ended up copying/pasting it :/ would be handy such type for people creating wrapper around the styled function