Emotion: Incorrect TypeScript errors about a missing css prop

[TejasQ]

Current Behavior:

The error we're seeing is this:

This _may be_ a duplicate of https://github.com/emotion-js/emotion/issues/693 but I'm not yet convinced because we're on newer versions of all of these:

https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/package.json#L158

https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/package.json#L75

https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/package.json#L76

and we still see this odd error in TypeScript.

I'm not entirely sure why.

To Reproduce
Click View Code here

The component's source code is:
https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/src/Typography/FinePrint/index.tsx#L3-L13

Expected behavior:
Clean compilation.

Environment information:

• react version:
  https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/package.json#L86

• emotion version:
  https://github.com/contiamo/operational-ui/blob/7f3a10e1e24ff04b90a54940644d3c9340ebaa1c/package.json#L75

[Andarist]

Have you experienced this problem before with emotion@10 or have you just upgraded to version 10 and it has popped up?

[TejasQ]

It started after moving to emotion 10.

[pete-redmond-cko]

I am also getting this error when using @emotion/styled@^10.0.14 with Typescript

const ClickableElement = styled.button`
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;

  &:focus {
    outline: 2px solid rgba(42, 171, 130, 0.5);
  }
`;

<ClickableElement onClick={onClose}>
  Click here
</ClickableElement>

And the TS issue I get is

Property 'css' is missing in type '{ children: Element; onClick: any; }' but required in type 'Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "hidden" | "style" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 257 more ... | "formTarget">'.ts(2741)

[Andarist]

Could you prepare an isolated repository with the issue reproduced? I'm trying to reproduce this in our repo and can't do it, also css prop is defined everywhere as optional - so not sure how this could happen.

[danieldelcore]

I'm also bumping into this issue.
Not entirely sure about the cause, but i _think_ it can be replicated when using a Pick or Omit (which depends on Pick).

In my case, I have some code doing the following:

export interface OnlyButtonProps {
  children?: React.ReactNode;
}

export type ButtonProps = OnlyButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>;

For me the error only appears when i build, not sure why 🤷‍♂

I'll try and get a rerpo

[niekert]

I ran into the same issue today while I was working on a package where I was importing components from another package that were created (and typed) as styled() components from @emotion/styled, all on version 10.0.17.

The issue went away after adding a import '@emotion/core' to the index.ts file of my package. I think the problem resided in the fact that the type definitions to support the css prop would otherwise not be properly resolved by TypeScript somehow.

[Andarist]

Typings are currently getting a serious makeover in https://github.com/emotion-js/emotion/pull/1501 and we plan to rethink how the theme can be typed. Closing this to clear up the issue tracker, but if you are interested in this please follow that PR, give your feedback if necessary and stay tuned for upcoming changes!