Emotion: Object syntax do not work for some rules in spreaded in styles

[lamtranweb]

Current behavior:

const okStyles = () => {
  return {
    fontSize: "4rem" // <------------- this rule does not cause any Typescript error
  };
};

const bugStyles = () => {
  return {
    pointerEvents: "none" // <--------- this rule somehow caused the Typescript error, comment it to see the error going away
  };
};

const StyledLabel = styled.label({
  color: "red", // <-------------- Typescript error here

  ...okStyles(),
  ...bugStyles()
});

Error is:

Argument of type '{ pointerEvents: string; fontSize: string; color: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Object literal may only specify known properties, and 'color' does not exist in type 'TemplateStringsArray'.ts(2345)

When I am spreading styles into styled's object syntax, certain CSS rules cause the existing styles in the styled object to throw Typescript error. pointerEvents causes the problem in this case, but I've observed others as well.

To reproduce:
https://codesandbox.io/s/emotion-bug-p009n

Expected behavior:
No Typescript errors

Environment information:
"@emotion/core": "10.0.14",
"@emotion/styled": "10.0.14",
"react": "16.8.4",

[Andarist]

https://github.com/emotion-js/emotion/issues/1373#issuecomment-498059774

You can correct this with:

const bugStyles = () => {
  return {
    pointerEvents: "none" as "none"
  };
};

[lamtranweb]

thanks!