Can't reuse portions of styles in styled components

[ingver]

Current behavior:

When creating a styled component, Typescript compiler gives an error if providing a few variables of object-styles as arguments, while no errors occured when providing object literals (which types somehow inferred correctly). In first case compiler decides that the first argument should be of TemplateStringsArray type.

To reproduce:

Reproduced this kind of error in codesandbox
Lines 9 - 34

Expected behavior:

No errors should be occured while creating styled components both with untyped objects from variables and with object literals.

Environment information:

• react version: 16.8.6
• emotion version: 10.0.9

[Andarist]

This works "as expected" (not in terms of emotion, but TS itself).

TS has something called type widening, so your fooStyles has a type of {display: string, flexDirection:string} and that's too "broad" to satisfy CSSType because it rightfully uses enumerated strings for values of properties such as display and flexDirection.

Fortunately TS has introduced const assertions lately and you should be able to use this feature to make it work with:

const fooStyles = {
  display: 'flex',
  flexDirection: 'column'
} as const;