media queries with @include edge cases

[kwliou]

Input file:

@mixin foo {
  @media (width: 0px) {
    @content;
  }
}

@mixin bar {
  @media (height: 0px) {
    prop: val2;
  }
}

@include foo {
  selector {
    @include bar;
  }
}

baz {
  prop: val;
}

@include foo {
  selector {
    @extend baz;
  }
}

The incorrect output of libsass is:

@media (width: 0px) {
  @media (height: 0px) {
    selector {
      prop: val2; } } }

baz, selector {
  prop: val; }

@media (width: 0px) { }

The output of Sass 3.2.12 is:

DEPRECATION WARNING on line 25 of main.scss:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

@media (width: 0px) and (height: 0px) {
  selector {
    prop: val2; } }

baz {
  prop: val; }

[akhleung]

Looks like the fundamental issue is that nested media queries need to be combined with some boolean algebra. Closing this in favor of #185.