From 3dae126ebf70f68ea1aa2d2ff51e0a4b939f9fde Mon Sep 17 00:00:00 2001
From: Natalie Weizenbaum <nweiz@google.com>
Date: Thu, 6 Dec 2018 17:07:32 -0800
Subject: [PATCH] Add specs for merging media queries that contain "all and"

See sass/dart-sass#537
---
 spec/scss/media/nesting/merged/input.scss   | 14 +++++++
 spec/scss/media/nesting/merged/output.css   | 42 +++++++++++++++++++++
 spec/scss/media/nesting/retained/input.scss | 18 +++++++++
 spec/scss/media/nesting/retained/output.css | 38 +++++++++++++++++++
 4 files changed, 112 insertions(+)

diff --git a/spec/scss/media/nesting/merged/input.scss b/spec/scss/media/nesting/merged/input.scss
index 7f2cd1325b..e07edd6827 100644
--- a/spec/scss/media/nesting/merged/input.scss
+++ b/spec/scss/media/nesting/merged/input.scss
@@ -3,6 +3,9 @@
 @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
@@ -11,17 +14,28 @@
   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`.
diff --git a/spec/scss/media/nesting/merged/output.css b/spec/scss/media/nesting/merged/output.css
index 07824940d5..1f70d97fd9 100644
--- a/spec/scss/media/nesting/merged/output.css
+++ b/spec/scss/media/nesting/merged/output.css
@@ -8,6 +8,11 @@
     y: z;
   }
 }
+@media screen and (color) {
+  x {
+    y: z;
+  }
+}
 
 @media (color) {
   a {
@@ -20,6 +25,17 @@
   }
 }
 
+@media all and (color) {
+  a {
+    b: c;
+  }
+}
+@media screen and (color) {
+  x {
+    y: z;
+  }
+}
+
 @media (max-width: 300px) {
   a {
     b: c;
@@ -30,6 +46,27 @@
     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 {
@@ -41,6 +78,11 @@
     y: z;
   }
 }
+@media only screen and (color) {
+  q {
+    r: s;
+  }
+}
 
 @media not screen {
   a {
diff --git a/spec/scss/media/nesting/retained/input.scss b/spec/scss/media/nesting/retained/input.scss
index cecac7e7d3..d8c725c212 100644
--- a/spec/scss/media/nesting/retained/input.scss
+++ b/spec/scss/media/nesting/retained/input.scss
@@ -9,11 +9,29 @@
 @media not screen {
   a {b: c}
   @media (color) {x {y: z}}
+
+  // The "all and" prefix shouldn't change the semantics.
+  @media all and (color) {q {r: s}}
 }
 @media (color) {
   a {b: c}
   @media not screen {x {y: z}}
 }
+@media all and (color) {
+  a {b: c}
+  @media not screen {x {y: z}}
+}
+
+// The unification of these would be `screen and not (color)`, which isn't yet
+// supported.
+@media screen {
+  a {b: c}
+  @media not all and (color) {x {y: z}}
+}
+@media not all and (color) {
+  a {b: c}
+  @media screen {x {y: z}}
+}
 
 // `not screen and (color)` means `not (screen and (color))`, so it could still
 // overlap with just `screen` in the case of a screen media without color.
diff --git a/spec/scss/media/nesting/retained/output.css b/spec/scss/media/nesting/retained/output.css
index 82ce80d9f7..d7f0c06a4a 100644
--- a/spec/scss/media/nesting/retained/output.css
+++ b/spec/scss/media/nesting/retained/output.css
@@ -7,6 +7,11 @@
       y: z;
     }
   }
+  @media all and (color) {
+    q {
+      r: s;
+    }
+  }
 }
 
 @media (color) {
@@ -20,6 +25,39 @@
   }
 }
 
+@media all and (color) {
+  a {
+    b: c;
+  }
+  @media not screen {
+    x {
+      y: z;
+    }
+  }
+}
+
+@media screen {
+  a {
+    b: c;
+  }
+  @media not all and (color) {
+    x {
+      y: z;
+    }
+  }
+}
+
+@media not all and (color) {
+  a {
+    b: c;
+  }
+  @media screen {
+    x {
+      y: z;
+    }
+  }
+}
+
 @media not screen and (color) {
   a {
     b: c;