Missing types on theme when using a theme

I have a setup using Preact and Goober on Snowpack, and noticed that when using a theme within setup, type definitions are missing when using the styled function.

There’s probably a smarter way of adding this in, but wanted to raise it. I’m not sure the best approach to perhaps adding this in, but I managed to get it working doing the following:

import { Properties as CSSProperties } from "csstype";

interface Theme {
  typography: {
    fontSize: {
      small: string;
    };
  };
}

export = goober;

export as namespace goober;

declare namespace goober {
  interface StyledFunction {
    // used when creating a styled component from a native HTML element
    <
      T extends keyof JSX.IntrinsicElements,
      P extends Object = { theme: Theme }
    >(
      tag: T
    ): Tagged<JSX.LibraryManagedAttributes<T, JSX.IntrinsicElements[T]> & P>;

    // used to extend other styled components. Inherits props from the extended component
    <PP extends Object = {}, P extends Object = { theme: Theme }>(
      tag: StyledVNode<PP>
    ): Tagged<PP & P>;

    // used when creating a component from a string (html native) but using a non HTML standard
    // component, such as when you want to style web components
    <P extends Object = { theme: Theme }>(tag: string): Tagged<
      P & Partial<JSX.ElementChildrenAttribute>
    >;

    // used to create a styled component from a JSX element (both functional and class-based)
    <
      T extends JSX.Element | JSX.ElementClass,
      P extends Object = { theme: Theme }
    >(
      tag: T
    ): Tagged<P>;
  }

  const styled: StyledFunction;
  function setup<T>(
    val: T,
    prefixer?: (key: string, val: any) => string,
    theme?: Function
  ): void;
  function extractCss(): string;
  function glob(
    tag: CSSAttribute | TemplateStringsArray | string,
    ...props: Array<string | number>
  ): void;
  function css(
    tag: CSSAttribute | TemplateStringsArray | string,
    ...props: Array<string | number>
  ): string;
  type StyledVNode<T> = (props: T, ...args: any[]) => any;
  type Tagged<P extends Object = {}> = <PP extends Object = {}>(
    tag:
      | CSSAttribute
      | TemplateStringsArray
      | string
      | ((props: P & PP) => CSSAttribute | string),
    ...props: Array<
      | string
      | number
      | ((props: P & PP) => CSSAttribute | string | number | undefined)
    >
  ) => StyledVNode<Omit<P, "theme"> & PP>;
  interface CSSAttribute extends CSSProperties {
    [key: string]: CSSAttribute | string | number | undefined;
  }
}

[kerimhudson]

Ah okay perfect. I just misunderstood you then as I saw a mention of adding it to the README there so thought that perhaps meant you were in the process of doing so. I’ll close this for now then, and try and get that PR up later.

Thanks @devrnt and @cristianbote for the awesome work on goober. Been really enjoying it so far!

[cristianbote]

Awesome @kerimhudson, thank you!