[styled-system] Fix definitions for mapProps and LowLevelStylefunctionArguments (#35265)

* Fix mapProps definition

* Test mapProps fix

* Fix LowLevelStyleFunctionArguments definition

* Test LowLevelStylefunctionArguments fix

types/styled-system/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for styled-system 4.1
+// Type definitions for styled-system 4.2
 // Project: https://github.com/jxnblk/styled-system#readme
 // Definitions by: Marshall Bowers <https://github.com/maxdeviant>
 //                 Ben McCormick <https://github.com/phobon>
@@ -12,6 +12,7 @@
 //                 Sara F-P <https://github.com/gretzky>
 //                 Chris LoPresto <https://github.com/chrislopresto>
 //                 Pedro Duarte <https://github.com/peduarte>
+//                 Dhalton Huber <https://github.com/Dhalton>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -38,9 +39,9 @@ export interface styleFn {
 export interface LowLevelStylefunctionArguments {
     prop: string;
     cssProperty?: string;
+    alias?: string;
     key?: string;
-    getter?: () => any;
-    transformValue?: (n: string | number) => any;
+    transformValue?: (n: string | number, scale: Array<string | number>) => any;
     scale?: Array<string | number>;
 }
 
@@ -52,7 +53,7 @@ export function compose(
     ...funcs: Array<(...args: any[]) => any>
 ): (...args: any[]) => any;
 
-export function mapProps(mapper: (...args: any[]) => any): (func: any[]) => (...props: any[]) => any;
+export function mapProps(mapper: (...args: any[]) => any): (func: any) => (...props: any[]) => any;
 
 export interface VariantArgs {
     key?: string;

types/styled-system/styled-system-tests.tsx

@@ -40,6 +40,7 @@ import {
     ColorProps,
     colorStyle,
     ColorStyleProps,
+    compose,
     display,
     DisplayProps,
     flex,
@@ -56,6 +57,7 @@ import {
     FontSizeProps,
     fontWeight,
     FontWeightProps,
+    get,
     gridAutoColumns,
     GridAutoColumnsProps,
     gridAutoFlow,
@@ -78,6 +80,7 @@ import {
     GridTemplateRowsProps,
     height,
     HeightProps,
+    is,
     justifyContent,
     JustifyContentProps,
     justifyItems,
@@ -90,8 +93,13 @@ import {
     LetterSpacingProps,
     lineHeight,
     LineHeightProps,
+    mapProps,
     margin,
+    marginBottom,
+    marginLeft,
     MarginProps,
+    marginRight,
+    marginTop,
     maxHeight,
     MaxHeightProps,
     maxWidth,
@@ -110,6 +118,7 @@ import {
     SizeProps,
     space,
     SpaceProps,
+    style,
     textAlign,
     TextAlignProps,
     TextColorProps,
@@ -656,6 +665,35 @@ export const themeC: Theme = {
     },
 };
 
+// Test that the mapProps definition is correct.
+// https://github.com/styled-system/styled-system/blob/master/src/index.js#L149
+const margins = mapProps(props => ({
+    ...props,
+    mt: is(props.my) ? props.my : props.mt,
+    mb: is(props.my) ? props.my : props.mb,
+    ml: is(props.mx) ? props.mx : props.ml,
+    mr: is(props.mx) ? props.mx : props.mr,
+}))(
+    compose(
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight
+    )
+  );
+
+// Test that the style definition is correct.
+// https://github.com/styled-system/styled-system/blob/master/src/index.js#L62
+const customFontSize = style({
+    prop: 'fontSize',
+    cssProperty: 'fontSize',
+    alias: 'fs',
+    key: 'fontSizes',
+    transformValue: (n, scale) => px(get(scale, n)),
+    scale: [8, 16, 32]
+});
+
 // All Style Functions contain `propTypes`
 export const alignContentPropTypes = alignContent.propTypes;
 export const alignItemsPropTypes = alignItems.propTypes;