Typescript Type support for style objects

I’m working with React Typescript and Emotion. So far I have used template strings, but I’d like to gradually move to style objects. I’d like to be able to declare a style object, get type support from the editor, and then pass it to a css function, or a styled component. CSSProperties type by @types/react provides such support (only valid css properties could be keys). but emotion css function doesn’t accept parameters of that type. It does accept CSSObject (by Emotion), but that type accepts any key. The solution I currently use is:

export type CSSObj = Pick<CSSObject, keyof CSSProperties>

This works well. Is there a “native” emotion way to do this? If there isn’t, perhaps such a type could be added. I’d be happy to prepare a PR.

• emotion version: 9.2.12
• react version: 16.7

[thisissami]

Just one update: this is the type that I use, if anybody is curious.

import { CSSPropertiesWithMultiValues } from '@emotion/serialize';

export type CSSObj = CSSPropertiesWithMultiValues & { label?: string };

[Andarist]

So to sum it up - if this is still something that is problematic, please raise a PR against #1501. Other than that I don’t think there is anything else actionable here right now, so I’m going to close the issue to clean up the issue tracker.

Be sure though that we care about DX a lot so if this still somehow bothers you and you cannot raise a PR yourself then please open a new issue explaining the exact problem and ideally with proposed solution.