Support nested media queries

[MoOx]

Nested media queries are working on latest Firefox, Chrome & Safari 8, but not on IE.

We should make this work by moving rules into new media queries using and.

http://jsbin.com/kafoxi/1/edit

[lyzadanger]

You can also nest @supports per the conditional module that covers nesting @media (any combination can be nested): http://dev.w3.org/csswg/css-conditional-3/

http://jsbin.com/xoqeso/2/edit

[idoo]

yes, i think it's really cool feature

[Semigradsky]

Silly example (https://jsbin.com/sakuxiz/edit?css,output):

@media screen {
  html {
    background: yellow;  
  }

  @media (max-width: 1100px) {
    html, body {
      background: green
    }
  }  

  body {
    background: red;
  }
}

We can't move media without ruining styles.

[MoOx]

What about transforming this to that

html, body { height: 100%; }

@media screen {
  html {
    background: yellow;  
  }
}
@media screen and (max-width: 1100px) {
  html, body {
    background: green
  }
}  
@media screen {
  body {
    background: red;
  }
}

[jonathantneal]

That markup will work fine in postcss-nesting.

[MoOx]

postcss-cssnext has been deprecated in favor or postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/