From aa2de9e6174382d92b6b09d6b977d0c650671e78 Mon Sep 17 00:00:00 2001
From: Adam Misiorny <adam.misiorny@gmail.com>
Date: Thu, 17 Jan 2019 20:02:05 +0100
Subject: [PATCH 1/2] Add support for responsive object

https://github.com/jxnblk/styled-system/blob/master/docs/responsive-styles.md#using-objects
---
 types/styled-system/index.d.ts              |  1 +
 types/styled-system/styled-system-tests.tsx | 51 +++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index ca2f7ce1fc..a26a6d98b6 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -8,6 +8,7 @@
 //                 Matthieu Vachon <https://github.com/maoueh>
 //                 Adam Lavin <https://github.com/lavoaster>
 //                 Joachim Schuler <https://github.com/jschuler>
+//                 Adam Misiorny <https://github.com/adam187>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index 4608aeebec..397e1b0402 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -314,12 +314,15 @@ const test = () => (
         <Box bg="tomato" />
         // responsive width
         <Box width={[1, 1 / 2, 1 / 4]} />
+        <Box width={{ sm: 1, md: 1 / 2, lg: 1 / 4 }} />
         // responsive font-size
         <Box fontSize={[2, 3, 4]} />
+        <Box fontSize={{ sm: 2, md: 3, lg: 4 }} />
         // responsive margin
         <Box m={[1, 2, 3]} />
         // responsive padding
         <Box p={[1, 2, 3]} />
+        <Box p={{ sm: 1, md: 2, lg: 3 }} />
         // examples (margin prop) // sets margin value of `theme.space[2]`
         <Box m={2} />
         // sets margin value of `-1 * theme.space[2]`
