From 49764a29bc1f392f87a4e11b5f97ddb3143f38d7 Mon Sep 17 00:00:00 2001
From: James Barzegar <james.barzegar@gmail.com>
Date: Tue, 14 May 2019 17:32:36 -0400
Subject: [PATCH] [Rebass] Update rebass base props to facilitate use of string
 or css function (#35405)

* [rebass] update BaseProps css type

* updated test

* Fixed incorrect type declaration
Updated test
---
 types/rebass/index.d.ts       |  5 ++++-
 types/rebass/rebass-tests.tsx | 21 +++++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index 7682bbc68c..72097382cb 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -18,7 +18,10 @@ type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export interface BaseProps extends React.Props<any> {
     as?: React.ReactType;
-    css?: StyledComponents.CSSObject;
+    css?:
+        | StyledComponents.CSSObject
+        | StyledComponents.FlattenSimpleInterpolation
+        | string;
 }
 
 interface BoxKnownProps
diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
index 87df64f323..4621f20fdb 100644
--- a/types/rebass/rebass-tests.tsx
+++ b/types/rebass/rebass-tests.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";
+import "styled-components/macro";
 
 const CustomComponent: React.FunctionComponent = ({ children }) => {
     return <div>{children}</div>;
@@ -14,7 +15,14 @@ ExtendedBox.defaultProps = {
     p: 3
 };
 
-() => (
+const boxCss = css`
+    background: purple;
+    color: white;
+`;
+
+const CssBox = () => <Box css={boxCss} />;
+
+export default () => (
     <Box width={1} css={{ height: "100vh" }} py={[1, 2, 3]} ml="1em">
         <Flex width={1} alignItems="center" justifyContent="center">
             <Heading fontSize={5} fontWeight="bold">
@@ -49,6 +57,15 @@ ExtendedBox.defaultProps = {
                 CustomComponent
             </Box>
             <ExtendedBox m={2}>ExtendedBox</ExtendedBox>
+            <Box
+                css={`
+                    color: red;
+                `}
+            >
+                String css prop
+            </Box>
+
+            <CssBox />
         </Flex>
     </Box>
 );