The documentation of styled-components shows us the option to merge multiple arrow functions into one:

// go from this
const Button = styled.button`
  background-color: ${({ theme }) => theme.colors.blue};
  padding: ${({ hasSpacing }) => hasSpacing ? '10px 20px' : null};
`;


// to this
const Button = styled.button(({ theme, hasPadding }) => css`
  background-color: ${theme.colors.blue};
  padding: ${hasPadding ? '10px 20px' : null};
`);

I've seen both work in different projects, but was wondering if there is any reason to chose one above the other. To me it feels like preference, but is there also impact on performance, file size, amount of generated classes, or something else?