Should not split media query blocks

[steadicat]

Single media query blocks in the source JS are currently split up into multiple blocks, one per selector, in the output CSS. This creates larger files and also potentially slows down browser rendering.

var x = cssInJS({
  foo: { margin: 10 },
  bar: { border: '2px solid black' },
  baz: { padding: '0 20px' },
  '@media only screen and (min-width: 500px)': {
    foo: { margin: 5 },
    bar: { border: '1px solid black' },
    baz: { padding: '0 10px' },
  }
});

becomes:

{
  .foo { margin: 10px }
  @media only screen and (min-width: 500px) {
    .foo { margin: 5px }
  }
  .bar { border: 2px solid black }
  @media only screen and (min-width: 500px) {
    .bar { border: 1px solid black }
  }
  .baz { padding: 0 20px }
  @media only screen and (min-width: 500px) {
    .baz { padding: 0 10px }
  }
}

instead of:

{
  .foo { margin: 10px }
  .bar { border: 2px solid black }
  .baz { padding: 0 20px }
  @media only screen and (min-width: 500px) {
    .foo { margin: 5px }
    .bar { border: 1px solid black }
    .baz { padding: 0 10px }
  }
}