From 5c64371d89433af473f939b0ff08efe57fbb542b Mon Sep 17 00:00:00 2001
From: Chris Gervang <chrisgervang@users.noreply.github.com>
Date: Sat, 25 Mar 2017 17:13:32 -0700
Subject: [PATCH 1/3] Updating ReactCSS types to version 1.2

---
 types/reactcss/index.d.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/types/reactcss/index.d.ts b/types/reactcss/index.d.ts
index 2d571674f7..3c0e03ee6e 100644
--- a/types/reactcss/index.d.ts
+++ b/types/reactcss/index.d.ts
@@ -1,12 +1,11 @@
-// Type definitions for ReactCSS v1.0.0
+// Type definitions for ReactCSS v1.2.0
 // Project: http://reactcss.com/
-// Definitions by: Karol Janyst <https://github.com/LKay>
+// Definitions by: Chris Gervang <https://github.com/chrisgervang>, Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.1
+// TypeScript Version: 2.2
 
 import * as React from "react"
 
-
 interface LoopableProps {
     "first-child"?: boolean
     "last-child"?: boolean
@@ -19,11 +18,12 @@ interface HoverProps {
     hover?: boolean
 }
 
-interface Classes {
-    default: any
-    [scope: string]: any
+interface Classes<T> {
+    default: Partial<T>
+    [scope: string]: Partial<T>
 }
 
+export type CSS = React.CSSProperties
 export function hover<A>(component: React.ComponentClass<A> | React.StatelessComponent<A>): React.ComponentClass<A>
 export function loop(i: number, length: number): LoopableProps
-export default function reactCSS(classes: Classes, ...activations: Array<any>): any
+export default function reactCSS<T>(classes: Classes<T>, ...activations: Array<any>): T

From 48032bc9c4a645a82f81656c436a4370a6119809 Mon Sep 17 00:00:00 2001
From: Chris Gervang <gervangster@live.com>
Date: Sat, 25 Mar 2017 17:44:29 -0700
Subject: [PATCH 2/3] expanded the test file to use all of the library
 correctly. corrected LoopableProps definition.

---
 types/reactcss/index.d.ts         | 10 ++---
 types/reactcss/reactcss-tests.tsx | 68 ++++++++++++++++++++++++++-----
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/types/reactcss/index.d.ts b/types/reactcss/index.d.ts
index 3c0e03ee6e..fe64ed4ce9 100644
--- a/types/reactcss/index.d.ts
+++ b/types/reactcss/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for ReactCSS v1.2.0
+// Type definitions for ReactCSS 1.2.0
 // Project: http://reactcss.com/
 // Definitions by: Chris Gervang <https://github.com/chrisgervang>, Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -6,15 +6,15 @@
 
 import * as React from "react"
 
-interface LoopableProps {
+interface LoopableProps extends React.Props<any> {
+    "nth-child": number
     "first-child"?: boolean
     "last-child"?: boolean
     even?: boolean
     odd?: boolean
-    [nthChild: string]: boolean
 }
 
-interface HoverProps {
+interface HoverProps<T> extends React.Props<T> {
     hover?: boolean
 }
 
@@ -25,5 +25,5 @@ interface Classes<T> {
 
 export type CSS = React.CSSProperties
 export function hover<A>(component: React.ComponentClass<A> | React.StatelessComponent<A>): React.ComponentClass<A>
-export function loop(i: number, length: number): LoopableProps
+export function loop(index: number, length: number): LoopableProps
 export default function reactCSS<T>(classes: Classes<T>, ...activations: Array<any>): T
diff --git a/types/reactcss/reactcss-tests.tsx b/types/reactcss/reactcss-tests.tsx
index 058958c7bf..2905a07f79 100644
--- a/types/reactcss/reactcss-tests.tsx
+++ b/types/reactcss/reactcss-tests.tsx
@@ -1,19 +1,67 @@
 import * as React from "react"
-import { StatelessComponent } from "react"
+import { SFC } from "react"
 import { render } from "react-dom"
-import { default as reactCSS, hover, loop, LoopableProps, HoverProps } from "reactcss"
+import { default as reactCSS, hover, loop, LoopableProps, HoverProps, CSS } from "reactcss"
 
-interface TestProps extends HoverProps { }
+interface TestHoverProps extends HoverProps<any> { }
 
-var styles: any = reactCSS({
-    default: {},
-    hover: {}
-}, { hover: true })
+const TestHover: SFC<TestHoverProps> = ({hover}) => {
+    const styles = reactCSS<{title: CSS}>({
+        default: {
+            title: {
+                color: "black"
+            }
+        },
+        hover: {
+            title: {
+                color: "blue"
+            }
+        }
+    }, { hover })
 
-var loopProps: LoopableProps = loop(1, 10)
+    const list = ["First!", "Second!", "Third!"]
 
-var TestComponent: StatelessComponent<TestProps>
-var Test = hover(TestComponent)
+    return (
+        <div>
+            <div style={ styles.title }>
+                Cool Title!
+            </div>
+
+            {list.map((item, index) => (
+                <TestLoop key={index} {...loop(index, list.length)}>{item}</TestLoop>
+            ))}
+        </div>
+    )
+}
+
+interface TestLoopProps extends LoopableProps { }
+
+const TestLoop: SFC<TestLoopProps> = (props) => {
+    const styles = reactCSS<{element: CSS}>({
+        default: {
+            element: {
+                width: "200px",
+                border: "1px solid black"
+            }
+        },
+        first: {
+            element: {
+                borderTopLeftRadius: "2px",
+                borderTopRightRadius: "2px"
+            }
+        },
+        last: {
+            element: {
+                borderBottomLeftRadius: "2px",
+                borderBottomRightRadius: "2px"
+            }
+        }
+    }, { first: props["first-child"], last: props["last-child"] })
+
+    return <div style={styles.element}>{props.children}</div>
+}
+
+const Test = hover(TestHover)
 
 render(
     <Test />,

From cf7ea6492c0f6076007381a2e36f69f53fc63c39 Mon Sep 17 00:00:00 2001
From: Chris Gervang <gervangster@live.com>
Date: Sat, 25 Mar 2017 17:51:11 -0700
Subject: [PATCH 3/3] recommended pattern

---
 types/reactcss/reactcss-tests.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/types/reactcss/reactcss-tests.tsx b/types/reactcss/reactcss-tests.tsx
index 2905a07f79..0ba1f69fc2 100644
--- a/types/reactcss/reactcss-tests.tsx
+++ b/types/reactcss/reactcss-tests.tsx
@@ -44,19 +44,19 @@ const TestLoop: SFC<TestLoopProps> = (props) => {
                 border: "1px solid black"
             }
         },
-        first: {
+        "first-child": {
             element: {
                 borderTopLeftRadius: "2px",
                 borderTopRightRadius: "2px"
             }
         },
-        last: {
+        "last-child": {
             element: {
                 borderBottomLeftRadius: "2px",
                 borderBottomRightRadius: "2px"
             }
         }
-    }, { first: props["first-child"], last: props["last-child"] })
+    }, props)
 
     return <div style={styles.element}>{props.children}</div>
 }