Emotion: Not closing CSS block when nesting @supports and @media queries

[GHaberis]

• emotion version: 9.0.2
• react version: 16.2.0

Relevant code:

const Elem = styled('div')({
  '@media (min-width: 980px)': {
    backgroundColor: 'blue',
    '@supports (width: 100vw)': {
        backgroundColor: 'red'
    }
  }
});

What you did:

I attempted to nest a CSS feature query inside a media query.

What happened:

The generated CSS in the head did not include a closing curly brace for the media-query block.

@media (min-width: 980px) {
    .css-1ihoyw2 {
        background-color:blue;
    }
    @supports (width: 100vw) {
        .css-1ihoyw2 {
            background-color:red;
        }
    }
// } <---- NOT IN GENERATED CSS

Suggested solution:

I'd expected the media-query block to wrap the feature-query block in the generated styled.

[GHaberis]

@mitchellhamilton thanks!