juice icon indicating copy to clipboard operation
juice copied to clipboard

Nested @media break css support

Open tpetry opened this issue 3 years ago • 3 comments

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>

tpetry avatar Dec 23 '21 11:12 tpetry

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

jrit avatar Dec 28 '21 01:12 jrit