overflowY throws TypeScript error and won't compile

[itzsaga]

• emotion version: ^10.0.5
• react version: ^16.7.0

Relevant code:

/** @jsx jsx */
import { jsx } from "@emotion/core";
export const jsxBabelFix = jsx;
import React, { Component } from "react";

const Terms = () => (
  <div css={styles.tosContainer}>
    <p>Terms go here</p>
  </div>
);

const styles = {
  tosContainer: {
    height: "50vh",
    overflowY: "scroll"
  }
}

What you did:
Tried to add an overflow-y css style.

What happened:
TypeScript won't compile:

Type error: Type '{ height: string; overflowY: string; }' is not assignable to type 'InterpolationWithTheme<any>'.
  Type '{ height: string; overflowY: string; }' is not assignable to type 'ObjectInterpolation<undefined>'.
    Types of property 'overflowY' are incompatible.
      Type 'string' is not assignable to type '"auto" | "inherit" | "hidden" | "visible" | "scroll" | "-moz-initial" | "initial" | "revert" | "unset" | "clip" | OverflowXProperty[] | undefined'.  TS2322

Reproduction:
CRA TypeScript, add the above code in a .tsx file.

Problem description:
TypeScript won't compile with an overflow-y property. When I looked at the definition it was from Emotion so I figured I'd raise it.

Suggested solution:
For now kebab-case "overflow-y" and it works.

[IllusionMH]

It is not a problem with emotion itself, but TS behavior.
Since you don't have types for styles constant, TS tries to infer them(and I suppose that type widening also happens here).
If you hover over styles you'll see (if your editor supports it)

const styles: { tosContainer: { height: string; overflowY: string; }; }

As you can see overflowY inside your object ahs type string, while emotion's (exported from csstype end extended) typings has limited list of possible values.

---

Possible solutions:

1. Specify type for styles constant

import { jsx, CSSObject } from "@emotion/core";
//            ^^^^^^^^^

// and later

const styles: Record<string, CSSObject> = { // you should specify list of keys ( e.g. Record<'tosContainer' | 'otherContainer', CSSObject>) to restore proper suggestions on `styles` object.
  tosContainer: {
    height: "50vh",
    overflowY: "scroll",
    overflowX: "wrongScroll" // error here, instead of `css` property on component
  }
};

2. Using as to prevent widening form 'scroll' to string

const styles = {
  tosContainer: {
    height: "50vh",
    overflowY: "scroll" as "scroll" // will require same action for each param
  }
}

P.S. Looks like there is another similar case with a good description #1129 (comment)

P.P.S. (haven't seen that was closed while editing) "overflow-y" works because it isn't properly type checked (not sure exactly why), but this is minimal repro

const styles: CSSObject = {
  height: "50vh",
  overflowY: "wrongScroll", // Error: Type '"wrongScroll"' is not assignable to type '"clip" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "hidden" | "visible" | "scroll" | OverflowXProperty[]'.
  "overflow-y": wrongScroll' // No Error
};

[itzsaga]

Thanks @IllusionMH! Learned some new things today.