[react-jss] Version 10.0.3 contains breaking change in Typescript definitions

Expected behavior: In version 10.0.0 and above, the TS definition clearly states that, if user wants to use theme in the function, Theme type must be supplied to the generic createUseStyles type as follows:

declare function createUseStyles<T, C extends string>(
  styles: (theme: T) => Record<C, Style | string>,
  options?: {
    index?: number
    name?: string
    theming?: Theming<T>
  } & StyleSheetFactoryOptions
): (data?: any) => Record<C, string>

Thus user could use types styles with provided theme as follows:

const useStyles = createUseStyles<Theme, "checkboxWrapper" | "input">((theme: Theme) => ({
	checkboxWrapper: {
		display: "inline-flex",
		alignItems: "center",
		fontSize: theme.utils.pxToRem(14),
	},
	input: {
		marginRight: theme.utils.pxToRem(6),
	}
}));

And the useStyles hook would return proper classNames.

Describe the bug: In react-jss@10.0.3 a new typescript definitions were introduced which are breaking against previous behavior. The Theme argument no longer needs to be supplied to the generic which means that every usage of createUseStyles is now broken.

declare function createUseStyles<C extends string = string>(
  styles: ((theme: any) => Styles<C>),
  options?: CreateUseStylesOptions
): (data?: unknown) => Classes<C>

Recommended fix Revert this behavior under 10.0.4 version and release a new major version with this breaking change, according to the semver.

Codesandbox link: Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

Versions (please complete the following information):

• react-jss: 10.0.3
• Browser [e.g. chrome, safari]: yes
• OS [e.g. Windows, macOS]: yes Feel free to add any additional versions which you may think are relevant to the bug.

[vtereshyn]

So, after upgrading to 10.0.4 I don’t see if issue with types has been fixed:

const styles = {
  verticalDoubleContainer: {
    width: '100%',
    position: 'relative',

    '& .recharts-cartesian-axis-ticks text tspan': {
      textTransform: 'uppercase',
      fill: '#6a7175',
      fontSize: '1rem',
      letterSpacing: '1px'
    }
  }
};

type Props = WithStylesProps<typeof styles> &  {}

And I receive:

 Argument of type '{ verticalDoubleContainer: { width: string; position: string; '& .recharts-cartesian-axis-ticks text tspan': { textTransform: string; fill: string; fontSize: string; letterSpacing: string; }; }; barLabel: { ...; }; barTitle: { ...; }; }' is not assignable to parameter of type 'Record<string | number | symbol, string | JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<void>>>>>>>> | ((theme: any) => Record<...>)'.
  Type '{ verticalDoubleContainer: { width: string; position: string; '& .recharts-cartesian-axis-ticks text tspan': { textTransform: string; fill: string; fontSize: string; letterSpacing: string; }; }; barLabel: { ...; }; barTitle: { ...; }; }' is not assignable to type 'Record<string | number | symbol, string | JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<void>>>>>>>>'.
    Property 'verticalDoubleContainer' is incompatible with index signature.
      Type '{ width: string; position: string; '& .recharts-cartesian-axis-ticks text tspan': { textTransform: string; fill: string; fontSize: string; letterSpacing: string; }; }' is not assignable to type 'string | JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<void>>>>>>>'.
        Type '{ width: string; position: string; '& .recharts-cartesian-axis-ticks text tspan': { textTransform: string; fill: string; fontSize: string; letterSpacing: string; }; }' is not assignable to type 'JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<JssStyleP<void>>>>>>>'.
          Type '{ width: string; position: string; '& .recharts-cartesian-axis-ticks text tspan': { textTransform: string; fill: string; fontSize: string; letterSpacing: string; }; }' is not assignable to type 'CssProperties'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'FnValue<"relative" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "absolute" | "static" | "sticky" | undefined>'.

136 export default withStyles(styles)(ResponsiveBar);

[filosganga]

Is there any workaround to make Typescript happy (apart from use the version 10.0.2)?