Add type for as prop on styled components

[connor-baer]

Closes #1137.

What: Add basic type for the as prop on styled components.

Why: If I add as to my component's ExtraProps the TypeScript compiler complains about the as prop not existing on the styled component (see #1137 for a full reproduction).

How: Add the as prop to the CreateStyled instance in packages/styled/types/base.d.ts

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 1687cf3

We got this.

This PR includes changesets to release 6 packages

Name	Type
@emotion/styled	Major
@emotion/react	Major
@emotion/jest	Major
@emotion/primitives-core	Major
@emotion/native	Major
@emotion/primitives	Major

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 1687cf3:

Sandbox	Source
Emotion	Configuration
ancient-shape-4kj9u	Issue #1137

[connor-baer]

This is my first time contributing to Emotion. I have a couple of questions:

1. How do I know which packages to include in the changeset? Do I only bump the package I changed (@emotion/styled) and changeset will bump the packages that depend on it as well?
2. Would this change to the types be considered a breaking change? Can I backport it to v10?

[connor-baer]

Also not sure if I need to add the type on lines 109, 114, and 123 as well.

Edit: After looking at the code again, I've concluded that it needs to be added there as well.

[Andarist]

How do I know which packages to include in the changeset? Do I only bump the package I changed (@emotion/styled) and changeset will bump the packages that depend on it as well?

Just think about for which packages your changes were relevant - this sometimes might include dependents of a package, but sometimes not. In the case of @emotion/styled there are no dependents so there is no problem with deciding that 😉

Would this change to the types be considered a breaking change? Can I backport it to v10?

Honestly, I would prefer not to touch v10 at all, and even more so its types as they are somewhat convoluted. I'm in the process of handling all open issues/PRs so we can ship v11 as soon as possible. V11 doesn't include many substantial breaking changes so I hope the migration should be pretty straightforward.

If you manage to backport it to v10 I will consider merging it though (if we decide to merge this one into v11).

---

Sorry for a late review, I'm quite busy and tired lately.

@JakeGinnivan this doesn't provide super strict typings for as prop, but I guess this is fine to merge. WDYT?

[connor-baer]

Thanks for the notes @Andarist! I've added the changeset.

I'm okay to only include this in v11. Backporting to v10 doesn't look too difficult though based on @JakeGinnivan's comment, so if others are interested, I'd be happy to take care of that, too.

[Andarist]

Sorry that it took so long to merge this. Thank you very much for doing preparing this PR @connor-baer ❤️

[Andarist]

I've discovered one flaw of this approach - as became available within interpolations when most of the time it shouldn't. Any ideas on how to solve this? The only thing that comes to my mind is adding an additional overload for props that are not meant to be available in interpolations & are not meant to be forwarded by default. This complicates the API - so maybe it's not worth fixing at all? cc @JakeGinnivan