Add specs for nested media queries

spec/scss/media/interpolated/expected_output.css

@@ -0,0 +1,17 @@
+@media bar12 {
+  x {
+    y: z;
+  }
+}
+
+@media only screen and (min-width: 700px) and (max-width: 1920px) {
+  x {
+    y: z;
+  }
+}
+
+@media screen, print and (max-width: 300px) {
+  x {
+    y: z;
+  }
+}

spec/scss/media/interpolated/input.scss

@@ -0,0 +1,15 @@
+// You can interpolate into a media type.
+@media bar#{12} {x {y: z}}
+
+// Media queries should be reparsed after interpolation is resolved.
+@media #{"only screen"} and
+       #{"(min-width: 700px)"} and
+       #{"(max-width: "+"1920px)"} {
+  x {y: z}
+}
+
+// Queries don't have to fully parse before interpolation is resolved.
+@media scr#{"een, pri"}nt a#{"nd (max-width: 300px)"} {x {y: z}}
+
+
+

spec/scss/media/nesting/expected_output.css

@@ -0,0 +1,89 @@
+@media screen {
+  a {
+    b: c;
+  }
+}
+@media screen and (color) {
+  x {
+    y: z;
+  }
+}
+
+@media (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 screen {
+  a {
+    b: c;
+  }
+}
+
+@media not screen {
+  a {
+    b: c;
+  }
+}
+
+@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 screen {
+  a {
+    b: c;
+  }
+}
+
+@media only screen {
+  a {
+    b: c;
+  }
+}
+@media only screen and (color) {
+  x {
+    y: z;
+  }
+}

spec/scss/media/nesting/input.scss

@@ -0,0 +1,62 @@
+// 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}}
+}
+
+// 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}}
+}
+
+// Different features can be intersected.
+@media (max-width: 300px) {
+  a {b: c}
+  @media (min-width: 200px) {x {y: z}}
+}
+
+// Different media types *can't* be intersected, so they're eliminated.
+@media screen {
+  a {b: c}
+  @media print {x {y: z}}
+}
+
+// Likewise, there's no way to generate the intersection of these queries. We
+// could write `not screen and (color)`, but that actually means "neither
+// `screen` nor `(color)`" rather than "not `screen` but yes `(color)`.
+//
+// The latest spec allows us to generate `not screen and not (color)` here,
+// which would work, but no browsers support it yet.
+@media not screen {
+  a {b: c}
+  @media (color) {x {y: z}}
+}
+
+// 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` and `screen` is empty.
+@media not screen {
+  a {b: c}
+  @media screen {x {y: z}}
+}
+@media screen {
+  a {b: c}
+  @media not screen {x {y: z}}
+}
+
+// Unlike `not`, the `only` keyword is preserved through intersection.
+@media only screen {
+  a {b: c}
+  @media (color) {x {y: z}}
+}

spec/scss/media/nesting/options.yml

@@ -0,0 +1,3 @@
+---
+:todo:
+- libsass

spec/scss/media/script_features/expected_output.css

@@ -0,0 +1,11 @@
+@media only screen and (max-width: 3) and (min-width: 4) {
+  x {
+    y: z;
+  }
+}
+
+@media screen and (max-width: 3) and (min-width: 13) {
+  x {
+    y: z;
+  }
+}

spec/scss/media/script_features/input.scss

@@ -0,0 +1,9 @@
+$foo: 3;
+$bar: 4;
+// Media features are special-cased to allow raw script without interpolation.
+@media only screen and (max-width: $foo) and (min-width: $bar) {x {y: z}}
+
+// Not just variables, but full script
+$vals: 1 2 3;
+@media screen and (max-width: 1 + 2) and (min-width: 5 + 6 + nth($vals, 2)) {x {y: z}}
+