support global typescript theme definition (#1453)

Author: k-yle

contributing.md

@@ -26,9 +26,9 @@ yarn build
 To lint, format, and type check the project run the following commands:
 
 ```bash
-yarn lint
+yarn check:lint
 yarn format
-yarn typecheck
+yarn check:ts
 ```
 
 ## Run tests

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

@@ -45,7 +45,14 @@ interface WithStylesProps<S extends Styles | ((theme: any) => Styles)> {
  */
 type WithStyles<S extends Styles | ((theme: any) => Styles)> = WithStylesProps<S>
 
-export interface DefaultTheme {}
+declare global {
+  namespace Jss {
+    /** You can use the global `Jss.Theme` interface to define a project-wide default theme. */
+    export interface Theme {}
+  }
+}
+
+export type DefaultTheme = Jss.Theme
 
 interface BaseOptions<Theme = DefaultTheme> extends StyleSheetFactoryOptions {
   index?: number

packages/react-jss/src/index.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
+import WithStyles, {createUseStyles} from '.'
 
-import WithStyles from '.'
+const expectType = <T extends any>(x: T): T => x
 
 interface Props {
   testProp: string
@@ -43,3 +44,39 @@ function testRender() {
     </>
   )
 }
+
+declare global {
+  namespace Jss {
+    export interface Theme {
+      themeColour: string
+      defaultFontSize: number
+    }
+  }
+}
+
+const useStyles = createUseStyles(theme => {
+  expectType<string>(theme.themeColour)
+  expectType<number>(theme.defaultFontSize)
+
+  return {
+    myDiv: {
+      color: theme.themeColour,
+      // @ts-expect-error typescript should error here since the theme property doesn't exist
+      border: theme.aPropertyThatDoesntExist
+    }
+  }
+})
+
+export function Component() {
+  const classes = useStyles()
+
+  expectType<string>(classes.myDiv)
+
+  return (
+    <>
+      <div className={classes.myDiv} />
+      {/* @ts-expect-error typescript should error here since the class is invalid */}
+      <div className={classes.thisClassDoesntExist} />
+    </>
+  )
+}