Property '__docgenInfo' is missing in type ...

[jake-daniels]

trafficstars

Hi, I'm using your loader in my project and I'm using JSS for styling. Everything works fine until I try to add styling to my component. For example, I have a Button component. If I try to inject styles with injectSheet(styles)(Button), the compiler fails with this message:

[tsl] ERROR in C:\...\src\components\Button\index.tsx(57,28)
      TS2345: Argument of type '{ (theme: ITheme): { root: { margin: number; letterSpacing: number; lineHeight: number; outline: string; border: string; borderRadius: number; cursor: string; }; primary: { background: string; color: string; '&:hover': { ...; }; }; ... 5 more ...; fullWidth: { ...; }; }; __docgenInfo: { ...; }; }' is not assignable to parameter of type 'Record<"medium" | "large" | "small" | "disabled" | "primary" | "secondary" | "root" | "fullWidth" | "__docgenInfo", CSSProperties> | StyleCreator<"medium" | "large" | "small" | "disabled" | ... 4 more ... | "__docgenInfo", ITheme>'.
  Type '{ (theme: ITheme): { root: { margin: number; letterSpacing: number; lineHeight: number; outline: string; border: string; borderRadius: number; cursor: string; }; primary: { background: string; color: string; '&:hover': { ...; }; }; ... 5 more ...; fullWidth: { ...; }; }; __docgenInfo: { ...; }; }' is not assignable to type 'StyleCreator<"medium" | "large" | "small" | "disabled" | "primary" | "secondary" | "root" | "fullWidth" | "__docgenInfo", ITheme>'.
    Type '{ root: { margin: number; letterSpacing: number; lineHeight: number; outline: string; border: string; borderRadius: number; cursor: string; }; primary: { background: string; color: string; '&:hover': { ...; }; }; ... 5 more ...; fullWidth: { ...; }; }' is not assignable to type 'Record<"medium" | "large" | "small" | "disabled" | "primary" | "secondary" | "root" | "fullWidth" | "__docgenInfo", CSSProperties>'.
      Property '__docgenInfo' is missing in type '{ root: { margin: number; letterSpacing: number; lineHeight: number; outline: string; border: string; borderRadius: number; cursor: string; }; primary: { background: string; color: string; '&:hover': { ...; }; }; ... 5 more ...; fullWidth: { ...; }; }'.

My styles are generated as:

export const styles = (theme: ITheme) => ({
  root: {
    margin: 0,
    letterSpacing: 0.5,
  },
})

If I add __docgenInfo: {}, into the styles, everything works fine.

export const styles = (theme: ITheme) => ({
  __docgenInfo: {},
  root: {
    margin: 0,
    letterSpacing: 0.5,
  },
})

I guess the loader is somehow interfering with HOC from react-jss. I can live with this workaround but would be nice to solve it directly in the library. Can you look at it?

"react": "^16.6.0" "react-jss": "^8.6.1" "@storybook/react": "^4.0.2" "react-docgen-typescript-loader": "^3.0.0" "typescript": "^3.1.6" "webpack": "^4.25.1"

[strothj]

It's going to be a busy next month or two for me. I'd be happy to merge in a pull request if someone can solve this.