fix createUseStyles types (#1352)

* fix `createUseStyles` types

* support falsy values for function rules and only a null for function values

* allow null and undefined on function values

* update changelog.md

Author: moshest

changelog.md

@@ -2,6 +2,10 @@
 
 Since you are interested in what happens next, in case, you work for a for-profit company that benefits from using the project, please consider supporting it on https://opencollective.com/jss.
 
+### Improvements
+
+- [jss, react-jss] TS fixes, allow autocomplete for CSS rules [1352](https://github.com/cssinjs/jss/pull/1352)
+
 ---
 
 ## 10.2.0 (2020-6-3)

packages/jss/src/index.d.ts

@@ -1,19 +1,24 @@
 import * as css from 'csstype'
 
 // TODO: Type data better, currently typed as any for allowing to override it
-type FnValue<R> = R | ((data: any) => R)
+type Func<R> = ((data: any) => R)
 
 type NormalCssProperties = css.Properties<string | number>
-type CssProperties = {[K in keyof NormalCssProperties]: FnValue<NormalCssProperties[K] | JssValue>}
+type NormalCssValues<K> = K extends keyof NormalCssProperties
+  ? NormalCssProperties[K] | JssValue
+  : JssValue
 
-// Jss Style definitions
-type JssStyleP = {
-  [key: string]: FnValue<JssValue | JssStyleP>
+export type JssStyle = {
+  [K in keyof NormalCssProperties | string]:
+    | NormalCssValues<K>
+    | JssStyle
+    | Func<NormalCssValues<K> | JssStyle | undefined>
 }
 
-export type JssStyle = CssProperties & JssStyleP
-
-export type Styles<Name extends string | number | symbol = string> = Record<Name, JssStyle | string>
+export type Styles<Name extends string | number | symbol = string> = Record<
+  Name,
+  JssStyle | string | Func<JssStyle | string | null | undefined>
+>
 export type Classes<Name extends string | number | symbol = string> = Record<Name, string>
 export type Keyframes<Name extends string = string> = Record<Name, string>
 

packages/jss/tests/types/Styles.ts

@@ -0,0 +1,57 @@
+import {Styles} from '../../src'
+
+interface Props {
+  flag?: boolean
+}
+
+const styles: Styles = {
+  basic: {
+    textAlign: 'center',
+    display: 'flex',
+    width: 500,
+    justifyContent: 'center'
+  },
+  property: {
+    textAlign: 'center',
+    display: 'flex',
+    width: '100%',
+    justifyContent: (props: Props) => (props.flag ? 'center' : undefined)
+  },
+  inner: {
+    textAlign: 'center',
+    display: 'flex',
+    width: '100%',
+
+    '&.foo': {
+      fontSize: 12
+    }
+  },
+  func: (props: Props) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '96px',
+    cursor: 'pointer',
+    position: 'relative',
+    pointerEvents: props.flag ? 'none' : null
+  }),
+  funcNull: (props: Props) => null,
+  funcWithTerm: (props: Props) => ({
+    width: props.flag ? 377 : 272,
+    height: props.flag ? 330 : 400,
+    boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.08)',
+    borderRadius: '8px',
+    position: 'relative',
+    color: '#222222',
+    background: '#fff',
+    animation: '$fadeIn 300ms ease-in-out 300ms both',
+    ...(props.flag && {
+      height: 288
+    })
+  }),
+  '@keyframes fadeIn': {
+    from: {opacity: 0},
+    to: {opacity: 1}
+  }
+}

packages/react-jss/src/index.d.ts

@@ -62,7 +62,7 @@ interface CreateUseStylesOptions<Theme = DefaultTheme> extends BaseOptions<Theme
 }
 
 declare function createUseStyles<Theme = DefaultTheme, C extends string = string>(
-  styles: Record<C, any> | ((theme: Theme) => Record<C, any>),
+  styles: Styles<C> | ((theme: Theme) => Styles<C>),
   options?: CreateUseStylesOptions<Theme>
 ): (data?: unknown) => Classes<C>