Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing types on theme when using a theme

See original GitHub issue

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 = {}>(
      | 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;

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

kerimhudsoncommented, Jan 23, 2021

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!

cristianbotecommented, Jan 25, 2021

Awesome @kerimhudson, thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Fix WordPress Theme Stylesheet Is Missing Error
Troubleshoot 'fix wordpress theme stylesheet is missing', 'the package could not be installed the theme is missing the style css stylesheet'
Read more >
Missing related lists when using custom theme - ServiceNow
Solved: It seems when following the directions to create a custom theme, that ServiceNow loses the ability to display related lists. I created...
Read more >
Missing TS typings for @theme-ui/presets #491 - GitHub
I'm starting a TypeScript project using create-react-app, and trying to use a preset tailwind theme. I have installed @types/theme-ui, ...
Read more >
Are custom post types lost when the theme is changed?
There might be another issue for showing the custom post type on the new theme. But it is guaranteed that no data should...
Read more >
Styled-components w/ Typescript: missing type for theme ...
The theme variable got the any type just on the top-level. If I'm using theme at a css'' block it got the correct...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found