[css-nesting] nesting @media queries

[cyberalien]

CSS nesting spec is nice and clean. Good job on spec. However it doesn't cover major part of what makes sass/less so useful: ability to add media queries to current selector.

I suggest to add possibility of nested media queries, like this:

.foo {
  color: red;
  @media (min-width: 20rem) {
    color: blue;
  }
}

that would be equivalent of:

.foo {
  color: red;
}
@media (min-width: 20rem) {
  .foo {
    color: blue;
  }
}

Nesting media queries inside media queries would match both queries:

.foo {
  color: red;
  @media (min-width: 20rem) {
    color: blue;
    @media (max-width: 30rem) {
      color: green;
    }
  }
}

would be equivalent of

.foo {
  color: red;
}
@media (min-width: 20rem) {
  .foo {
    color: blue;
  }
}
@media (min-width: 20rem) and (max-width: 30rem) {
  .foo {
    color: green;
  }
}

[gilbert]

Any updates on this?

[exdeniz]

Any progress for add to spec? New polyfill postcss-preset-env use plugin https://github.com/jonathantneal/postcss-nesting and author remove nested media until this is added to the specification.

[brunoais]

@tabatkins Any reasons why this was not made or accepted?