Add styled component declarations to rebass (#40977)

types/rebass/index.d.ts

@@ -11,9 +11,9 @@
 // TypeScript Version: 3.1
 
 import { ResponsiveStyleValue, SystemStyleObject } from '@styled-system/css';
-import * as React from "react";
-import * as StyledComponents from "styled-components";
-import * as StyledSystem from "styled-system";
+import * as React from 'react';
+import * as StyledComponents from 'styled-components';
+import * as StyledSystem from 'styled-system';
 
 export {};
 
@@ -21,10 +21,7 @@ type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export interface BaseProps extends React.RefAttributes<any> {
     as?: React.ElementType;
-    css?:
-        | StyledComponents.CSSObject
-        | StyledComponents.FlattenSimpleInterpolation
-        | string;
+    css?: StyledComponents.CSSObject | StyledComponents.FlattenSimpleInterpolation | string;
 }
 
 /**
@@ -32,13 +29,14 @@ export interface BaseProps extends React.RefAttributes<any> {
  * such that properties that are part of the `Theme` will be transformed to
  * their corresponding values. Other valid CSS properties are also allowed.
  */
-export type SxStyleProp = SystemStyleObject |
-    Record<
-        string,
-        | SystemStyleObject
-        | ResponsiveStyleValue<number | string>
-        | Record<string, SystemStyleObject | ResponsiveStyleValue<number | string>>
-        >;
+export type SxStyleProp =
+    | SystemStyleObject
+    | Record<
+          string,
+          | SystemStyleObject
+          | ResponsiveStyleValue<number | string>
+          | Record<string, SystemStyleObject | ResponsiveStyleValue<number | string>>
+      >;
 
 export interface SxProps {
     /**
@@ -60,23 +58,16 @@ interface BoxKnownProps
     variant?: StyledSystem.ResponsiveValue<string>;
     tx?: string;
 }
-export interface BoxProps
-    extends BoxKnownProps,
-        Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
+export interface BoxProps extends BoxKnownProps, Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
 export const Box: React.FunctionComponent<BoxProps>;
 
-interface ButtonKnownProps
-    extends BoxKnownProps,
-        StyledSystem.FontWeightProps,
-        StyledSystem.ButtonStyleProps {}
+interface ButtonKnownProps extends BoxKnownProps, StyledSystem.FontWeightProps, StyledSystem.ButtonStyleProps {}
 export interface ButtonProps
     extends ButtonKnownProps,
         Omit<React.HTMLProps<HTMLButtonElement>, keyof ButtonKnownProps> {}
 export const Button: React.FunctionComponent<ButtonProps>;
 
-export interface CardProps
-    extends BoxKnownProps,
-        Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
+export interface CardProps extends BoxKnownProps, Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
 export const Card: React.FunctionComponent<BoxKnownProps>;
 
 interface FlexKnownProps
@@ -85,21 +76,15 @@ interface FlexKnownProps
         StyledSystem.FlexDirectionProps,
         StyledSystem.AlignItemsProps,
         StyledSystem.JustifyContentProps {}
-export interface FlexProps
-    extends FlexKnownProps,
-        Omit<React.HTMLProps<HTMLDivElement>, keyof FlexKnownProps> {}
+export interface FlexProps extends FlexKnownProps, Omit<React.HTMLProps<HTMLDivElement>, keyof FlexKnownProps> {}
 export const Flex: React.FunctionComponent<FlexProps>;
 
-export interface ImageProps
-    extends BoxKnownProps,
-        Omit<React.HTMLProps<HTMLImageElement>, keyof BoxKnownProps> {}
+export interface ImageProps extends BoxKnownProps, Omit<React.HTMLProps<HTMLImageElement>, keyof BoxKnownProps> {}
 export const Image: React.FunctionComponent<ImageProps>;
 
 // tslint:disable-next-line no-empty-interface
 interface LinkKnownProps extends BoxKnownProps {}
-export interface LinkProps
-    extends LinkKnownProps,
-        Omit<React.HTMLProps<HTMLAnchorElement>, keyof LinkKnownProps> {}
+export interface LinkProps extends LinkKnownProps, Omit<React.HTMLProps<HTMLAnchorElement>, keyof LinkKnownProps> {}
 export const Link: React.FunctionComponent<LinkProps>;
 
 interface TextKnownProps
@@ -109,12 +94,8 @@ interface TextKnownProps
         StyledSystem.TextAlignProps,
         StyledSystem.LineHeightProps,
         StyledSystem.LetterSpacingProps {}
-export interface TextProps
-    extends TextKnownProps,
-        Omit<React.HTMLProps<HTMLDivElement>, keyof TextKnownProps> {}
+export interface TextProps extends TextKnownProps, Omit<React.HTMLProps<HTMLDivElement>, keyof TextKnownProps> {}
 export const Text: React.FunctionComponent<TextProps>;
 
-export interface HeadingProps
-    extends TextKnownProps,
-        Omit<React.HTMLProps<HTMLHeadingElement>, keyof TextKnownProps> {}
+export interface HeadingProps extends TextKnownProps, Omit<React.HTMLProps<HTMLHeadingElement>, keyof TextKnownProps> {}
 export const Heading: React.FunctionComponent<HeadingProps>;

types/rebass/rebass-tests.tsx

@@ -1,7 +1,8 @@
-import * as React from "react";
-import styled, { css } from "styled-components";
-import { Box, Flex, Text, Heading, Button, Link, Image, Card, BoxProps } from "rebass";
-import "styled-components/macro";
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Box, Flex, Text, Heading, Button, Link, Image, Card, BoxProps } from 'rebass';
+import { Box as StyledBox } from 'rebass/styled-components';
+import 'styled-components/macro';
 
 const CustomComponent: React.FunctionComponent = ({ children }) => {
     return <div>{children}</div>;
@@ -12,11 +13,12 @@ const ExtendedBox = styled(Box)`
 `;
 
 ExtendedBox.defaultProps = {
-    p: 3
+    p: 3,
 };
 
-const RefForwardingBox = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
-    <ExtendedBox ref={ref} {...props} />);
+const RefForwardingBox = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => (
+    <ExtendedBox ref={ref} {...props} />
+));
 
 const boxCss = css`
     background: purple;
@@ -28,7 +30,7 @@ const CssBox = () => <Box css={boxCss} />;
 const VariantBox = () => <Box tx="specialBoxes" />;
 
 export default () => (
-    <Box width={1} css={{ height: "100vh" }} py={[1, 2, 3]} ml="1em" display="block">
+    <Box width={1} css={{ height: '100vh' }} py={[1, 2, 3]} ml="1em" display="block">
         <Flex width={1} alignItems="center" justifyContent="center">
             <Heading fontSize={5} fontWeight="bold">
                 Hi, I'm a heading.
@@ -39,8 +41,8 @@ export default () => (
             <Card
                 sx={{
                     borderRadius: 8,
-                    boxShadow: "0 2px 16px rgba(0, 0, 0, 0.25)",
-                    bg: "#f6f6ff"
+                    boxShadow: '0 2px 16px rgba(0, 0, 0, 0.25)',
+                    bg: '#f6f6ff',
                 }}
                 fontSize={6}
                 width={[1, 1, 1 / 2]}
@@ -53,17 +55,19 @@ export default () => (
                 width={[1, 1, 1 / 2]}
                 src="https://source.unsplash.com/random/1280x720"
                 sx={{
-                    borderRadius: "1em"
+                    borderRadius: '1em',
                 }}
             />
             <Link href="https://rebassjs.org" title="Rebass" target="_blank">
                 Link
             </Link>
-            <Button sx={{
-                bg: "magenta",
-                border: "1em",
-                borderRadius: "1em"
-            }}>
+            <Button
+                sx={{
+                    bg: 'magenta',
+                    border: '1em',
+                    borderRadius: '1em',
+                }}
+            >
                 Button
             </Button>
             <Box as={CustomComponent} bg="red">
@@ -77,16 +81,21 @@ export default () => (
             >
                 String css prop
             </Box>
-            <Button sx={theme => ({
-                bg: "magenta",
-                border: "1em",
-                borderRadius: "1em"
-            })}>
+            <Button
+                sx={theme => ({
+                    bg: 'magenta',
+                    border: '1em',
+                    borderRadius: '1em',
+                })}
+            >
                 Button
             </Button>
             <CssBox />
 
             <VariantBox />
         </Flex>
+        <StyledBox width={1} css={{ height: '100vh' }} py={[1, 2, 3]} ml="1em" display="block">
+            Styled Box
+        </StyledBox>
     </Box>
 );

types/rebass/styled-components.d.ts

@@ -0,0 +1 @@
+export * from './index';