Created overload of create styled which supports shouldForwardProp be…

[JakeGinnivan]

What: A potential solution to #1272

Why: Because shouldForwardProps is a runtime solution to something which is not supported in the type system

How: I have created an additional overload in the create styled function which forces shouldForwardProps to be a custom type guard.

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

If we like this solution I can add docs

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 28979b5

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 28979b5:

Sandbox	Source
Emotion	Configuration

[JakeGinnivan]

I added a new overload to prevent a breaking change of forcing the shouldForwardProp to be a type guard

[Andarist]

Does this cover the use case described in #1272? Is it possible to create a styled HTML element with custom shouldForwardProp in such a way that we prevent forwarding a certain prop X and thus we can specify a type for that X prop that is different than the one defined on JSX.IntrinsicElements[some_type].

Not sure what the best real-life example for this is but let's assume div & color prop - which has currently a string type - but we'd like to make it an array of strings.

[JakeGinnivan]

Yeah it will do. (edited since original post)

export const Box = styled('div', {
  shouldForwardProp: (propName): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> => propName !== 'color' 
})<{ color: string[] }>(props => ({
  color: props.color[0]
}))

;<Box color={['green']} />

Whatever the logic is for filtering out the props, they need to create a type guard of the same time. It's harder for omitting like above. Overall I think it's a good improvement over the casting

[Andarist]

Could you add this as a test case?

[JakeGinnivan]

@Andarist done

[Andarist]

Could you add a changeset for this? And ideally a short note in the docs?

[JakeGinnivan]

@Andarist done, also added overload for normal components too

[Andarist]

Unfortunately, you need to resolve conflicts on this one.

[JakeGinnivan]

@Andarist rebased