[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

@@ -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

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>
 );