fix(TypeScript): add CSSFunctions to CSSProperties typings (#392)

* Add CSSFunctions to CSSProperties typings * TypeScript tests for nested css function prop
paypal · Mar 12, 2018 · ce401a8 · ce401a8
1 parent 8a21d8b
commit ce401a8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/test/glamorous.test.tsx b/test/glamorous.test.tsx
@@ -617,7 +617,7 @@ const BuiltinStyledWithFragment: JSX.Element = (
 const cssProps = {
   ":active": {
     color: "purple"
-  }
+  },
 };
 
 const BuiltinStyledWithCSSPseudoProps = (
@@ -626,3 +626,15 @@ const BuiltinStyledWithCSSPseudoProps = (
     <glamorous.A css={cssProps} />
   </div>
 );
+
+const nestedCssProps = [
+  { color: 'red', },
+  () => ({ fontSize: 123 }),
+  () => () => () => [{ border: '1px solid black'}],
+];
+
+const NestedStyleFunctions = (
+  <div>
+    <glamorous.Div css={nestedCssProps} />
+  </div>
+)
diff --git a/typings/css-properties.d.ts b/typings/css-properties.d.ts
@@ -1933,6 +1933,14 @@ export interface CSSProperties
     CSSPropertiesPseudo,
     CSSPropertiesLossy {}
 
-export type CSSPropertiesRecursive = CSSProperties | CSSPropertiesArray
+export type CSSPropertiesRecursive =
+  | CSSProperties
+  | CSSPropertiesArray
+  | CSSFunction
+
+// TODO: This could be made generic. Issue PR if you're so inclined!
+export interface CSSFunction {
+  (props: {}): CSSPropertiesRecursive
+}
 
 export interface CSSPropertiesArray extends Array<CSSPropertiesRecursive> {}