react-jss FlowType definitions

react-jss_v5.3.x.js

declare module 'react-jss' {
  declare type StatelessComponent<P> = (props: P) => ?React$Element<any>;


  declare type Classes<CSS> = {
    [classname: $Keys<CSS>]: string,
  };

  declare type AddedProps<CSS> = {
    classes: Classes<CSS>,
    sheet: {
      attached: boolean,
      classes: Classes<CSS>,
      deployed: boolean,
      linked: boolean,
      options: Object,
      renderer: mixed,
      rules: mixed,
    },
  };


  declare type Injector<P, Def, S, CSS> = {
    (component: StatelessComponent<P>): Class<React$Component<void, $Diff<P, AddedProps<CSS>>, void>>;
    <Def, St>(component: Class<React$Component<Def, P, St>>): Class<React$Component<void, $Diff<P, AddedProps<CSS>>, void>>;
  };



  declare function injectSheet<OP, Def, S, CSS>(
    CSS: CSS
  ): Injector<OP, Def, S, CSS>;

  declare module.exports: typeof injectSheet;
}

TestComponents.jsx

/* @flow */
import React from 'react';
import injectSheet from 'react-jss';

const styles = {
  testClass: {
    backgroundColor: 'red',
  },
};

type Props = {
  value: number,
  classes: {
    testClass: string,
  },
};

const TestComponentFunc = (props: Props) => (
  <div className={props.classes.testClass}>
    {props.value}
  </div>
);

class TestComponentClass extends React.Component<void, Props, void> {
  props: Props;

  render() {
    const {
      value,
      classes,
    } = this.props;

    return (
      <div className={classes.testClass}>
        {value}
      </div>
    );
  }
}

const StyledFunc = injectSheet(styles)(TestComponentFunc);
const StyledCls = injectSheet(styles)(TestComponentClass);

<StyledFunc />; // Error
<StyledCls />; // Error

<StyledFunc value={2} />; // Ok
<StyledCls value="string" />; // Error

does StyledFunc value="string" /> throw an error?
Stateless component doesn't seem to work for me.