@@ -332,6 +335,7 @@ const test = () => (
         // sets margin `8px` on all viewports and `16px` from the smallest
         breakpoint and up
         <Box m={[1, 2]} />
+        <Box m={{ sm: 1, md: 2 }} />
         // examples // width `50%`
         <Box width={1 / 2} />
         // width `256px`
@@ -341,6 +345,7 @@ const test = () => (
         // width `100%` on all viewports and `50%` from the smallest breakpoint
         and up
         <Box width={[1, 1 / 2]} />
+        <Box width={{ sm: 1, md: 1 / 2 }} />
         // examples // font-size of `theme.fontSizes[3]`
         <Text fontSize={3} />
         // font-size `32px`
@@ -350,6 +355,7 @@ const test = () => (
         // font-size `10px` on all viewports and `12px` from the smallest
         breakpoint and up
         <Text fontSize={[10, 12]} />
+        <Text fontSize={{ sm: 10, md: 12 }} />
         // examples // picks the value defined in `theme.colors['blue']`
         <Box color="blue" />
         // picks up a nested color value using dot notation //
@@ -362,6 +368,7 @@ const test = () => (
         // textAlign (responsive)
         <Text textAlign="center" />
         <Text textAlign={["center", "left"]} />
+        <Text textAlign={{ sm: "center", md: "left" }} />
         // lineHeight
         <Text lineHeight="1.25" />
         // fontWeight
@@ -371,72 +378,107 @@ const test = () => (
         // display (responsive)
         <Box display="inline-block" />
         <Box display={["block", "inline-block"]} />
+        <Box display={{ sm: "block", md: "inline-block" }} />
         // maxWidth (responsive)
         <Box maxWidth={1024} />
         <Box maxWidth={[768, null, null, 1024]} />
+        <Box maxWidth={{ sm: 768, lg: 1024 }} />
         // minWidth (responsive)
         <Box minWidth={128} />
         <Box minWidth={[96, 128]} />
+        <Box minWidth={{ sm: 96, lg: 128 }} />
         // height (responsive)
         <Box height={64} />
         <Box height={[48, 64]} />
+        <Box height={{ sm: 48, md: 64 }} />
         // maxHeight (responsive)
         <Box maxHeight={512} />
         <Box maxHeight={[384, 512]} />
+        <Box maxHeight={{ sm: 384, md: 512 }} />
         // minHeight (responsive)
         <Box minHeight={512} />
         <Box minHeight={[384, 512]} />
+        <Box minHeight={{ sm: 384, md: 512 }} />
         // size (responsive, width & height)
         <Box size={32} />
         <Box size={[32, 48]} />
+        <Box size={{ sm: 32, md: 48 }} />
         // ratio (height: 0 & paddingBottom)
         <Box ratio={3 / 4} />
         // alignItems (responsive)
         <Flex alignItems="center" />
+        <Flex alignItems={["center"]} />
+        <Flex alignItems={{ sm: "center" }} />
         // alignContent (responsive)
         <Flex alignContent="center" />
+        <Flex alignContent={["center"]} />
+        <Flex alignContent={{ sm: "center" }} />
         // justifyContent (responsive)
         <Flex justifyContent="center" />
+        <Flex justifyContent={["center"]} />
+        <Flex justifyContent={{ sm: "center" }} />
         // flexWrap (responsive)
         <Flex flexWrap="wrap" />
+        <Flex flexWrap={["wrap"]} />
+        <Flex flexWrap={{ sm: "wrap" }} />
         // flexBasis (responsive)
         <Flex flexBasis="auto" />
         // flexDirection (responsive)
         <Flex flexDirection="column" />
+        <Flex flexDirection={["column"]} />
+        <Flex flexDirection={{ sm: "column" }} />
         // gridGap
         <Grid gridGap="1px" />
         <Grid gridGap={["1", "2"]} />
+        <Grid gridGap={{ sm: "1", md: "2" }} />
         // gridRowGap
         <Grid gridRowGap="1px" />
         <Grid gridRowGap={["1", "2"]} />
+        <Grid gridRowGap={{ sm: "1", md: "2" }} />
         // gridColumnGap
         <Grid gridColumnGap="1px" />
         <Grid gridColumnGap={["1", "2"]} />
+        <Grid gridColumnGap={{ sm: "1", md: "2" }} />
         // gridRow
         <Grid gridRow="auto" />
+        <Grid gridRow={["auto"]} />
+        <Grid gridRow={{ sm: "auto" }} />
         // gridColumn
         <Grid gridColumn="auto" />
+        <Grid gridColumn={["auto"]} />
+        <Grid gridColumn={{ sm: "auto" }} />
         // gridAutoFlow
         <Grid gridAutoFlow="auto" />
         <Grid gridAutoFlow={["auto", "1fr"]} />
+        <Grid gridAutoFlow={{ sm: "auto", md: "1fr" }} />
         // gridAutoRows
         <Grid gridAutoRows="auto" />
         <Grid gridAutoRows={["auto", "1fr"]} />
+        <Grid gridAutoRows={{ sm: "auto", md: "1fr" }} />
         // gridAutoColumns
         <Grid gridAutoColumns="auto" />
         <Grid gridAutoColumns={["auto", "1fr"]} />
+        <Grid gridAutoColumns={{ sm: "auto", md: "1fr" }} />
         // gridTemplateRows
         <Grid gridTemplateRows="auto" />
         <Grid gridTemplateRows={["auto", "1fr"]} />
+        <Grid gridTemplateRows={{ sm: "auto", md: "1fr" }} />
         // gridTemplateColumns
         <Grid gridTemplateColumns="auto" />
         <Grid gridTemplateColumns={["auto", "1fr"]} />
+        <Grid gridTemplateColumns={{ sm: "auto", md: "1fr" }} />
         // flex (responsive)
         <Box flex="1 1 auto" />
+        <Box flex={["1 1 auto"]} />
+        <Box flex={{ sm: "1 1 auto" }} />
         // justifySelf (responsive)
         <Box justifySelf="center" />
+        <Box justifySelf={["center"]} />
+        <Box justifySelf={{ sm: "center" }} />
         // alignSelf (responsive)
         <Box alignSelf="center" />
+        <Box alignSelf={["center"]} />
+        <Box alignSelf={{ sm: "center" }} />
         <Box border="1px solid" />
         <Box borderTop="1px solid" />
         <Box borderRight="1px solid" />
@@ -448,10 +490,19 @@ const test = () => (
         <Box borderRadius={4} />
         // position (responsive)
         <Box position="absolute" />
+        <Box position={["absolute"]} />
+        <Box position={{ sm: "absolute" }} />
         // zIndex
         <Box zIndex={2} />
         // top, right, bottom, left (responsive)
         <Box top="0" right="0" bottom="0" left="0" />
+        <Box top={["0"]} right={["0"]} bottom={["0"]} left={["0"]} />
+        <Box
+            top={{ sm: "0" }}
+            right={{ sm: "0" }}
+            bottom={{ sm: "0" }}
+            left={{ sm: "0" }}
+        />
         // boxShadow
         <Box boxShadow={1} />
         // backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat

From 9924356848bf972cb5fed7dd041728c37f9197e0 Mon Sep 17 00:00:00 2001
From: Adam Misiorny <adam.misiorny@gmail.com>
Date: Thu, 17 Jan 2019 20:13:12 +0100
Subject: [PATCH 2/2] Add missing line

---
 types/styled-system/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index a26a6d98b6..4ba8a04be8 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -44,7 +44,7 @@ export interface LowLevelStylefunctionArguments {
 export function style(args: LowLevelStylefunctionArguments): {[cssProp: string]: string};
 
 export type TLengthStyledSystem = string | 0 | number;
-export type ResponsiveValue<T> = T | Array<T | null>;
+export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
 
 /**
  * Converts shorthand margin and padding props to margin and padding CSS declarations