Upgrade flow-bin to 0.131.0 and migrate types

.flowconfig

@@ -6,6 +6,4 @@
 
 [options]
 include_warnings=true
-esproposal.export_star_as=enable
-suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore
+esproposal.export_star_as=enable

package.json

@@ -69,7 +69,7 @@
     "eslint-config-jss": "^5.0.1",
     "eslint-config-prettier": "^2.9.0",
     "expect.js": "^0.3.1",
-    "flow-bin": "^0.98.0",
+    "flow-bin": "^0.131.0",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-benchmark": "^0.6.0",

packages/css-jss/src/createCss.js

@@ -54,20 +54,22 @@ const createCss = (jss: Jss = defaultJss): Css => {
     const labels = []
 
     for (let i = 0; i < flatArgs.length; i++) {
-      let style = flatArgs[i]
+      const style = flatArgs[i]
       if (!style) continue
+      let styleObject = style
       // It can be a class name that css() has previously generated.
       if (typeof style === 'string') {
         // eslint-disable-next-line no-shadow
         const cached = cache.get(style)
         if (cached) {
           // eslint-disable-next-line prefer-spread
           if (cached.labels.length) labels.push.apply(labels, cached.labels)
-          style = cached.style
+          styleObject = cached.style
         }
       }
-      if (style.label && labels.indexOf(style.label) === -1) labels.push(style.label)
-      Object.assign(mergedStyle, style)
+      if (styleObject.label && labels.indexOf(styleObject.label) === -1)
+        labels.push(styleObject.label)
+      Object.assign(mergedStyle, styleObject)
     }
     delete mergedStyle.label
     const label = labels.length === 0 ? 'css' : labels.join('-')

packages/css-jss/src/createCss.test.js

@@ -1,16 +1,22 @@
 // @flow
 import expect from 'expect.js'
 import {stripIndent} from 'common-tags'
-import {create as createJss} from 'jss'
+import {create as createJss, type StyleSheet} from 'jss'
 import {createGenerateId} from '../../../tests/utils'
 import {create as createCss} from './index'
+import {type StyleArg} from './types'
+
+type CssTestType = {|
+  (...args: StyleArg[]): string,
+  getSheet: () => StyleSheet
+|}
 
 describe('css-jss', () => {
   let css
 
   beforeEach(() => {
     const jss = createJss({createGenerateId})
-    css = createCss(jss)
+    css = (createCss(jss): CssTestType)
   })
 
   it('should accept a single style object argument', () => {

packages/jss-plugin-extend/src/index.js

@@ -107,6 +107,7 @@ export default function jssExtend(): Plugin {
     if (typeof value === 'object') {
       // $FlowFixMe: This will be an object
       for (const key in value) {
+        // $FlowFixMe: This will be an object
         rule.prop(key, value[key])
       }
 

packages/jss/src/Jss.js

@@ -79,7 +79,7 @@ export default class Jss {
   /**
    * Create a Style Sheet.
    */
-  createStyleSheet(styles: Object, options: StyleSheetFactoryOptions = {}): StyleSheet {
+  createStyleSheet(styles: Object, options: StyleSheetFactoryOptions = ({}: any)): StyleSheet {
     let {index} = options
     if (typeof index !== 'number') {
       index = sheets.index === 0 ? 0 : sheets.index + 1
@@ -110,12 +110,14 @@ export default class Jss {
    * Create a rule without a Style Sheet.
    * [Deprecated] will be removed in the next major version.
    */
-  createRule(name?: string, style?: JssStyle = {}, options?: RuleFactoryOptions = {}): Rule | null {
+  createRule(name: string, style?: JssStyle = {}, options?: RuleFactoryOptions = {}): Rule | null {
     // Enable rule without name for inline styles.
     if (typeof name === 'object') {
+      // $FlowIgnore
       return this.createRule(undefined, name, style)
     }
 
+    // $FlowIgnore
     const ruleOptions: RuleOptions = {...options, name, jss: this, Renderer: this.options.Renderer}
 
     if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId

packages/jss/src/RuleList.js

@@ -68,6 +68,8 @@ export default class RuleList {
       generateId,
       scoped,
       name,
+      keyframes: this.keyframes,
+      selector: undefined,
       ...ruleOptions
     }
 

packages/jss/src/SheetsRegistry.js

@@ -56,7 +56,7 @@ export default class SheetsRegistry {
   /**
    * Convert all attached sheets to a CSS string.
    */
-  toString({attached, ...options}: {attached?: boolean, ...ToCssOptions} = {}): string {
+  toString({attached, ...options}: {|attached?: boolean, ...ToCssOptions|} = {}): string {
     let css = ''
     for (let i = 0; i < this.registry.length; i++) {
       const sheet = this.registry[i]

packages/jss/src/types/jss.js

@@ -18,11 +18,11 @@ export type Classes = {[string]: string}
 
 export type KeyframesMap = {[string]: string}
 
-export type ToCssOptions = {
+export type ToCssOptions = {|
   indent?: number,
   allowEmpty?: boolean,
   children?: boolean
-}
+|}
 
 export type UpdateOptions = {
   process?: boolean,
@@ -111,7 +111,7 @@ export interface ContainerRule extends BaseRule {
 export type RuleOptions = {
   selector?: string,
   scoped?: boolean,
-  sheet?: StyleSheet,
+  sheet: StyleSheet,
   index?: number,
   parent?: ContainerRule | StyleSheet,
   classes: Classes,
@@ -167,15 +167,15 @@ export type InternalJssOptions = {|
   Renderer?: Class<Renderer> | null
 |}
 
-export type StyleSheetFactoryOptions = {
+export type StyleSheetFactoryOptions = {|
   media?: string,
   meta?: string,
   index?: number,
   link?: boolean,
   element?: HTMLStyleElement,
   generateId?: GenerateId,
   classNamePrefix?: string
-}
+|}
 
 export type StyleSheetOptions = {|
   media?: string,
@@ -190,7 +190,7 @@ export type StyleSheetOptions = {|
   jss: Jss
 |}
 
-export type InternalStyleSheetOptions = {|
+export type InternalStyleSheetOptions = {
   media?: string,
   meta?: string,
   link?: boolean,
@@ -205,4 +205,4 @@ export type InternalStyleSheetOptions = {|
   parent: ConditionalRule | KeyframesRule | StyleSheet,
   classes: Classes,
   keyframes: KeyframesMap
-|}
+}

packages/jss/src/utils/toCss.js

@@ -18,7 +18,7 @@ function indentStr(str: string, indent: number): string {
 export default function toCss(
   selector?: string,
   style: JssStyle,
-  options: ToCssOptions = {}
+  options: ToCssOptions = ({}: any)
 ): string {
   let result = ''
 

packages/react-jss/src/JssProvider.js

@@ -79,7 +79,7 @@ export default class JssProvider extends Component<Props> {
     }
 
     if (classNamePrefix) {
-      context.classNamePrefix += classNamePrefix
+      context.classNamePrefix = (context.classNamePrefix || '') + classNamePrefix
     }
 
     if (media !== undefined) {

packages/react-jss/src/createUseStyles.js

@@ -20,7 +20,10 @@ const useEffectOrLayoutEffect = isInBrowser ? React.useLayoutEffect : React.useE
 
 const noTheme = {}
 
-const createUseStyles = <Theme: {}>(styles: Styles<Theme>, options?: HookOptions<Theme> = {}) => {
+const createUseStyles = <Theme: {}>(
+  styles: Styles<Theme>,
+  options?: HookOptions<Theme> = ({}: any)
+) => {
   const {index = getSheetIndex(), theming, name, ...sheetOptions} = options
   const ThemeContext = (theming && theming.context) || DefaultThemeContext
   const useTheme =

packages/react-jss/src/jsx.js

@@ -4,8 +4,7 @@ import React from 'react'
 import defaultCss, {type Css} from 'css-jss'
 
 export const create = (css: Css = defaultCss) =>
-  // $FlowIgnore we don't care about the types here, since this is going to be called by the build tool.
-  function createElement(type, props) {
+  function createElement(type: string, props: Object | null /* :: , ..._args: any */) {
     const args = arguments
     if (props && props.css) {
       const className = css(props.css)

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

@@ -182,6 +182,7 @@ describe('React-JSS: styled props filter', () => {
     })
   })
 
+  // $FlowIgnore
   it.skip('no prop filtering on string tags started with upper case', () => {
     const Link = styled('SomeCustomLink')({color: 'green'})
 

packages/react-jss/src/styled.js

@@ -106,25 +106,27 @@ const getChildProps = (props, shouldForwardProp, isTag) => {
   return childProps
 }
 
-type StyledOptions<Theme> = HookOptions<Theme> & {
+type StyledOptions<Theme> = {|
+  ...HookOptions<Theme>,
   shouldForwardProp?: ShouldForwardProp
-}
+|}
 
 const configureStyled = <Theme: {}>(
   tagOrComponent: string | StatelessFunctionalComponent<StyledProps> | ComponentType<StyledProps>,
-  options?: StyledOptions<Theme> = {}
+  options?: StyledOptions<Theme> = ({}: any)
 ) => {
   const {theming} = options
   const isTag = typeof tagOrComponent === 'string'
   const ThemeContext = theming ? theming.context : DefaultThemeContext
   const shouldForwardProp = getShouldForwardProp(tagOrComponent, options)
+  const {shouldForwardProp: _, ...hookOptions} = options
 
   return function createStyledComponent(/* :: ...args: StyleArg<Theme>[] */): StatelessFunctionalComponent<
     StyledProps
   > {
     // eslint-disable-next-line prefer-rest-params
     const {styles, label} = parseStyles(arguments)
-    const useStyles = createUseStyles(styles, options)
+    const useStyles = createUseStyles(styles, hookOptions)
 
     const Styled = (props: StyledProps) => {
       const {as, className} = props

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

@@ -300,6 +300,7 @@ describe('React-JSS: styled', () => {
     })
   })
 
+  // $FlowIgnore
   it.skip('should target another styled component (not sure if we really need this)', () => {
     const Span = styled('span')({color: 'red'})
     const Div = styled('div')({
@@ -340,6 +341,7 @@ describe('React-JSS: styled', () => {
     `)
   })
 
+  // $FlowIgnore
   it.skip('should override theme over props', () => {})
 
   it('should render label', () => {

packages/react-jss/src/types.js

@@ -13,17 +13,19 @@ import type {Theming} from 'theming'
 
 export type Managers = {[key: number]: SheetsManager}
 
-export type HookOptions<Theme> = StyleSheetFactoryOptions & {
+export type HookOptions<Theme> = {|
+  ...StyleSheetFactoryOptions,
   index?: number,
   name?: string,
   theming?: Theming<Theme>
-}
+|}
 
-export type HOCOptions<Theme> = StyleSheetFactoryOptions & {
+export type HOCOptions<Theme> = {|
+  ...StyleSheetFactoryOptions,
   index?: number,
   theming?: Theming<Theme>,
   injectTheme?: boolean
-}
+|}
 
 export type Context = {|
   jss?: Jss,

packages/react-jss/src/utils/sheetsMeta.js

@@ -1,16 +1,16 @@
 // @flow
 import type {StyleSheet} from 'jss'
-import type {StaticStyles} from '../types'
+import type {StaticStyles, DynamicStyle} from '../types'
 
-type SheetMeta = {|
-  styles: StaticStyles,
-  dynamicStyles: StaticStyles
+type SheetMeta<Theme> = {|
+  styles: $ReadOnly<StaticStyles>,
+  dynamicStyles: $ReadOnly<{[key: string]: DynamicStyle<Theme>}>
 |}
 
-const sheetsMeta = new WeakMap<StyleSheet, SheetMeta>()
+const sheetsMeta = new WeakMap<StyleSheet, SheetMeta<any>>()
 
-export const getMeta = (sheet: StyleSheet): SheetMeta | void => sheetsMeta.get(sheet)
+export const getMeta = <Theme>(sheet: StyleSheet): SheetMeta<Theme> | void => sheetsMeta.get(sheet)
 
-export const addMeta = (sheet: StyleSheet, meta: SheetMeta) => {
+export const addMeta = <Theme>(sheet: StyleSheet, meta: SheetMeta<Theme>) => {
   sheetsMeta.set(sheet, meta)
 }

packages/react-jss/src/withStyles.js

@@ -34,7 +34,7 @@ const noTheme = {}
  *
  * `withStyles(styles, [options])(Component)`
  */
-const withStyles = <Theme>(styles: Styles<Theme>, options?: HOCOptions<Theme> = {}) => {
+const withStyles = <Theme>(styles: Styles<Theme>, options?: HOCOptions<Theme> = ({}: any)) => {
   const {index = getSheetIndex(), theming, injectTheme, ...sheetOptions} = options
   const isThemingEnabled = typeof styles === 'function'
   const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer

packages/react-jss/tests/styledSystem.js

@@ -180,7 +180,8 @@ describe('React-JSS: styled-system', () => {
     expect(className).to.be('css-0 css-d0-1')
     expect(classes).to.be(undefined)
   })
-
+  // $FlowIgnore
   it.skip('should handle the propTypes/meta for validation from function rules', () => {})
+  // $FlowIgnore
   it.skip('should do compose() automatically', () => {})
 })

yarn.lock

@@ -4267,10 +4267,10 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flow-bin@^0.98.0:
-  version "0.98.1"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.98.1.tgz#a8d781621c91703df69928acc83c9777e2fcbb49"
-  integrity sha512-y1YzQgbFUX4EG6h2EO8PhyJeS0VxNgER8XsTwU8IXw4KozfneSmGVgw8y3TwAOza7rVhTlHEoli1xNuNW1rhPw==
+flow-bin@^0.131.0:
+  version "0.131.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.131.0.tgz#d4228b6070afdf3b2a76acdee77a7f3f8e8f5133"
+  integrity sha512-fZmoIBcDrtLhy/NNMxwJysSYzMr1ksRcAOMi3AHSoYXfcuQqTvhGJx+wqjlIOqIwz8RRYm8J4V4JrSJbIKP+Xg==
 
 flush-write-stream@^1.0.0:
   version "1.0.3"