Allow to use nested media queries

[Yelakelly]

In CSS we can use nested media queries like these:

@media screen and (min-width:576px){
    .someClass {
        background: #eee;
    }
    @media only screen and (-webkit-min-device-pixel-ratio:1.3),only screen and (min--moz-device-pixel-ratio:1.3),only screen and (-o-min-device-pixel-ratio:2.6/2),only screen and (min-device-pixel-ratio:1.3),only screen and (min-resolution:124.8dpi),only screen and (min-resolution:1.3dppx){
        .someClass {
            background-size: #ccc;
        }
    }
}

It will be nice to have such feature. I know this one exists in styled components. You can write in such way:

   
    background-image: #eee;

    @media ${webkitDPR}, ${mozDPR}, ${operaDPR}, ${DPR}, ${DPI}, ${DPPX} {
      background: #ccc;
    }
  }```
  
But currently you can't add nested '@media' in vanilla. We should manually combine these.