Move flow types to .flow typedef files (#1509)

* move PluginsRegistry type

* move Jss.js to .flow

* move SheetsManager types to .flow

* remove private fields which are not used from outside of the module

* move SheetsRegistry flow types

* move StyleSheet flow types

* move RuleList flow types

* remove types from DomRenderer

* move utils flow types

* DynamicStyle argument should be data, not theme

Data could contain theme but it doesn't have to

* upgrade flow-bin

* move viewportRule flow types

* move flow types from styleRule

* move flow types for simpleRule

* move flow types from keyframesRule

* move flow types for keyframesRule, keyframeRule, fontFaceRule, conditionalRule

* move flow types for plugins/index

* finish moving flow to type defs in jss core

* move flow to type defs for all plugins

* add .flow files to linter

* move flow to type defs for css-jss package

* remove flow from jss-plugin-template

* new convention, instead of calling a directory or file "types" - "flow-types"

* move flow type defs in react-jss utils

* move flow type defs for react-jss

* move the remaning flow types

* remove remaining types

* remove babel flow

* remove more remaining types

* remove babel flow preset from deps

* remove remaining $FlowFixMe

* trigger ci

.flowconfig

@@ -5,5 +5,4 @@
 [libs]
 
 [options]
-include_warnings=true
-esproposal.export_star_as=enable
+include_warnings=true

babelOptions.js

@@ -1,5 +1,5 @@
 exports.getBabelOptions = ({useESModules}) => ({
-  presets: [['@babel/env', {loose: true}], '@babel/flow', '@babel/react'],
+  presets: [['@babel/env', {loose: true}], '@babel/react'],
   plugins: [
     ['@babel/proposal-class-properties', {loose: true}],
     ['@babel/transform-runtime', {useESModules}],

package.json

@@ -10,7 +10,7 @@
     "check:flow": "flow check --max-warnings=0",
     "check:ts": "tsc",
     "check:snapshots": "lerna run check-snapshot",
-    "check:lint": "eslint scripts/ packages/ docs/ --ext js,md",
+    "check:lint": "eslint scripts/ packages/ docs/ --ext js,flow,md",
     "format": "prettier \"*.{js,md,json,ts}\" \"{docs,packages,scripts}/**/*.{js,md,json,ts}\" --write",
     "format:ci": "yarn format --list-different",
     "test": "karma start --single-run",
@@ -29,11 +29,11 @@
     "release:alpha:major": "yarn release premajor --dist-tag next --exact --force-publish='*'"
   },
   "lint-staged": {
-    "**/*.{js,md,json,ts}": [
+    "**/*.{js,md,json,ts,flow}": [
       "prettier --write",
       "git add"
     ],
-    "**/*.{js,md}": [
+    "**/*.{js,flow,md}": [
       "eslint"
     ]
   },
@@ -48,7 +48,6 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
-    "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@lerna/prompt": "^3.6.0",
     "@rollup/plugin-babel": "^5.2.1",
@@ -72,7 +71,7 @@
     "eslint-config-jss": "^5.0.1",
     "eslint-config-prettier": "^2.9.0",
     "expect.js": "^0.3.1",
-    "flow-bin": "^0.138.0",
+    "flow-bin": "^0.150.1",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-benchmark": "^0.6.0",

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

@@ -1,21 +1,21 @@
 {
   "css-jss.js": {
-    "bundled": 61186,
-    "minified": 21939,
-    "gzipped": 7380
+    "bundled": 59688,
+    "minified": 21828,
+    "gzipped": 7357
   },
   "css-jss.min.js": {
-    "bundled": 60111,
-    "minified": 21316,
-    "gzipped": 7100
+    "bundled": 58613,
+    "minified": 21205,
+    "gzipped": 7078
   },
   "css-jss.cjs.js": {
-    "bundled": 3034,
+    "bundled": 2949,
     "minified": 1189,
     "gzipped": 667
   },
   "css-jss.esm.js": {
-    "bundled": 2750,
+    "bundled": 2665,
     "minified": 967,
     "gzipped": 576,
     "treeshaked": {

packages/css-jss/src/createCss.js

@@ -1,17 +1,13 @@
-// @flow
 import {create as createJss} from 'jss'
 import preset from 'jss-preset-default'
-import type {Jss} from 'jss'
-// eslint-disable-next-line no-unused-vars
-import type {Css, StyleArg} from './types'
 
 // I have been trying to benchmark and I have seen a slow down after about 10k rules.
 // Since we are in a single sheet mode, user shouldn't care about this.
 const MAX_RULES_PER_SHEET = 10000
 
 const defaultJss = createJss(preset())
 
-const createCss = (jss: Jss = defaultJss): Css => {
+const createCss = (jss = defaultJss) => {
   const cache = new Map()
   let ruleIndex = 0
   let sheet
@@ -23,7 +19,7 @@ const createCss = (jss: Jss = defaultJss): Css => {
     return sheet
   }
 
-  function css(/* :: ..._: StyleArg[] */): string {
+  function css() {
     // eslint-disable-next-line prefer-rest-params
     const args = arguments
 

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

@@ -0,0 +1,6 @@
+// @flow
+import type {Jss} from 'jss'
+// eslint-disable-next-line no-unused-vars
+import type {Css, StyleArg} from './types.js.flow'
+
+declare export default (Jss) => Css

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

@@ -1,22 +1,15 @@
-// @flow
 import expect from 'expect.js'
 import {stripIndent} from 'common-tags'
-import {create as createJss, type StyleSheet} from 'jss'
+import {create as createJss} 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): CssTestType)
+    css = createCss(jss)
   })
 
   it('should accept a single style object argument', () => {

packages/css-jss/src/index.js

@@ -1,8 +1,5 @@
-// @flow
 import createCss from './createCss'
-import type {Css, Style} from './types'
 
-export type {Css, Style}
 export {createCss as create}
-const css: Css = createCss()
+const css = createCss()
 export default css

packages/css-jss/src/index.js.flow

@@ -0,0 +1,8 @@
+// @flow
+import type {Css, Style} from './types.js.flow'
+
+export type {Css, Style}
+
+export {default as create} from './createCss'
+
+declare export default Css

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

@@ -1,4 +1,3 @@
-// @flow
 import expect from 'expect.js'
 import css, {create} from './index'
 

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

@@ -1,7 +1,4 @@
-// @flow
-import type {Plugin} from 'jss'
-
-export default function cachePlugin(): Plugin {
+export default function cachePlugin() {
   const cache = new WeakMap()
 
   function onCreateRule(name, decl, {parent}) {

packages/jss-plugin-cache/src/index.js.flow

@@ -0,0 +1,4 @@
+// @flow
+import type {Plugin} from 'jss'
+
+declare export default () => Plugin

packages/jss-plugin-camel-case/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "jss-plugin-camel-case.js": {
-    "bundled": 2440,
+    "bundled": 2357,
     "minified": 902,
     "gzipped": 504
   },
   "jss-plugin-camel-case.min.js": {
-    "bundled": 2440,
+    "bundled": 2357,
     "minified": 902,
     "gzipped": 504
   },
   "jss-plugin-camel-case.cjs.js": {
-    "bundled": 1805,
+    "bundled": 1732,
     "minified": 818,
     "gzipped": 420
   },
   "jss-plugin-camel-case.esm.js": {
-    "bundled": 1491,
+    "bundled": 1418,
     "minified": 565,
     "gzipped": 309,
     "treeshaked": {

packages/jss-plugin-camel-case/src/index.js

@@ -1,12 +1,7 @@
-// @flow
-import type {Plugin} from 'jss'
 import hyphenate from 'hyphenate-style-name'
 
 /**
  * Convert camel cased property names to dash separated.
- *
- * @param {Object} style
- * @return {Object}
  */
 function convertCase(style) {
   const converted = {}
@@ -27,10 +22,8 @@ function convertCase(style) {
 
 /**
  * Allow camel cased property names by converting them back to dasherized.
- *
- * @param {Rule} rule
  */
-export default function camelCase(): Plugin {
+export default function camelCase() {
   function onProcessStyle(style) {
     if (Array.isArray(style)) {
       // Handle rules like @font-face, which can have multiple styles in an array

packages/jss-plugin-camel-case/src/index.js.flow

@@ -0,0 +1,4 @@
+// @flow
+import type {Plugin} from 'jss'
+
+declare export default () => Plugin

packages/jss-plugin-compose/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "jss-plugin-compose.js": {
-    "bundled": 2612,
+    "bundled": 2517,
     "minified": 988,
     "gzipped": 561
   },
   "jss-plugin-compose.min.js": {
-    "bundled": 2151,
+    "bundled": 2056,
     "minified": 743,
     "gzipped": 439
   },
   "jss-plugin-compose.cjs.js": {
-    "bundled": 2223,
+    "bundled": 2136,
     "minified": 1013,
     "gzipped": 528
   },
   "jss-plugin-compose.esm.js": {
-    "bundled": 1913,
+    "bundled": 1826,
     "minified": 764,
     "gzipped": 426,
     "treeshaked": {

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

@@ -1,13 +1,11 @@
-// @flow
 import warning from 'tiny-warning'
-import type {Plugin, StyleSheet} from 'jss'
 
 /**
  * Set selector.
  *
- * @param {Object} original rule
- * @param {String} className class string
- * @return {Boolean} flag, indicating function was successfull or not
+ * @param original rule
+ * @param className class string
+ * @return flag indicating function was successfull or not
  */
 function registerClass(rule, className) {
   // Skip falsy values
@@ -28,7 +26,7 @@ function registerClass(rule, className) {
     return registerClass(rule, className.split(' '))
   }
 
-  const {parent} = ((rule.options: any): {parent: StyleSheet})
+  const {parent} = rule.options
 
   // It is a ref to a local rule.
   if (className[0] === '$') {
@@ -56,11 +54,8 @@ function registerClass(rule, className) {
 
 /**
  * Convert compose property to additional class, remove property from original styles.
- *
- * @param {Rule} rule
- * @api public
  */
-export default function jssCompose(): Plugin {
+export default function jssCompose() {
   function onProcessStyle(style, rule) {
     if (!('composes' in style)) return style
     registerClass(rule, style.composes)

packages/jss-plugin-compose/src/index.js.flow

@@ -0,0 +1,4 @@
+// @flow
+import type {Plugin} from 'jss'
+
+declare export default () => Plugin

packages/jss-plugin-default-unit/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "jss-plugin-default-unit.js": {
-    "bundled": 6971,
+    "bundled": 6944,
     "minified": 3634,
     "gzipped": 1244
   },
   "jss-plugin-default-unit.min.js": {
-    "bundled": 6971,
+    "bundled": 6944,
     "minified": 3634,
     "gzipped": 1244
   },
   "jss-plugin-default-unit.cjs.js": {
-    "bundled": 6150,
+    "bundled": 6127,
     "minified": 3718,
     "gzipped": 1194
   },
   "jss-plugin-default-unit.esm.js": {
-    "bundled": 6070,
+    "bundled": 6047,
     "minified": 3652,
     "gzipped": 1137,
     "treeshaked": {

packages/jss-plugin-default-unit/src/defaultUnits.js

@@ -1,15 +1,11 @@
-// @flow
-
 import {hasCSSTOMSupport} from 'jss'
 
-export const px: string | Function = hasCSSTOMSupport && CSS ? CSS.px : 'px'
-export const ms: string | Function = hasCSSTOMSupport && CSS ? CSS.ms : 'ms'
-export const percent: string | Function = hasCSSTOMSupport && CSS ? CSS.percent : '%'
+export const px = hasCSSTOMSupport && CSS ? CSS.px : 'px'
+export const ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms'
+export const percent = hasCSSTOMSupport && CSS ? CSS.percent : '%'
 
 /**
  * Generated jss-plugin-default-unit CSS property units
- *
- * @type object
  */
 export default {
   // Animation properties

packages/jss-plugin-default-unit/src/defaultUnits.js.flow

@@ -0,0 +1,8 @@
+// @flow
+import defaultUnits from './defaultUnits'
+
+export type px = string | Function
+export type ms = string | Function
+export type percent = string | Function
+
+declare export default typeof defaultUnits

packages/jss-plugin-default-unit/src/index.js

@@ -1,9 +1,5 @@
-// @flow
-import type {Plugin} from 'jss'
 import defaultUnits, {px} from './defaultUnits'
 
-export type Options = {[key: string]: string | ((val: number) => string)}
-
 /**
  * Clones the object and adds a camel cased property version.
  */
@@ -23,7 +19,7 @@ const units = addCamelCasedVersion(defaultUnits)
 /**
  * Recursive deep style passing function
  */
-function iterate(prop: string, value: any, options: Options) {
+function iterate(prop, value, options) {
   if (value == null) return value
 
   if (Array.isArray(value)) {
@@ -58,7 +54,7 @@ function iterate(prop: string, value: any, options: Options) {
 /**
  * Add unit to numeric values.
  */
-export default function defaultUnit(options: Options = {}): Plugin {
+export default function defaultUnit(options = {}) {
   const camelCasedOptions = addCamelCasedVersion(options)
 
   function onProcessStyle(style, rule) {

packages/jss-plugin-default-unit/src/index.js.flow

@@ -0,0 +1,6 @@
+// @flow
+import type {Plugin} from 'jss'
+
+export type Options = {[key: string]: string | ((val: number) => string)}
+
+declare export default (options?: Options) => Plugin