fix: improve types for .attrs()

[uhyo]

closes #4076
closes #4138
closes #4183

Hello, the above issue is blocking us from upgrading to v6, so here is a possible fix.

Improvement

The improvement brought by this PR can be seen in this example:

  const DivWithRequiredFooBar = styled.div<{ foo: number; bar: string }>``;

  // foo is provided, so it becomes optional
  const DivWithRequiredBar = styled(DivWithRequiredFooBar).attrs({ foo: 42 })`
    margin; ${props => props.foo * 10}px;
  `;
  // @ts-expect-error must provide bar
  <DivWithRequiredBar />;
  // OK (NEW)
  <DivWithRequiredBar bar="3" />;
  // OK. Can still provide foo if we want
  <DivWithRequiredBar foo={3} bar="3" />;
  // @ts-expect-error foo must be a number
  <DivWithRequiredBar foo="3" bar="3" />;

The part marked as (NEW) is made possible by this PR. Once foo is provided through the .attrs call, the resulting component (DivWithRequiredBar) no longer requires foo as a prop.

Implementation

To achieve this, the Styled interface now has distinction between Outer props and Inner props:

  const DivWithRequiredBar = styled(DivWithRequiredFooBar).attrs({ foo: 42 })`
    // ↓ `props` here is the inner props which have undergone the defaulting,
    // so `props.foo` is always supplied (not optional)
    margin; ${props => props.foo * 10}px;
  `;
  // User of the resulting component sees the outer props,
  // so foo is optional here
  <DivWithRequiredBar bar="3" />;

Thus the Styled interface now has new InnerProps type attribute. It is usually same as OuterProps, but the updated attrs() types can make them diverge.

[quantizor]

This looks really good!