goober.d.ts 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { Properties as CSSProperties } from 'csstype';
  2. export = goober;
  3. export as namespace goober;
  4. declare namespace goober {
  5. interface DefaultTheme {}
  6. type Theme<T extends object> = keyof T extends never ? T : { theme: T };
  7. interface StyledFunction {
  8. // used when creating a styled component from a native HTML element
  9. <T extends keyof JSX.IntrinsicElements, P extends Object = {}>(
  10. tag: T,
  11. forwardRef?: ForwardRefFunction
  12. ): Tagged<
  13. JSX.LibraryManagedAttributes<T, JSX.IntrinsicElements[T]> & P & Theme<DefaultTheme>
  14. >;
  15. // used to extend other styled components. Inherits props from the extended component
  16. <PP extends Object = {}, P extends Object = {}>(
  17. tag: StyledVNode<PP>,
  18. forwardRef?: ForwardRefFunction
  19. ): Tagged<PP & P & Theme<DefaultTheme>>;
  20. // used when creating a component from a string (html native) but using a non HTML standard
  21. // component, such as when you want to style web components
  22. <P extends Object = {}>(tag: string): Tagged<P & Partial<JSX.ElementChildrenAttribute>>;
  23. // used to create a styled component from a JSX element (both functional and class-based)
  24. <T extends JSX.Element | JSX.ElementClass, P extends Object = {}>(
  25. tag: T,
  26. forwardRef?: ForwardRefFunction
  27. ): Tagged<P>;
  28. }
  29. type ForwardRefFunction = {
  30. (props: any, ref: any): any;
  31. };
  32. type ForwardPropsFunction = {
  33. (props: object): undefined;
  34. };
  35. const styled: StyledFunction;
  36. function setup<T>(
  37. val: T,
  38. prefixer?: (key: string, val: any) => string,
  39. theme?: Function,
  40. forwardProps?: ForwardPropsFunction
  41. ): void;
  42. function extractCss(): string;
  43. function glob(
  44. tag: CSSAttribute | TemplateStringsArray | string,
  45. ...props: Array<string | number>
  46. ): void;
  47. function css(
  48. tag: CSSAttribute | TemplateStringsArray | string,
  49. ...props: Array<string | number>
  50. ): string;
  51. function keyframes(
  52. tag: CSSAttribute | TemplateStringsArray | string,
  53. ...props: Array<string | number>
  54. ): string;
  55. type StyledVNode<T> = (props: T, ...args: any[]) => any;
  56. type Tagged<P extends Object = {}> = <PP extends Object = {}>(
  57. tag:
  58. | CSSAttribute
  59. | CSSAttribute[]
  60. | TemplateStringsArray
  61. | string
  62. | ((props: P & PP) => CSSAttribute | string),
  63. ...props: Array<
  64. | string
  65. | number
  66. | ((props: P & PP) => CSSAttribute | string | number | false | undefined)
  67. >
  68. ) => StyledVNode<Omit<P & PP, keyof Theme<DefaultTheme>>>;
  69. interface CSSAttribute extends CSSProperties {
  70. [key: string]: CSSAttribute | string | number | undefined;
  71. }
  72. }