Add types for createUseStyles and improve Style type

packages/jss/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.3.1",
+    "csstype": "^2.6.5",
     "is-in-browser": "^1.1.3",
     "tiny-warning": "^1.0.2"
   }

packages/jss/src/index.d.ts

@@ -1,5 +1,10 @@
-export type Style = {[key: string]: Style | any}
-export type Styles<Name extends string = string> = Record<Name, Style>
+import * as css from 'csstype'
+
+// @ts-ignore
+export type Style = css.StandardProperties<string | number | (() => string | number)> & {
+  [key: string]: Style | string | number
+}
+export type Styles<Name extends string = string> = Record<Name, Style | string>
 export type Classes<Name extends string = string> = Record<Name, string>
 export type Keyframes<Name extends string = string> = Record<Name, string>
 
@@ -204,7 +209,7 @@ export interface StyleSheet<RuleName extends string = string> {
 export interface JssOptions {
   createGenerateId: CreateGenerateId
   plugins: ReadonlyArray<Plugin>
-  Renderer?: Renderer | null
+  Renderer?: {new (): Renderer} | null
   insertionPoint: InsertionPoint
 }
 

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

@@ -6,12 +6,15 @@ import {
   SheetsRegistry,
   Styles,
   StyleSheetFactoryOptions,
-  CreateGenerateIdOptions
+  CreateGenerateIdOptions,
+  Classes
 } from 'jss'
 import {ThemeProvider, withTheme, createTheming, Theming} from 'theming'
 
 declare const jss: Jss
+
 declare const createGenerateId: CreateGenerateId
+
 declare const JssProvider: ComponentType<{
   jss?: Jss
   registry?: SheetsRegistry
@@ -21,9 +24,11 @@ declare const JssProvider: ComponentType<{
   children: ReactNode
   id?: CreateGenerateIdOptions
 }>
+
 interface Managers {
   [key: number]: StyleSheet
 }
+
 declare const JssContext: Context<{
   jss?: Jss
   registry?: SheetsRegistry
@@ -35,10 +40,10 @@ declare const JssContext: Context<{
 type ThemedStyles<Theme> = (theme: Theme) => Styles<string>
 
 interface WithStyles<S extends Styles<string> | ThemedStyles<any>> {
-  classes: Record<S extends ThemedStyles<any> ? keyof ReturnType<S> : keyof S, string>
+  classes: Classes<S extends ThemedStyles<any> ? keyof ReturnType<S> : keyof S>
 }
 
-interface Options extends StyleSheetFactoryOptions {
+interface WithStylesOptions extends StyleSheetFactoryOptions {
   index?: number
   injectTheme?: boolean
   jss?: Jss
@@ -47,9 +52,20 @@ interface Options extends StyleSheetFactoryOptions {
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 
+interface CreateUseStylesOptions<Theme> {
+  index?: number
+  name?: string
+  theming?: Theming<Theme>
+}
+
+declare function createUseStyles<T, S extends Styles<string> | ThemedStyles<T>>(
+  styles: S,
+  options?: CreateUseStylesOptions<T>
+): (data: any) => Classes<S extends ThemedStyles<T> ? keyof ReturnType<S> : keyof S>
+
 declare function withStyles<S extends Styles<string> | ThemedStyles<any>>(
   styles: S,
-  options?: Options
+  options?: WithStylesOptions
 ): <Props extends WithStyles<S>>(
   comp: ComponentType<Props>
 ) => ComponentType<Omit<Props, 'classes'> & {classes?: Partial<Props['classes']>}>
@@ -63,7 +79,8 @@ export {
   ThemeProvider,
   withTheme,
   createTheming,
-  JssContext
+  JssContext,
+  createUseStyles
 }
 
 export default withStyles

yarn.lock

@@ -3154,6 +3154,11 @@ csstype@^2.2.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
   integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==
 
+csstype@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.5.tgz#1cd1dff742ebf4d7c991470ae71e12bb6751e034"
+  integrity sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"