Support nested media queries about postcss-cssnext HOT 6 CLOSED

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;
  }
}

from postcss-cssnext.

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

from postcss-cssnext.

yes, i think it's really cool feature

from postcss-cssnext.

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.

from postcss-cssnext.

That markup will work fine in postcss-nesting.

from postcss-cssnext.

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

from postcss-cssnext.