A nested @media query can cause an outer query to be split unnecessarily

[yukulele]

If @media is nested in another @media, next @media are repeated.

Example:

input:

@media (min-width: 500px) {
    body{
        color: black;
        main{
            color:grey;
            @media (max-width: 1000px) {
                color: green;
            }
        }
        h1{
            color: red;
        }
        h2{
            color: blue;
        }
    }
}

output:

@media (min-width: 500px) {
  body {
    color: black;
  }
  body main {
    color: grey;
  }
}
@media (min-width: 500px) and (max-width: 1000px) {
  body main {
    color: green;
  }
}
@media (min-width: 500px) {
  body h1 {
    color: red;
  }
}
@media (min-width: 500px) {
  body h2 {
    color: blue;
  }
}

expected:

@media (min-width: 500px) {
  body {
    color: black;
  }
  body main {
    color: grey;
  }
}
@media (min-width: 500px) and (max-width: 1000px) {
  body main {
    color: green;
  }
}
@media (min-width: 500px) {
  body h1 {
    color: red;
  }
  body h2 {
    color: blue;
  }
}

[jathak]

The actual and expected output here should be equivalent as far as semantics go. Combining the two rules into one media query is probably more ideal, but making this cleaner is not something we're likely to have the bandwidth for.

If you really want to avoid these duplicate media queries, you could instead just move the nested query to the end of the outer one.

[nex3]

Duplicate of #777.