<===> options.yml
---
:todo:
- sass/libsass#2695

<===> input.scss
// Media queries can be nested within one another. The intersection of the two
// queries will be generated.
@media screen {
  a {b: c}
  @media (color) {x {y: z}}

  // The "all and" prefix shouldn't change the semantics.
  @media all and (color) {x {y: z}}
}

// Features always go to the end of a query, even if they're at an outer nesting
// level.
@media (color) {
  a {b: c}
  @media screen {x {y: z}}
}
@media all and (color) {
  a {b: c}
  @media screen {x {y: z}}
}

// Different features can be intersected.
@media (max-width: 300px) {
  a {b: c}
  @media (min-width: 200px) {x {y: z}}
  @media all and (min-width: 200px) {q {r: s}}
}
@media all and (max-width: 300px) {
  a {b: c}
  @media (min-width: 200px) {x {y: z}}
  @media all and (min-width: 200px) {q {r: s}}
}

// Unlike `not`, the `only` keyword is preserved through intersection.
@media only screen {
  a {b: c}
  @media (color) {x {y: z}}
  @media all and (color) {q {r: s}}
}

// The intersection of `not screen` and `print` is just `print`.
@media not screen {
  a {b: c}
  @media print {x {y: z}}
}
@media print {
  a {b: c}
  @media not screen {x {y: z}}
}

// The intersection of `not screen` with `not screen and (color)` is the
// narrower `not screen and (color)`.
@media not screen {
  a {b: c}
  @media not screen and (color) {x {y: z}}
}
@media not screen and (color) {
  a {b: c}
  @media not screen {x {y: z}}
}

// The same is true if `print` has additional features.
@media not screen {
  a {b: c}
  @media print and (color) {x {y: z}}
}
@media print and (color) {
  a {b: c}
  @media not screen {x {y: z}}
}

// It's also true if `screen` has additional features.
@media not screen and (color) {
  a {b: c}
  @media print {x {y: z}}
}
@media print {
  a {b: c}
  @media not screen and (color) {x {y: z}}
}

// If a rule has multiple queries and they're all mergeable, merge them all as a
// cross-product.
@media screen, print {
  a {b: c}
  @media (color), (grid) {
    x {y: z};
  }
}

<===> output.css
@media screen {
  a {
    b: c;
  }
}
@media screen and (color) {
  x {
    y: z;
  }
}
@media screen and (color) {
  x {
    y: z;
  }
}

@media (color) {
  a {
    b: c;
  }
}
@media screen and (color) {
  x {
    y: z;
  }
}

@media all and (color) {
  a {
    b: c;
  }
}
@media screen and (color) {
  x {
    y: z;
  }
}

@media (max-width: 300px) {
  a {
    b: c;
  }
}
@media (max-width: 300px) and (min-width: 200px) {
  x {
    y: z;
  }
}
@media (max-width: 300px) and (min-width: 200px) {
  q {
    r: s;
  }
}

@media all and (max-width: 300px) {
  a {
    b: c;
  }
}
@media (max-width: 300px) and (min-width: 200px) {
  x {
    y: z;
  }
}
@media all and (max-width: 300px) and (min-width: 200px) {
  q {
    r: s;
  }
}

@media only screen {
  a {
    b: c;
  }
}
@media only screen and (color) {
  x {
    y: z;
  }
}
@media only screen and (color) {
  q {
    r: s;
  }
}

@media not screen {
  a {
    b: c;
  }
}
@media print {
  x {
    y: z;
  }
}

@media print {
  a {
    b: c;
  }
}
@media print {
  x {
    y: z;
  }
}

@media not screen {
  a {
    b: c;
  }
}
@media not screen and (color) {
  x {
    y: z;
  }
}

@media not screen and (color) {
  a {
    b: c;
  }
}
@media not screen and (color) {
  x {
    y: z;
  }
}

@media not screen {
  a {
    b: c;
  }
}
@media print and (color) {
  x {
    y: z;
  }
}

@media print and (color) {
  a {
    b: c;
  }
}
@media print and (color) {
  x {
    y: z;
  }
}

@media not screen and (color) {
  a {
    b: c;
  }
}
@media print {
  x {
    y: z;
  }
}

@media print {
  a {
    b: c;
  }
}
@media print {
  x {
    y: z;
  }
}

@media screen, print {
  a {
    b: c;
  }
}
@media screen and (color), screen and (grid), print and (color), print and (grid) {
  x {
    y: z;
  }
}