emotion: Types: Missing overload for default export from @emotion/styled ?

The problem

I wanted to generate types for rebass modules using the existing js files (for more details read the Additional Context section). But the way the rebass lib uses @emotion/styled doesn’t seem to be supported by the current types, when running tsc --declaration (with some other basic configuration to get everything together) the following error is reported:

src/index.js:50:28 - error TS2769: No overload matches this call. ...

I would love be able to add the missing overload to the types, but after looking at the nested modules the are involved I was kinda lost when reaching https://github.com/emotion-js/emotion/blob/master/packages/serialize/src/index.js#L342

My understanding of the argument types passed to styled in @rebass/reflexbox are

styled(
  string, // referring to one of JSX.IntrinsicElements keys
  propsToMerge // seems to be quite generic but has an impact on the props of the resulting component?
)(
  defaultPropsToBeTransformed // just a guess here, didn't check emotion code about it
  ...transformers // tons of functions 
  // looks like they are executed in the given order 
  // to modify the props after merging and before passing them to rendering?
)

Maybe these transformers are of type FunctionInterpolation but the allowed types would be Interpolation (from the same file)?

Proposed solution

Adding the missing overload to the types.

Alternative solutions

Help me to understand/find the related documentation so I can create a PR.

Additional context

The types for the main rebass module are “only” existing in DefinitelyTyped, are incomplete and hardly maintained and the types for other @rebass/* modules don’t exist as far as I know.

So I wanted to experiment if there is a(n “easy”) way to create and maintain the types by generating the definition files from the js source files. It’s possible to do that and since the underlying modules all offer types I was quite hopefull.

On the lowest level of rebass is @rebass/reflexbox so I started with it. (I pushed my changes to my fork: https://github.com/karfau/rebass/tree/generating-types)

Potentially related issues (I’m not sure):

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 3
Comments: 16 (9 by maintainers)

Commits related to this issue

package/reflexbox: initial setup for generating types + latest `typescript` as `devDependency` on the root level + `tsconfig.json` & types for dependencies per package + npm script `types` per packag... — committed to karfau/rebass by karfau 5 years ago
upgrading `@emotion/(core|styled) to next for fresh types as recommended in emotion-js/emotion#1640 has warnings when running `yarn` — committed to karfau/rebass by karfau 5 years ago

Most upvoted comments

While digging into it I’ve even encountered:

Type ‘CSSObject’ is not assignable to type ‘CSSObject’.

😅

That got me to realize there are 2 conflicting versions of csstype. I believe that last part (that props => props.css) should be rather easily typeable - it’s not any weird pattern. I need to analyze how our current typings are structured to fix this though, probably need to draw a dependency tree for them to see what depends on what and what is supposed to be used where. I don’t think this is that hard to do - just time-consuming 😒

Andarist on Nov 26, 2019

Ok, it makes sense - but it still doesn’t play OK with defined types because we want to target a styled component with this but this css is typed for a css prop.

I’m not entirely sure about this - but maybe you could add inline annotations (using comments - I think TS supports this) to cast this to any (for starters) and maybe try to type it to an expected type. Don’t have a better idea than this right now.

Because of mismatching versions of emotion in that repository with current v11 I had to do extra manual steps each time to get to that props.css problem (because I had to resolve mismatching problems first). I would prefer waiting for a v11 release (hopefully this month) and then trying to work this out when rebass starts using it.

Andarist on Dec 11, 2019

I’ve released 11.0.0-next.8 and it got better a little - but it fails on that props => props.css. I’m not sure if this is possible to work because it has an incompatible type. It gets inferred as this: https://github.com/emotion-js/emotion/blob/0362fd2dc691e9084cf8b7b59df15377cc60dfdd/packages/core/types/index.d.ts#L99 and it’s not compatible with this: https://github.com/emotion-js/emotion/blob/0362fd2dc691e9084cf8b7b59df15377cc60dfdd/packages/styled/types/base.d.ts#L74-L79

But I’m also not sure if you should try to compose it like this. I don’t know much about styled-system so maybe I’m missing something, but at least from emotion’s perspective, css prop is never passed to interpolations. It gets evaluated before that happens. So it is never receives in props.css

Andarist on Dec 11, 2019