Nested @media break css support

[tpetry]

The CSS3 spec allows nested media queries, but juice has problems handling them. The closing bracket is lost after transformation.

Input:

<style type="text/css">
@media (min-width: 640px) {
  .sm\:container {
    width: 100%
  }

  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px
    }
  }
}

p {
    background-color: red;
}
</style>
<p>Test123</p>

Result:

Error: Unexpected } (line 12, char 1)

<style type="text/css">
@media (min-width: 640px) {
  .sm\:container {
    width: 100%
  }

  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px
    }
  }

p {
    background-color: red;
}
</style>
<p style="background-color: red;">Test123</p>

[jrit]

thanks for the suggestion, would love a PR to make this work.

[filoscoder]

I think this will solve it
#442

[gieoon]

I've made a PR for this. Hopefully it gets through and mensch gets updated.
The issue isn't with SASS syntax, but with closing brackets not getting parsed properly. With that said, a different parser might be able to handle this issue more effectively.