Required attrs type fixes for 6.1.9 not applied when using prop factory

[davidkarlsson]

Environment

System:

• OS: Windows 10 10.0.19045
• CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
• Memory: 8.60 GB / 31.91 GB

Binaries:

• Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
• Yarn: 4.1.1 - C:\Program Files\nodejs\yarn.CMD
• npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD

Reproduction

Required props set with attrs still has to be set again when using the component if you use a props factory function when setting the required props. So the fixes for this in #4288 that were released in 6.1.9 only seem to work if you don't use the props factory function when setting the values.

I've created a codesandbox that shows this issue here: https://codesandbox.io/p/sandbox/cool-sun-ss245l?file=%2Findex.tsx.

The repro can basically be boiled down to this:

const Div = styled.div<{ text: string }>``;
const HelloDiv = styled(Div).attrs((props) => ({
  text: 'Hello',
}))``;

const App = (): React.JSX.Element => {
  return <HelloDiv />;
};

which results in this error:

No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<Substitute<Omit<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "text"> & { ...; }, "ref"> & { ...; }, Partial<...>>, never>, void, void, {}, {}>): Element', gave the following error.
    Property 'text' is missing in type '{}' but required in type 'FastOmit<Substitute<FastOmit<Substitute<Omit<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "text"> & { ...; }, "ref"> & { ...; }, Partial<...>>, never>, FastOmit<...>>, keyof ExecutionProps>'.
  Overload 2 of 2, '(props: FastOmit<Substitute<Omit<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "text"> & { ...; }, "ref"> & { ...; }, Partial<...>>, never>): ReactNode', gave the following error.
    Property 'text' is missing in type '{}' but required in type 'FastOmit<Substitute<Omit<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "text"> & { ...; }, "ref"> & { ...; }, Partial<...>>, never>'.

The issue can be resolved by not using a props factory and instead just return an object directly but then you can't access props like the theme etc. when setting the attribute values.

Steps to reproduce

Create a styled component with required props and set them with attrs using a props factory and you still have to define them again with attributes when using the component.

Expected Behavior

I expected required props to not have to be set again in the component if they've been set in the object returned by the props factory function passed to attrs.

Actual Behavior

The required props have to be set again even if they've already been set by attrs using a props factory function (https://styled-components.com/docs/api#.attrs).