jss: [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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 35 (28 by maintainers)

Most upvoted comments

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);

vtereshyn on Jan 29, 2020

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

filosganga on Jan 20, 2020

@kof Do you think this is worth a completely new major version? This is only breaking change about types (Generics) (not actually running code) and I personally don’t think it should be hard to migrate for most users.

HenriBeck on Jan 12, 2020

I really don’t understand what the fuss is about. Just revert to old types which were good enough, release it as a 10.0.4 (because that would actually be a bug fix) and release new types as major version.

pajasevi on Jan 28, 2020

@HenriBeck semver is not objective, it’s mostly a tool to communicate the intent to the user. Objectively every change is a breaking change. So if it causes breaking behavior to users, it should be a major version bump.

kof on Jan 12, 2020

@HenriBeck You either follow semver and release a major version because it contains breaking changes (no matter it’s “only in types”) or you don’t. And according to semver, the new patch version, which 10.0.3 is, is specified as:

Patch version Z (x.y.Z | x > 0) MUST be incremented if only backwards compatible bug fixes are introduced. A bug fix is defined as an internal change that fixes incorrect behavior.

pajasevi on Jan 12, 2020