Manager line-height per font-size with styled system

Question

Styled components has a compose utility to combine multiple Styled System functions in a single component. I want to compose the lineHeight and fontSize together based on the default array.

Instead of doing:

  <Heading type="h1"
     fontSize={[ 1, 2, 3 ]}
     lineHeight={[1 , 2, 3 ]}
     color={theme.colors.heading.tinted}
  >

I want to achieve only a font prop that has the fontSize and lineHeight combined.

<Heading type="h1"
     font={[ 1, 2, 3 ]}
     color={theme.colors.heading.tinted}
  >

Heading.jsx

const Element = styled('div')(
    space,
    color,
    compose(
        fontSize,
        lineHeight
    )
);

theme.js

const theme = {
    fontSizes: [11, 13, 16, 23, 29, 37, 47, 76, 97],
    lineHeights: ['12px', '12px', '12px', '32px', '32px', '40px', '48px', '56px', '72px', '80px', '104px']
}

Answer 1

I have created a codesandbox example with your requirements: Whole file is here: https://codesandbox.io/s/styled-component-basic-j3zpx

<Title font={[50, 45]}>
        This is a heading includes first array index for font size and second array for line height.

      </Title>

styled css:

export const Title = styled.h1`
  color: red;
  margin: 0;
  border: 1px solid black;
  ${props =>
    props.font &&
    css`
      font-size: ${props => (props.font[0] ? `${props.font[0]}px` : "20px")};
      line-height: ${props => (props.font[1] ? `${props.font[1]}px` : "30px")};
    `}
`;