Extraneous kebab-case warning for media queries

• emotion version: @emotion/core@10.0.6
• react version: react@16.8.0-alpha.1

Relevant code:

mq.sm = `@media (min-width: 800px)`

<div css={{
	[mq.sm]: {
		display: 'flex'
	}
}}>

What happened:

Error: Using kebab-case for css properties in objects is not supported. Did you mean @media (minWidth: 800px)?

Problem description: Emotion warns about kebab case on media queries but probably should not. Using a kebab-casing of the original media query ie (minWidth: 800px) does not work as intended.

Suggested solution: Relax the warning for media queries

[Andarist]

@corysimmons this is a different issue than reported originally here. And the warning you have received is sound - when using object styles you should use camel-cased properties. The same would have been reported for styled elements:

styled.div({
  'font-size': 16
})

[clight-fastly]

Ah, through the process in trying to create one I found that my media query value was undefined which caused the error. ie

<div css={{
	['@media (min-width 800px)']: undefined
}}/>

If the value is an object, there is no warning. The warning could perhaps be improved but I wouldn’t consider it a bug. Thank you.