diff --git a/types/styletron-react/index.d.ts b/types/styletron-react/index.d.ts
index 95a1c00f1e..c2ce667bf8 100644
--- a/types/styletron-react/index.d.ts
+++ b/types/styletron-react/index.d.ts
@@ -27,9 +27,7 @@ export interface NonAssignmentCommutativeReducerContainer {
     reducer: Reducer;
 }
 
-export type ReducerContainer =
-    | AssignmentCommutativeReducerContainer
-    | NonAssignmentCommutativeReducerContainer;
+export type ReducerContainer = AssignmentCommutativeReducerContainer | NonAssignmentCommutativeReducerContainer;
 
 export type StackIndex = number;
 
@@ -71,52 +69,37 @@ export type StyletronComponent<P extends object> = React.FC<P & StyletronCompone
 };
 
 export interface StyledFn {
-    <
-        C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-        P extends object
-    >(
+    <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, P extends object>(
         component: C,
-        style: (props: P) => StyleObject
+        style: (props: P) => StyleObject,
     ): StyletronComponent<
-        Pick<
-            React.ComponentProps<C>,
-            Exclude<keyof React.ComponentProps<C>, { className: string }>
-        > &
-            P
+        Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
     >;
     <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
         component: C,
-        style: StyleObject
-    ): StyletronComponent<
-        Pick<
-            React.ComponentProps<C>,
-            Exclude<keyof React.ComponentProps<C>, { className: string }>
-        >
-    >;
+        style: StyleObject,
+    ): StyletronComponent<Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>>>;
 }
 
 export interface WithStyleFn {
     <C extends StyletronComponent<any>, P extends object>(
         component: C,
-        style: (props: P) => StyleObject
+        style: (props: P) => StyleObject,
     ): StyletronComponent<React.ComponentProps<C> & P>;
-    <C extends StyletronComponent<any>>(
-        component: C,
-        style: StyleObject
-    ): StyletronComponent<React.ComponentProps<C>>;
+    <C extends StyletronComponent<any>>(component: C, style: StyleObject): StyletronComponent<React.ComponentProps<C>>;
 }
 
 export interface WithTransformFn {
     <C extends StyletronComponent<any>, P extends object>(
         component: C,
-        style: (style: StyleObject, props: P) => StyleObject
+        style: (style: StyleObject, props: P) => StyleObject,
     ): StyletronComponent<React.ComponentProps<C> & P>;
 }
 
 export interface WithWrapperFn {
     <C extends StyletronComponent<any>, P extends object>(
         component: C,
-        wrapper: (component: C) => React.ComponentType<P>
+        wrapper: (component: C) => React.ComponentType<P>,
     ): StyletronComponent<React.ComponentProps<C> & P>;
 }
 
@@ -131,6 +114,8 @@ export class NoopDebugEngine {
     debug(): void;
 }
 
