diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts index e14185d996..a7f0fc8f06 100644 --- a/types/styled-system/index.d.ts +++ b/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 // Ben McCormick @@ -12,6 +12,7 @@ // Sara F-P // Chris LoPresto // Pedro Duarte +// Dhalton Huber // 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) => any; scale?: Array; } @@ -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; diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx index b5ec71ae53..0dd95ffe1e 100644 --- a/types/styled-system/styled-system-tests.tsx +++ b/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;