switch back to style-system v3, until v4 changes the format back, bet…

…ter types

flow-typed/mocha.js

@@ -0,0 +1,2 @@
+declare function describe(string, Function): void
+declare function it(string, Function): void

packages/jss/tests/unit/createGenerateId.js

@@ -2,7 +2,7 @@
 
 import expect from 'expect.js'
 import {createGenerateId} from '../../src'
-import {resetSheets} from '../../../../tests/utils'
+import * as moduleId from '../../src/utils/moduleId'
 
 const sheetMock = {
   options: {
@@ -12,20 +12,22 @@ const sheetMock = {
 }
 
 describe('Unit: jss - createGenerateId', () => {
-  beforeEach(resetSheets())
+  beforeEach(() => {
+    moduleId.default = 0
+  })
 
   it('should return a function', () => {
     expect(createGenerateId()).to.be.a(Function)
   })
 
   it('should generate a non-production class name', () => {
     const generate = createGenerateId()
-    expect(generate({key: 'a'})).to.be('a-14-1')
+    expect(generate({key: 'a'})).to.be('a-0-1')
   })
 
   it('should add prefix a non-production class name', () => {
     const generate = createGenerateId()
-    expect(generate({key: 'a'}, sheetMock)).to.be('pa-14-0-1')
+    expect(generate({key: 'a'}, sheetMock)).to.be('pa-0-0-1')
   })
 
   it.skip('should increment jss lib version', () => {
@@ -36,14 +38,14 @@ describe('Unit: jss - createGenerateId', () => {
   it('should generate a production class name', () => {
     process.env.NODE_ENV = 'production'
     const generate = createGenerateId()
-    expect(generate()).to.be('c141')
+    expect(generate()).to.be('c01')
     process.env.NODE_ENV = 'development'
   })
 
   it('should add prefix a production class name', () => {
     process.env.NODE_ENV = 'production'
     const generate = createGenerateId()
-    expect(generate({key: 'a'}, sheetMock)).to.be('p1401')
+    expect(generate({key: 'a'}, sheetMock)).to.be('p001')
     process.env.NODE_ENV = 'development'
   })
 })

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 115277,
-    "minified": 41867,
-    "gzipped": 14200
+    "bundled": 115580,
+    "minified": 41857,
+    "gzipped": 14206
   },
   "dist/react-jss.min.js": {
-    "bundled": 90718,
-    "minified": 34602,
-    "gzipped": 12016
+    "bundled": 91021,
+    "minified": 34592,
+    "gzipped": 12019
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 16466,
-    "minified": 7624,
-    "gzipped": 2630
+    "bundled": 16765,
+    "minified": 7614,
+    "gzipped": 2635
   },
   "dist/react-jss.esm.js": {
-    "bundled": 15739,
-    "minified": 7005,
-    "gzipped": 2509,
+    "bundled": 16038,
+    "minified": 6995,
+    "gzipped": 2513,
     "treeshaked": {
       "rollup": {
         "code": 1977,

packages/react-jss/src/styled.js

@@ -1,8 +1,11 @@
-/* eslint-disable react/prop-types */
-// TODO add flow
+// @flow
+/* eslint-disable react/prop-types, react/require-default-props */
+
 import React from 'react'
 import isPropValid from '@emotion/is-prop-valid'
+import type {StatelessFunctionalComponent, ComponentType} from 'react'
 import withStyles from './withStyles'
+import type {Options, Style, Classes} from './types'
 
 // Props we don't want to forward.
 const reservedProps = {
@@ -11,24 +14,34 @@ const reservedProps = {
   theme: true
 }
 
-export default type => {
+type StyledProps = {
+  className?: string,
+  as?: string,
+  classes?: Classes
+}
+
+export default <Props: {}>(
+  type: string | StatelessFunctionalComponent<Props> | ComponentType<Props>
+) => {
   const isTag = typeof type === 'string'
 
-  return (style, options) => {
-    const Styled = props => {
-      const {classes, as} = props
-      const childProps = {}
+  return <Theme: {}>(style: Style<Theme>, options?: Options<Theme>) => {
+    const Styled = (props: StyledProps) => {
+      const {classes, as, className} = props
+      const childProps: Props = ({}: any)
       for (const prop in props) {
         if (prop in reservedProps) continue
         // We don't want to pass non-dom props to the DOM,
         // but we still wat to forward them to a uses component.
         if (isTag && !isPropValid(prop)) continue
         childProps[prop] = props[prop]
       }
-      childProps.className = props.className ? `${props.className} ${classes.css}` : classes.css
+      // $FlowFixMe flow seems to not know that `classes` will be provided by the HOC, not by element creator.
+      childProps.className = className ? `${className} ${classes.css}` : classes.css
       return React.createElement(as || type, childProps)
     }
 
+    // $FlowFixMe flow seems to not know that `classes` will be provided by the HOC, not by element creator.
     return withStyles({css: style}, {...options, injectTheme: true})(Styled)
   }
 }

packages/react-jss/src/styled.test.js

@@ -1,9 +1,9 @@
+// @flow
 /* eslint-disable react/prop-types */
 import expect from 'expect.js'
 import React from 'react'
 import TestRenderer from 'react-test-renderer'
 import {stripIndent} from 'common-tags'
-
 import {styled, SheetsRegistry, JssProvider, ThemeProvider} from '.'
 
 const createGenerateId = () => {
@@ -151,6 +151,7 @@ describe('React-JSS: styled', () => {
     const registry = new SheetsRegistry()
     const Span = styled('span')({color: 'red'})
     const Div = styled('div')({
+      // $FlowFixMe
       [Span]: {
         color: 'green'
       }

packages/react-jss/src/types.js

@@ -3,8 +3,6 @@ import type {StyleSheetFactoryOptions, Jss, SheetsRegistry, SheetsManager, BaseR
 import type {Node} from 'react'
 import type {Theming} from 'theming'
 
-type StaticStyles = {[key: string]: {}}
-
 export type Managers = {[key: number]: SheetsManager}
 
 export type Options<Theme> = {|
@@ -22,20 +20,31 @@ export type Context = {|
   disableStylesGeneration: boolean
 |}
 
-export type HOCProps<Theme, Props> = Props & {|
+export type HOCProps<Theme, Props> = Props & {
   theme?: Theme,
   jssContext: Context,
   innerRef: any
-|}
+}
+
+export type Classes = {[string]: string}
 
 export type InnerProps = {
   children?: Node,
-  classes: {}
+  classes: Classes
 }
 
 export type DynamicRules = {
   [key: string]: BaseRule
 }
 
-export type ThemedStyles<Theme> = (theme: Theme) => StaticStyles
+type StaticStyle = {}
+
+type PropsWithTheme<Theme> = {theme: Theme}
+
+export type Style<Theme> = StaticStyle | ((PropsWithTheme<Theme>) => StaticStyle)
+
+type StaticStyles = {[key: string]: StaticStyle}
+
+export type ThemedStyles<Theme> = (theme: Theme) => Style<Theme>
+
 export type Styles<Theme> = StaticStyles | ThemedStyles<Theme>

packages/react-jss/tests/styledSystem.js

@@ -1,7 +1,6 @@
+// @flow
 /* eslint-disable react/prop-types */
 
-// TODO add flow
-
 import expect from 'expect.js'
 import React from 'react'
 import TestRenderer from 'react-test-renderer'
@@ -34,7 +33,7 @@ const theme = {
   }
 }
 
-describe.only('React-JSS: styled-system', () => {
+describe('React-JSS: styled-system', () => {
   it('should reder basic spacing', () => {
     const registry = new SheetsRegistry()
     const Div = styled('div')(space)
@@ -132,7 +131,8 @@ describe.only('React-JSS: styled-system', () => {
 
     const MyComponent = ({classes}) => <div className={classes.css} />
 
-    const MyStyledComponent = withStyles(styles, {injectTheme: true})(MyComponent)
+    // TODO fix the types.
+    const MyStyledComponent: any = withStyles(styles, {injectTheme: true})(MyComponent)
 
     const renderer = TestRenderer.create(
       <JssProvider registry={registry} generateId={createGenerateId()}>