+export const DebugEngine: typeof BrowserDebugEngine | typeof NoopDebugEngine;
+
 export type DebugEngine = BrowserDebugEngine | NoopDebugEngine;
 
 export interface DevProviderProps {
@@ -141,19 +126,12 @@ export interface DevProviderProps {
     debug?: DebugEngine;
 }
 
-export class DevProvider extends React.Component<
-    DevProviderProps,
-    { hydrating: boolean }
-> {}
+export class DevProvider extends React.Component<DevProviderProps, { hydrating: boolean }> {}
 
 export const Provider: typeof DevProvider | React.Provider<StandardEngine>;
 
 export function DevConsumer(props: {
-    children: (
-        styletronEngine: StandardEngine,
-        debugEngine: DebugEngine,
-        hydrating: boolean
-    ) => React.ReactNode;
+    children: (styletronEngine: StandardEngine, debugEngine: DebugEngine, hydrating: boolean) => React.ReactNode;
 }): JSX.Element;
 
 /**
@@ -174,9 +152,7 @@ export function createStyled(options: CreateStyledOptions): StyledFn;
 
 export const styled: ReturnType<typeof createStyled>;
 
-export function createStyledElementComponent(
-    styletron: Styletron
-): StyletronComponent<any>;
+export function createStyledElementComponent(styletron: Styletron): StyletronComponent<any>;
 
 export const withTransform: WithTransformFn;
 
@@ -190,61 +166,45 @@ export const withStyle: typeof withStyleDeep;
 
 export const withWrapper: WithWrapperFn;
 
-export function composeStatic(
-    styletron: Styletron,
-    reducerContainer: ReducerContainer
-): Styletron;
+export function composeStatic(styletron: Styletron, reducerContainer: ReducerContainer): Styletron;
 
 export function composeDynamic(
     styletron: Styletron,
-    reducer: (style: StyleObject, props: object) => StyleObject
+    reducer: (style: StyleObject, props: object) => StyleObject,
 ): Styletron;
 
-export function staticComposeShallow(
-    styletron: Styletron,
-    style: StyleObject
-): ReturnType<typeof composeStatic>;
+export function staticComposeShallow(styletron: Styletron, style: StyleObject): ReturnType<typeof composeStatic>;
 
-export function staticComposeDeep(
-    styletron: Styletron,
-    style: StyleObject
-): ReturnType<typeof composeStatic>;
+export function staticComposeDeep(styletron: Styletron, style: StyleObject): ReturnType<typeof composeStatic>;
 
 export function dynamicComposeShallow(
     styletron: Styletron,
-    styleArg: (props: object) => StyleObject
+    styleArg: (props: object) => StyleObject,
 ): ReturnType<typeof composeDynamic>;
 
 export function dynamicComposeDeep(
     styletron: Styletron,
-    styleArg: (props: object) => StyleObject
+    styleArg: (props: object) => StyleObject,
 ): ReturnType<typeof composeDynamic>;
 
 export function autoComposeShallow(
     styletron: Styletron,
-    styleArg: StyleObject | ((props: object) => StyleObject)
+    styleArg: StyleObject | ((props: object) => StyleObject),
 ): ReturnType<typeof staticComposeShallow>;
 
+export function autoComposeDeep(styletron: Styletron, styleArg: StyleObject): ReturnType<typeof staticComposeDeep>;
 export function autoComposeDeep(
     styletron: Styletron,
-    styleArg: StyleObject
-): ReturnType<typeof staticComposeDeep>;
-export function autoComposeDeep(
-    styletron: Styletron,
-    styleArg: (props: object) => StyleObject
+    styleArg: (props: object) => StyleObject,
 ): ReturnType<typeof dynamicComposeDeep>;
 
-export function createShallowMergeReducer(
-    style: StyleObject
-): AssignmentCommutativeReducerContainer;
+export function createShallowMergeReducer(style: StyleObject): AssignmentCommutativeReducerContainer;
 
-export function createDeepMergeReducer(
-    style: StyleObject
-): AssignmentCommutativeReducerContainer;
+export function createDeepMergeReducer(style: StyleObject): AssignmentCommutativeReducerContainer;
 
 // Utility functions
 export function resolveStyle(
     getInitialStyle: () => StyleObject,
     reducers: ReadonlyArray<ReducerContainer>,
-    props: object
+    props: object,
 ): StyleObject;
diff --git a/types/styletron-react/styletron-react-tests.tsx b/types/styletron-react/styletron-react-tests.tsx
index 119b1a0adb..2d4a0e7b53 100644
--- a/types/styletron-react/styletron-react-tests.tsx
+++ b/types/styletron-react/styletron-react-tests.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+    DebugEngine,
     styled,
     StandardEngine,
     withStyle,
@@ -8,6 +9,7 @@ import {
     withWrapper,
     Provider,
     useStyletron,
+    DevProvider,
 } from 'styletron-react';
 
 // styled()
@@ -47,12 +49,9 @@ const StyledComplexButton = styled(ComplexButton, { color: 'blue' });
 
 <StyledComplexButton isDisabled />;
 
-const DynamicStyledComplexButton = styled(
-    ComplexButton,
-    (props: DynamicStyledProps) => {
-        return { color: props.$fraction < 0.5 ? 'red' : 'green' };
-    }
-);
+const DynamicStyledComplexButton = styled(ComplexButton, (props: DynamicStyledProps) => {
+    return { color: props.$fraction < 0.5 ? 'red' : 'green' };
+});
 
 <DynamicStyledComplexButton $fraction={Math.random()} isDisabled />;
 
@@ -79,12 +78,9 @@ interface WithStyledDynamicProps {
     $crushed: boolean;
 }
 
-const WithStyledDynamic = withStyle(
-    BasicStyled,
-    (props: WithStyledDynamicProps) => ({
-        letterSpacing: props.$crushed ? '-5px' : '0',
-    })
-);
+const WithStyledDynamic = withStyle(BasicStyled, (props: WithStyledDynamicProps) => ({
+    letterSpacing: props.$crushed ? '-5px' : '0',
+}));
 
 <WithStyledDynamic $crushed />;
 
@@ -101,12 +97,9 @@ interface WithStyledDeepDynamicProps {
     $crushed: boolean;
 }
 
-const WithStyledDeepDynamic = withStyleDeep(
-    BasicStyled,
-    (props: WithStyledDeepDynamicProps) => ({
-        letterSpacing: props.$crushed ? '-5px' : '0',
-    })
-);
+const WithStyledDeepDynamic = withStyleDeep(BasicStyled, (props: WithStyledDeepDynamicProps) => ({
+    letterSpacing: props.$crushed ? '-5px' : '0',
+}));
 
 <WithStyledDeepDynamic $crushed />;
 
@@ -117,18 +110,10 @@ interface WithTransformTestProps {
     $inline: boolean;
 }
 
-const WithTransformTest = withTransform(
-    BasicStyled,
-    (style, props: WithTransformTestProps) => {
-        const display =
-            style.display === 'none'
-                ? 'none'
-                : props.$inline
-                ? 'inline-flex'
-                : 'flex';
-        return { ...styled, display };
-    }
-);
+const WithTransformTest = withTransform(BasicStyled, (style, props: WithTransformTestProps) => {
+    const display = style.display === 'none' ? 'none' : props.$inline ? 'inline-flex' : 'flex';
+    return { ...styled, display };
+});
 
 <WithTransformTest $inline />;
 
@@ -169,6 +154,19 @@ const App = () => (
 
 <App />;
 
+// <DevProvider />
+// --------------------------
+
+const debug = new DebugEngine();
+
+const DevApp = () => (
+    <DevProvider value={engine} debug={debug}>
+        <PrettyButton />
+    </DevProvider>
+);
+
+<DevApp />;
+
 // useStyletron()
 // --------------------------