Emotion css parser does not support selectors over multiple lines

[einarlove]

• emotion version: 8.0.10
• react version: 16.2.0

Relevant code

css`
  .my-class:hover
  .its-child {
    background: pink;
  }
`

Outputs

.my-class:hover;
.its-child { background: pink; }

Expected

.my-class:hover .its-child { background: pink; }

In the CSS spec you can have selectors over multiple lines, but in my experience emotion does not.
This gets even more problematic when Prettier formats the code to be within set line width.

[thysultan]

Related to the default auto semi-colon insertion mode(configurable) in stylis #74.

[greggb]

I know this is already being looked into, but in this instance wrapping your child in brackets would solve the issue and be more clear about how the rule will apply.

In:

css`
  .myClass:hover {
      .itsChild {
        background: pink;
      }
  }
`

Out:

.myClass:hover .itsChild {
    background: pink;
}