[react-jss] createUseStyles has strange types in TypeScript

We (that is @mattwagl, @yeldiRium and me) have recently migrated our module’s dependencies jss and react-jss to 10.0.0, and have tried to convert from the HOC approach withStyles function to the hook-based approach with createUseStyles.

Since we are using theming, we would like to use createUseStyles with a function parameter, basically like this:

const useStyles = createUseStyles(theme => ({
  // ...
}));

Problems start when we look at the types of the useStyles function.

Expected behavior:

What we expect is that useStyles should return something of type Styles, or at least something such as Record<string, string>.

Actual behavior:

What it actually returns is Record<never, string>. We don’t know where this never comes from, but obviously this is not what it should be 😉

Workaround

We are able to fix this by using

const useStyles = createUseStyles<string>(theme => ({
  // ...
}));

but this for sure can’t be the right way to go. Actually, it even makes us wonder that this works, since createUseStyles takes two type parameters when providing a function. Something with the typings seems to be broken here (or we missed something very essential with respect to this new hook-based approach).

System environment

• Node.js 12.10.0
• macOS 10.14.6 (Mojave)

[RPDeshaies]

I will leave this here in case people want a temporary typing solution while this is being worked on but this is what I was able to come up with this morning.

I had to override the return type of the default function with a as any but I guess the team at jss can maybe get some inspiration from the following code:

const styleFunction = theme => ({
  image: {
    display: "flex",
    width: "100%"
  }
});

// OR

const styleObject = {
  image: {
    display: "flex",
    width: "100%"
  }
};

function betterCreateUseStyles<TStyle>(
  style: TStyle
): TStyle extends (...args: any) => any
  ? (data?: any) => Record<Extract<keyof ReturnType<TStyle>, string>, string>
  : (data?: any) => Record<Extract<keyof TStyle, string>, string> {
  return createUseStyles(style) as any;
}

/**
 * `(data: any) => { image: string; }`
 */
betterCreateUseStyles(styleFunction);

/**
 * `(data: any) => { image: string; }`
 */
betterCreateUseStyles(styleObject);

EDIT

I just created myself a typings/react-jss.d.ts where I added

declare module "react-jss" {
  export function createUseStyles<TStyle>(
    style: TStyle
  ): TStyle extends (...args: any) => any
    ? (data?: any) => Record<Extract<keyof ReturnType<TStyle>, string>, string>
    : (data?: any) => Record<Extract<keyof TStyle, string>, string>;
}

export * from "react-jss";

[HenriBeck]

cc @HenriBeck we could revert it in the 10.0.4 release and republish as 11

I don’t think this change deservers a complete major release. We only introduced these types recently here in the main repo.

We could add a type alias and mark that one as deprecated. That would be the correct solution here, in my opinion.