[@types/rebass] Support rebass v4 (#37709)

types/rebass/index.d.ts

@@ -1,13 +1,15 @@
-// Type definitions for Rebass 3.0
+// Type definitions for Rebass 4.0
 // Project: https://github.com/rebassjs/rebass
 // Definitions by: rhysd <https://github.com/rhysd>
 //                 ryee-dev <https://github.com/ryee-dev>
 //                 jamesmckenzie <https://github.com/jamesmckenzie>
 //                 sara f-p <https://github.com/gretzky>
 //                 angusfretwell <https://github.com/angusfretwell>
+//                 orzarchi <https://github.com/orzarchi>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.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";
@@ -16,23 +18,47 @@ export {};
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-export interface BaseProps extends React.Props<any> {
-    as?: React.ReactType;
+export interface BaseProps extends React.RefAttributes<any> {
+    as?: React.ElementType;
     css?:
         | StyledComponents.CSSObject
         | StyledComponents.FlattenSimpleInterpolation
         | string;
 }
 
+/**
+ * The `SxStyleProp` extension `SystemStyleObject` and `Emotion` [style props](https://emotion.sh/docs/object-styles)
+ * 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 interface SxProps {
+    /**
+     * The sx prop lets you style elements inline, using values from your theme.
+     */
+    sx?: SxStyleProp;
+}
+
 interface BoxKnownProps
     extends BaseProps,
         StyledSystem.SpaceProps,
         StyledSystem.WidthProps,
+        StyledSystem.HeightProps,
         StyledSystem.FontSizeProps,
         StyledSystem.ColorProps,
         StyledSystem.FlexProps,
         StyledSystem.OrderProps,
-        StyledSystem.AlignSelfProps {}
+        StyledSystem.AlignSelfProps,
+        SxProps {
+    variant?: StyledSystem.ResponsiveValue<string>;
+}
 export interface BoxProps
     extends BoxKnownProps,
         Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
@@ -41,34 +67,16 @@ export const Box: React.FunctionComponent<BoxProps>;
 interface ButtonKnownProps
     extends BoxKnownProps,
         StyledSystem.FontWeightProps,
-        StyledSystem.BorderProps,
-        StyledSystem.BordersProps,
-        StyledSystem.BorderColorProps,
-        StyledSystem.BorderRadiusProps,
         StyledSystem.ButtonStyleProps {}
 export interface ButtonProps
     extends ButtonKnownProps,
         Omit<React.HTMLProps<HTMLButtonElement>, keyof ButtonKnownProps> {}
 export const Button: React.FunctionComponent<ButtonProps>;
 
-interface CardKnownProps
-    extends BoxKnownProps,
-        StyledSystem.BorderProps,
-        StyledSystem.BordersProps,
-        StyledSystem.BorderColorProps,
-        StyledSystem.BorderRadiusProps,
-        StyledSystem.BoxShadowProps,
-        StyledSystem.BackgroundImageProps,
-        StyledSystem.BackgroundSizeProps,
-        StyledSystem.BackgroundPositionProps,
-        StyledSystem.BackgroundRepeatProps,
-        StyledSystem.OpacityProps {
-    variant?: StyledSystem.ResponsiveValue<string>;
-}
 export interface CardProps
-    extends CardKnownProps,
-        Omit<React.HTMLProps<HTMLDivElement>, keyof CardKnownProps> {}
-export const Card: React.FunctionComponent<CardProps>;
+    extends BoxKnownProps,
+        Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
+export const Card: React.FunctionComponent<BoxKnownProps>;
 
 interface FlexKnownProps
     extends BoxKnownProps,
@@ -81,13 +89,9 @@ export interface FlexProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof FlexKnownProps> {}
 export const Flex: React.FunctionComponent<FlexProps>;
 
-interface ImageKnownProps
-    extends BoxKnownProps,
-        StyledSystem.HeightProps,
-        StyledSystem.BorderRadiusProps {}
 export interface ImageProps
-    extends ImageKnownProps,
-        Omit<React.HTMLProps<HTMLImageElement>, keyof ImageKnownProps> {}
+    extends BoxKnownProps,
+        Omit<React.HTMLProps<HTMLImageElement>, keyof BoxKnownProps> {}
 export const Image: React.FunctionComponent<ImageProps>;
 
 // tslint:disable-next-line no-empty-interface
@@ -109,9 +113,7 @@ export interface TextProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof TextKnownProps> {}
 export const Text: React.FunctionComponent<TextProps>;
 
-// tslint:disable-next-line no-empty-interface
-interface HeadingKnownProps extends TextKnownProps {}
 export interface HeadingProps
-    extends HeadingKnownProps,
-        Omit<React.HTMLProps<HTMLHeadingElement>, keyof HeadingKnownProps> {}
+    extends TextKnownProps,
+        Omit<React.HTMLProps<HTMLHeadingElement>, keyof TextKnownProps> {}
 export const Heading: React.FunctionComponent<HeadingProps>;

types/rebass/rebass-tests.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";
+import { Box, Flex, Text, Heading, Button, Link, Image, Card, BoxProps } from "rebass";
 import "styled-components/macro";
 
 const CustomComponent: React.FunctionComponent = ({ children }) => {
@@ -15,6 +15,9 @@ ExtendedBox.defaultProps = {
     p: 3
 };
 
+const RefForwardingBox = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
+    <ExtendedBox ref={ref} {...props} />);
+
 const boxCss = css`
     background: purple;
     color: white;
@@ -32,25 +35,33 @@ export default () => (
                 Hi, I'm text.
             </Text>
             <Card
+                sx={{
+                    borderRadius: 8,
+                    boxShadow: "0 2px 16px rgba(0, 0, 0, 0.25)",
+                    bg: "#f6f6ff"
+                }}
                 fontSize={6}
                 width={[1, 1, 1 / 2]}
                 p={5}
                 my={5}
-                bg="#f6f6ff"
-                borderRadius={8}
-                boxShadow="0 2px 16px rgba(0, 0, 0, 0.25)"
             >
                 Card
             </Card>
             <Image
                 width={[1, 1, 1 / 2]}
                 src="https://source.unsplash.com/random/1280x720"
-                borderRadius="1em"
+                sx={{
+                    borderRadius: "1em"
+                }}
             />
             <Link href="https://rebassjs.org" title="Rebass" target="_blank">
                 Link
             </Link>
-            <Button bg="magenta" border="1em" borderRadius="1em">
+            <Button sx={{
+                bg: "magenta",
+                border: "1em",
+                borderRadius: "1em"
+            }}>
                 Button
             </Button>
             <Box as={CustomComponent} bg="red">

types/rebass/tsconfig.json

@@ -14,6 +14,9 @@
         "typeRoots": [
             "../"
         ],
+        "paths": {
+            "@styled-system/css": ["styled-system__css"]
+        },
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true