Typing of white-space

[e11en]

• emotion version: 9.2.4
• react version: 16.4.0
• react-emotion version: 9.2.4

When using a mixin to fill my styled component the variable needs to be whitespace (lower case S) while in the normal use of white-space I need to use whiteSpace (upper case S). I was banging my head for a while trying to fix the error it produced. I think the typing somewhere needs to be fixed.

export const nowrap = {
  whitespace: 'nowrap'
};

// With use of mixin
const Container = styled('div')(({theme}: {theme: Theme}) => ({
     ...nowrap
}));

// Normal use without mixin
const Container = styled('div')(({theme}: {theme: Theme}) => ({
     whiteSpace: 'nowrap'
}));

export const StyledDiv = compose<any, any>(
  withTheme()
)(Container);

[Ailrun]

Which one do you use? TS or Flow?

[e11en]

Typescript

[Ailrun]

Then it's because you didn't put exact type.
whiteSpace accepts some specific strings only, where TS infer { whiteSpace: string } for your use case. Giving appropriate type will fix this.

[e11en]

I don't understand your comment. The whole point is that the typing isn't correct when I use a mixin. The type should be whiteSpace but it only works with whitespace.

[Ailrun]

@e11en whitespace works since typing should accept any string key since there is something like & > &, & > span, ... and so on (and even CSS variables!).
If my previous comment is not understandable to you, just check following example TS code.
TS playground

It's just how TS type interference works.

[Ailrun]

microsoft/TypeScript#29510
This TS feature will help you to solve this issue in an easier way.

[Andarist]

As described - to fix the issue you need to use const assertions to narrow down the type from string to a concrete string. This is not an issue specific to emotion itself - it's just a TS stuff.