Current behavior:

When using Typescript, it seems it is still possible to assign incompatible values to the css property (the main one being assigning a class name by mistake)

const Sub = (props: { className?: string }) => {
  return (
    <>
      <div
        // this works as expected 👍
        className={props.className}
        css={[
          // 🙅 this should not compile
          props.className,
          css`
            min-height: 150px;
            background-color: lightblue;
          `,
        ]}
      >
        Hello there
      </div>
    </>
  );
};

I traced it back to the JSX namespace declaration where it is declared as an Interpolation.

I might be missing something but I would think the type for the css should rather be SerializedStyles | Array<SerializedStyles> | ((theme: Theme) => SerializedStyles).

I tried to tweak the definition locally and it indeed caught the issues. Was there a rationale to allow Interpolation?

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.1.5
• TS: 4.2.3