From 752e56a1b3b48c6d8ddacd73c8f712430e60f615 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <jn.martinez110@gmail.com>
Date: Wed, 14 Dec 2016 16:19:32 -0800
Subject: [PATCH] feat: add rupture-no-conflict (#77)

---
 .gitignore                                  |  1 +
 no-conflict.styl                            |  2 +
 rupture/index.styl                          | 90 ++++++++++++++-------
 test/fixtures/expected/above.css            |  2 +-
 test/fixtures/expected/at.css               |  4 +-
 test/fixtures/expected/below.css            |  2 +-
 test/fixtures/expected/between.css          | 12 +--
 test/fixtures/expected/desktop.css          |  2 +-
 test/fixtures/expected/device.css           |  8 +-
 test/fixtures/expected/ems.css              | 20 ++---
 test/fixtures/expected/fallback-classes.css | 34 ++++----
 test/fixtures/expected/from.css             |  2 +-
 test/fixtures/expected/hd.css               |  2 +-
 test/fixtures/expected/mobile.css           |  2 +-
 test/fixtures/expected/named.css            | 10 +--
 test/fixtures/expected/orientation.css      | 30 +++----
 test/fixtures/expected/overlap.css          | 56 ++++++-------
 test/fixtures/expected/retina.css           | 22 ++---
 test/fixtures/expected/tablet.css           |  2 +-
 test/fixtures/expected/to.css               |  2 +-
 test/fixtures/orientation.styl              | 16 ++--
 test/fixtures/retina.styl                   |  2 +-
 22 files changed, 178 insertions(+), 145 deletions(-)
 create mode 100644 no-conflict.styl

diff --git a/.gitignore b/.gitignore
index 9daa824..37e0121 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+*.log
diff --git a/no-conflict.styl b/no-conflict.styl
new file mode 100644
index 0000000..d1bf5d5
--- /dev/null
+++ b/no-conflict.styl
@@ -0,0 +1,2 @@
+rupture-no-conlict = true
+@import 'rupture/rupture'
diff --git a/rupture/index.styl b/rupture/index.styl
index e601cb4..18b8d61 100644
--- a/rupture/index.styl
+++ b/rupture/index.styl
@@ -1,5 +1,6 @@
 base-font-size ?= 16px
 rasterise-media-queries ?= false
+rupture-no-conflict ?= false
 
 rupture = {
   rasterise-media-queries: rasterise-media-queries
@@ -103,7 +104,7 @@ create-fallback-class(selected, class)
 //   - +between(1, 300px) scale:custom
 //   - +between(200px, 4) custom:scale
 
-between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+rupture-between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   selected = selector()
 
   if -is-string(orientation)
@@ -141,120 +142,149 @@ between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientati
       for query in -density-queries(density)
         push(conditions, condition + ' and %s' % (query))
       condition = join(', ', conditions)
-    @media condition
+    @media ({condition})
       {block}
   if fallback-class
     +create-fallback-class(selected, fallback-class)
       {block}
 
-at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+between = rupture-between unless rupture-no-conflict
+
+rupture-at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+at = rupture-at unless rupture-no-conflict
+
+rupture-from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-above = from-width
+from-width = rupture-from-width unless rupture-no-conflict
+
+rupture-above = rupture-from-width
+above = rupture-from-width unless rupture-no-conflict
 
-to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+rupture-to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-below = to-width
+to-width = rupture-to-width unless rupture-no-conflict
 
-mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+rupture-below = rupture-to-width
+below = rupture-to-width unless rupture-no-conflict
+
+rupture-mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+mobile = rupture-mobile unless rupture-no-conflict
+
+rupture-tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+tablet = rupture-tablet unless rupture-no-conflict
+
+rupture-desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
+desktop = rupture-desktop unless rupture-no-conflict
+
+rupture-hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
   if -is-string(orientation)
     orientation = convert(orientation)
   if -is-string(density)
     density = convert(density)
-  +above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
+  +rupture-above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
     {block}
 
-density(density, orientation = null, fallback-class = null)
+hd = rupture-hd unless rupture-no-conflict
+
+rupture-density(density, orientation = null, fallback-class = null)
   selected = selector()
   if not (rupture.rasterise-media-queries)
     conditions = ()
     for query in -density-queries(density)
       condition = 'only screen and %s' % (query)
       if orientation
-        condition = condition + ' and (orientation: %s)' % (orientation)
+        condition = condition + ' and (orientation: %s)' % (unquote(orientation))
       push(conditions, condition)
     condition = join(', ', conditions)
-    @media condition
+    @media ({condition})
       {block}
     if fallback-class
       +create-fallback-class(selected, fallback-class)
         {block}
 
-pixel-ratio = density
+density = rupture-density unless rupture-no-conflict
+
+rupture-pixel-ratio = rupture-density
+pixel-ratio = rupture-density unless rupture-no-conflict
 
-retina(orientation = null, fallback-class = null)
-  +density('retina', orientation, fallback-class)
+rupture-retina(orientation = null, fallback-class = null)
+  +rupture-density('retina', orientation, fallback-class)
     {block}
 
-landscape(density = null, fallback-class = null)
+retina = rupture-retina unless rupture-no-conflict
+
+rupture-landscape(density = null, fallback-class = null)
   selected = selector()
   if not (rupture.rasterise-media-queries)
     if -is-string(density)
       density = convert(density)
     if density
-      +pixel-ratio(density, orientation: landscape, fallback-class)
+      +rupture-pixel-ratio(density, orientation: s('landscape'), fallback-class)
         {block}
     else
-      @media only screen and (orientation: landscape)
+      condition = "only screen and (orientation: landscape)";
+      @media ({condition})
         {block}
       if fallback-class
         +create-fallback-class(selected, fallback-class)
           {block}
 
-portrait(density = null, fallback-class = null)
+landscape = rupture-landscape unless rupture-no-conflict
+
+rupture-portrait(density = null, fallback-class = null)
   selected = selector()
   if not (rupture.rasterise-media-queries)
     if -is-string(density)
       density = convert(density)
     if density
-      +pixel-ratio(density, orientation: portrait, fallback-class)
+      +rupture-pixel-ratio(density, orientation: s('portrait'), fallback-class)
         {block}
     else
-      @media only screen and (orientation: portrait)
+      condition = "only screen and (orientation: portrait)";
+      @media ({condition})
         {block}
       if fallback-class
         +create-fallback-class(selected, fallback-class)
           {block}
+
+portrait = rupture-portrait unless rupture-no-conflict
diff --git a/test/fixtures/expected/above.css b/test/fixtures/expected/above.css
index a1eca4d..42f14d2 100644
--- a/test/fixtures/expected/above.css
+++ b/test/fixtures/expected/above.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 500px) {
+@media (only screen and (min-width: 500px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/at.css b/test/fixtures/expected/at.css
index 46d2048..9990cfb 100644
--- a/test/fixtures/expected/at.css
+++ b/test/fixtures/expected/at.css
@@ -1,12 +1,12 @@
 .hello {
   color: #f00;
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .hello {
     color: #fff;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) {
+@media (only screen and (min-width: 400px) and (max-width: 600px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/below.css b/test/fixtures/expected/below.css
index 385ad7e..fe6a783 100644
--- a/test/fixtures/expected/below.css
+++ b/test/fixtures/expected/below.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (max-width: 500px) {
+@media (only screen and (max-width: 500px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/between.css b/test/fixtures/expected/between.css
index 8466470..124cae5 100644
--- a/test/fixtures/expected/between.css
+++ b/test/fixtures/expected/between.css
@@ -1,32 +1,32 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 500px) and (max-width: 700px) {
+@media (only screen and (min-width: 500px) and (max-width: 700px)) {
   .hello {
     color: #00f;
   }
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .hello {
     color: #0f0;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px)) {
   .hello {
     color: #fff;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) {
+@media (only screen and (min-width: 400px) and (max-width: 600px)) {
   .hello {
     color: #000;
   }
 }
-@media only screen and (max-width: 500px) {
+@media (only screen and (max-width: 500px)) {
   .hello {
     color: #eee;
   }
 }
-@media only screen and (min-width: 200px) {
+@media (only screen and (min-width: 200px)) {
   .hello {
     color: #ccc;
   }
diff --git a/test/fixtures/expected/desktop.css b/test/fixtures/expected/desktop.css
index d015772..b9a8aed 100644
--- a/test/fixtures/expected/desktop.css
+++ b/test/fixtures/expected/desktop.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 1050px) {
+@media (only screen and (min-width: 1050px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/device.css b/test/fixtures/expected/device.css
index afd9974..157acc4 100644
--- a/test/fixtures/expected/device.css
+++ b/test/fixtures/expected/device.css
@@ -1,7 +1,7 @@
 .device {
   color: #f00;
 }
-@media only screen and (max-device-width: 600px) {
+@media (only screen and (max-device-width: 600px)) {
   .device {
     color: #00f;
   }
@@ -9,7 +9,7 @@
 .not-device {
   color: #f00;
 }
-@media only screen and (max-width: 600px) {
+@media (only screen and (max-width: 600px)) {
   .not-device {
     color: #00f;
   }
@@ -17,13 +17,13 @@
 .device-mixin {
   color: #f00;
 }
-@media only screen and (max-width: 600px) {
+@media (only screen and (max-width: 600px)) {
   .device-mixin {
     color: #00f;
     content: 'max-width';
   }
 }
-@media only screen and (max-device-width: 800px) {
+@media (only screen and (max-device-width: 800px)) {
   .device-mixin {
     color: #00f;
     content: 'max-device-width';
diff --git a/test/fixtures/expected/ems.css b/test/fixtures/expected/ems.css
index 63a6b58..8687d2b 100644
--- a/test/fixtures/expected/ems.css
+++ b/test/fixtures/expected/ems.css
@@ -1,52 +1,52 @@
 .thing {
   color: #f00;
 }
-@media only screen and (max-width: 30em) {
+@media (only screen and (max-width: 30em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 30em) {
+@media (only screen and (min-width: 30em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 31.25em) {
+@media (only screen and (min-width: 31.25em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (max-width: 31.25em) {
+@media (only screen and (max-width: 31.25em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 12.5em) and (max-width: 37.5em) {
+@media (only screen and (min-width: 12.5em) and (max-width: 37.5em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 25em) and (max-width: 37.5em) {
+@media (only screen and (min-width: 25em) and (max-width: 37.5em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (max-width: 25em) {
+@media (only screen and (max-width: 25em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 25em) and (max-width: 65.625em) {
+@media (only screen and (min-width: 25em) and (max-width: 65.625em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-width: 65.625em) {
+@media (only screen and (min-width: 65.625em)) {
   .thing {
     display: block;
   }
 }
-@media only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+@media (only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)) {
   .thing {
     display: block;
   }
diff --git a/test/fixtures/expected/fallback-classes.css b/test/fixtures/expected/fallback-classes.css
index c0e6d5e..0639da4 100644
--- a/test/fixtures/expected/fallback-classes.css
+++ b/test/fixtures/expected/fallback-classes.css
@@ -1,7 +1,7 @@
 .test-between {
   color: #f00;
 }
-@media only screen and (min-width: 500px) and (max-width: 700px) {
+@media (only screen and (min-width: 500px) and (max-width: 700px)) {
   .test-between {
     color: #00f;
   }
@@ -9,7 +9,7 @@
 .old-ie .test-between {
   color: #00f;
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .test-between {
     color: #0f0;
   }
@@ -17,7 +17,7 @@
 .old-ie .test-between {
   color: #0f0;
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px)) {
   .test-between {
     color: #fff;
   }
@@ -25,7 +25,7 @@
 .old-ie .test-between {
   color: #fff;
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) {
+@media (only screen and (min-width: 400px) and (max-width: 600px)) {
   .test-between {
     color: #000;
   }
@@ -33,7 +33,7 @@
 .old-ie .test-between {
   color: #000;
 }
-@media only screen and (max-width: 500px) {
+@media (only screen and (max-width: 500px)) {
   .test-between {
     color: #eee;
   }
@@ -41,7 +41,7 @@
 .old-ie .test-between {
   color: #eee;
 }
-@media only screen and (min-width: 200px) {
+@media (only screen and (min-width: 200px)) {
   .test-between {
     color: #ccc;
   }
@@ -52,7 +52,7 @@
 .test-at {
   color: #f00;
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .test-at {
     color: #fff;
   }
@@ -60,7 +60,7 @@
 .old-ie .test-at {
   color: #fff;
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) {
+@media (only screen and (min-width: 400px) and (max-width: 600px)) {
   .test-at {
     color: #00f;
   }
@@ -71,7 +71,7 @@
 .test-above {
   color: #f00;
 }
-@media only screen and (min-width: 500px) {
+@media (only screen and (min-width: 500px)) {
   .test-above {
     color: #00f;
   }
@@ -82,7 +82,7 @@
 .test-below {
   color: #f00;
 }
-@media only screen and (max-width: 500px) {
+@media (only screen and (max-width: 500px)) {
   .test-below {
     color: #00f;
   }
@@ -93,7 +93,7 @@
 .test-mobile {
   color: #f00;
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .test-mobile {
     color: #00f;
   }
@@ -104,7 +104,7 @@
 .test-tablet {
   color: #f00;
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px)) {
   .test-tablet {
     color: #00f;
   }
@@ -115,7 +115,7 @@
 .test-desktop {
   color: #f00;
 }
-@media only screen and (min-width: 1050px) {
+@media (only screen and (min-width: 1050px)) {
   .test-desktop {
     color: #00f;
   }
@@ -126,7 +126,7 @@
 .test-hd {
   color: #f00;
 }
-@media only screen and (min-width: 1800px) {
+@media (only screen and (min-width: 1800px)) {
   .test-hd {
     color: #00f;
   }
@@ -137,7 +137,7 @@
 .test-retina {
   color: #f00;
 }
-@media only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+@media (only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)) {
   .test-retina {
     color: #00f;
   }
@@ -148,7 +148,7 @@
 .test-landscape {
   color: #f00;
 }
-@media only screen and (orientation: landscape) {
+@media (only screen and (orientation: landscape)) {
   .test-landscape {
     color: #00f;
   }
@@ -159,7 +159,7 @@
 .test-portrait {
   color: #f00;
 }
-@media only screen and (orientation: portrait) {
+@media (only screen and (orientation: portrait)) {
   .test-portrait {
     color: #00f;
   }
diff --git a/test/fixtures/expected/from.css b/test/fixtures/expected/from.css
index 3baf77a..dc35c81 100644
--- a/test/fixtures/expected/from.css
+++ b/test/fixtures/expected/from.css
@@ -2,7 +2,7 @@
   background: linear-gradient(from bottom, #f8f8f8, #f4f4f4);
   color: #f00;
 }
-@media only screen and (min-width: 400px) {
+@media (only screen and (min-width: 400px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/hd.css b/test/fixtures/expected/hd.css
index 1171052..c5da042 100644
--- a/test/fixtures/expected/hd.css
+++ b/test/fixtures/expected/hd.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 1800px) {
+@media (only screen and (min-width: 1800px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/mobile.css b/test/fixtures/expected/mobile.css
index f65a7cc..9092b18 100644
--- a/test/fixtures/expected/mobile.css
+++ b/test/fixtures/expected/mobile.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/named.css b/test/fixtures/expected/named.css
index a33debf..5183a7e 100644
--- a/test/fixtures/expected/named.css
+++ b/test/fixtures/expected/named.css
@@ -1,27 +1,27 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px)) {
   .hello {
     color: #fff;
   }
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .hello {
     color: #00f;
   }
 }
-@media only screen and (min-width: 600px) {
+@media (only screen and (min-width: 600px)) {
   .hello {
     color: #000;
   }
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .hello {
     color: #0f0;
   }
 }
-@media only screen and (min-width: 1050px) and (max-width: 1800px) {
+@media (only screen and (min-width: 1050px) and (max-width: 1800px)) {
   .hello {
     color: #ccc;
   }
diff --git a/test/fixtures/expected/orientation.css b/test/fixtures/expected/orientation.css
index 22e1779..6111b25 100644
--- a/test/fixtures/expected/orientation.css
+++ b/test/fixtures/expected/orientation.css
@@ -1,77 +1,77 @@
 .hello {
   color: #f00;
 }
-@media only screen and (orientation: landscape) {
+@media (only screen and (orientation: landscape)) {
   .hello {
     color: #00f;
   }
 }
-@media only screen and (orientation: portrait) {
+@media (only screen and (orientation: portrait)) {
   .hello {
     color: #800000;
   }
 }
-@media only screen and (min-width: 500px) and (orientation: landscape) {
+@media (only screen and (min-width: 500px) and (orientation: landscape)) {
   .hello {
     color: #0f0;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) and (orientation: portrait) {
+@media (only screen and (min-width: 400px) and (max-width: 600px) and (orientation: portrait)) {
   .hello {
     color: #0ff;
   }
 }
-@media only screen and (max-width: 500px) and (orientation: landscape) {
+@media (only screen and (max-width: 500px) and (orientation: landscape)) {
   .hello {
     color: #f0f;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) and (orientation: portrait) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px) and (orientation: portrait)) {
   .hello {
     color: #ff0;
   }
 }
-@media only screen and (min-width: 1050px) and (orientation: landscape) {
+@media (only screen and (min-width: 1050px) and (orientation: landscape)) {
   .hello {
     color: #000;
   }
 }
-@media only screen and (min-width: 400px) and (orientation: portrait) {
+@media (only screen and (min-width: 400px) and (orientation: portrait)) {
   .hello {
     color: #fff;
   }
 }
-@media only screen and (max-width: 400px) and (orientation: landscape) {
+@media (only screen and (max-width: 400px) and (orientation: landscape)) {
   .hello {
     color: #008000;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) and (orientation: portrait) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px) and (orientation: portrait)) {
   .hello {
     color: #808080;
   }
 }
-@media only screen and (max-width: 600px) and (orientation: landscape) {
+@media (only screen and (max-width: 600px) and (orientation: landscape)) {
   .hello {
     color: #000080;
   }
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 144dpi) and (orientation: portrait) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 144dpi) and (orientation: portrait)) {
   .hello {
     color: #a52a2a;
   }
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 144dpi) and (orientation: portrait) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 144dpi) and (orientation: portrait)) {
   .hello {
     color: #a52a2a;
   }
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-resolution: 192dpi) and (orientation: landscape) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-resolution: 192dpi) and (orientation: landscape)) {
   .hello {
     color: #ffd700;
   }
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-resolution: 192dpi) and (orientation: landscape) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-resolution: 192dpi) and (orientation: landscape)) {
   .hello {
     color: #ffd700;
   }
diff --git a/test/fixtures/expected/overlap.css b/test/fixtures/expected/overlap.css
index 7082ace..41bcaa1 100644
--- a/test/fixtures/expected/overlap.css
+++ b/test/fixtures/expected/overlap.css
@@ -1,12 +1,12 @@
 .overlap-plus-em {
   text-align: center;
 }
-@media only screen and (min-width: 10.001em) and (max-width: 20em) {
+@media (only screen and (min-width: 10.001em) and (max-width: 20em)) {
   .overlap-plus-em {
     text-align: right;
   }
 }
-@media only screen and (min-width: 20.001em) and (max-width: 50em) {
+@media (only screen and (min-width: 20.001em) and (max-width: 50em)) {
   .overlap-plus-em {
     text-align: left;
   }
@@ -14,12 +14,12 @@
 .overlap-minus-em {
   text-align: center;
 }
-@media only screen and (min-width: 10em) and (max-width: 19.999em) {
+@media (only screen and (min-width: 10em) and (max-width: 19.999em)) {
   .overlap-minus-em {
     text-align: right;
   }
 }
-@media only screen and (min-width: 20em) and (max-width: 49.999em) {
+@media (only screen and (min-width: 20em) and (max-width: 49.999em)) {
   .overlap-minus-em {
     text-align: left;
   }
@@ -27,12 +27,12 @@
 .overlap-plus-rem {
   text-align: center;
 }
-@media only screen and (min-width: 10.001rem) and (max-width: 20rem) {
+@media (only screen and (min-width: 10.001rem) and (max-width: 20rem)) {
   .overlap-plus-rem {
     text-align: right;
   }
 }
-@media only screen and (min-width: 20.001rem) and (max-width: 50em) {
+@media (only screen and (min-width: 20.001rem) and (max-width: 50em)) {
   .overlap-plus-rem {
     text-align: left;
   }
@@ -40,12 +40,12 @@
 .overlap-minus-rem {
   text-align: center;
 }
-@media only screen and (min-width: 10rem) and (max-width: 19.999rem) {
+@media (only screen and (min-width: 10rem) and (max-width: 19.999rem)) {
   .overlap-minus-rem {
     text-align: right;
   }
 }
-@media only screen and (min-width: 20rem) and (max-width: 49.999em) {
+@media (only screen and (min-width: 20rem) and (max-width: 49.999em)) {
   .overlap-minus-rem {
     text-align: left;
   }
@@ -53,12 +53,12 @@
 .overlap-plus-px {
   text-align: center;
 }
-@media only screen and (min-width: 101px) and (max-width: 200px) {
+@media (only screen and (min-width: 101px) and (max-width: 200px)) {
   .overlap-plus-px {
     text-align: right;
   }
 }
-@media only screen and (min-width: 201px) and (max-width: 800px) {
+@media (only screen and (min-width: 201px) and (max-width: 800px)) {
   .overlap-plus-px {
     text-align: left;
   }
@@ -66,12 +66,12 @@
 .overlap-minus-px {
   text-align: center;
 }
-@media only screen and (min-width: 100px) and (max-width: 199px) {
+@media (only screen and (min-width: 100px) and (max-width: 199px)) {
   .overlap-minus-px {
     text-align: right;
   }
 }
-@media only screen and (min-width: 200px) and (max-width: 799px) {
+@media (only screen and (min-width: 200px) and (max-width: 799px)) {
   .overlap-minus-px {
     text-align: left;
   }
@@ -79,43 +79,43 @@
 .overlap-force {
   text-align: center;
 }
-@media only screen and (min-width: 401px) and (max-width: 600px) {
+@media (only screen and (min-width: 401px) and (max-width: 600px)) {
   .overlap-force {
     text-align: right;
   }
 }
-@media only screen and (min-width: 600px) and (max-width: 800px) {
+@media (only screen and (min-width: 600px) and (max-width: 800px)) {
   .overlap-force {
     text-align: left;
   }
 }
-@media only screen and (min-width: 801px)  {
+@media (only screen and (min-width: 801px))  {
   .overlap-force {
     text-align: justify;
   }
 }
-@media only screen and (max-width: 1050px) {
+@media (only screen and (max-width: 1050px)) {
   .overlap-force {
     border: 1px;
     content: 'we are going max-width, and overlap is positive, so wont change';
   }
 }
-@media only screen and (min-width: 1051px)  {
+@media (only screen and (min-width: 1051px))  {
   .overlap-force {
     text-align: justify;
   }
 }
-@media only screen and (min-width: 401px) and (max-width: 1050px) {
+@media (only screen and (min-width: 401px) and (max-width: 1050px)) {
   .overlap-force {
     font-weight: bold;
   }
 }
-@media only screen and (max-width: 400px) {
+@media (only screen and (max-width: 400px)) {
   .overlap-force {
     font-weight: normal;
   }
 }
-@media only screen and (min-width: 1051px) {
+@media (only screen and (min-width: 1051px)) {
   .overlap-force {
     font-style: italic;
   }
@@ -123,43 +123,43 @@
 .overlap-force-em {
   text-align: center;
 }
-@media only screen and (min-width: 25.0625em) and (max-width: 37.5em) {
+@media (only screen and (min-width: 25.0625em) and (max-width: 37.5em)) {
   .overlap-force-em {
     text-align: right;
   }
 }
-@media only screen and (min-width: 37.5em) and (max-width: 50em) {
+@media (only screen and (min-width: 37.5em) and (max-width: 50em)) {
   .overlap-force-em {
     text-align: left;
   }
 }
-@media only screen and (min-width: 50.0625em)  {
+@media (only screen and (min-width: 50.0625em))  {
   .overlap-force-em {
     text-align: justify;
   }
 }
-@media only screen and (max-width: 65.625em) {
+@media (only screen and (max-width: 65.625em)) {
   .overlap-force-em {
     border: 1px;
     content: 'we are going max-width, and overlap is positive, so wont change';
   }
 }
-@media only screen and (min-width: 65.6875em)  {
+@media (only screen and (min-width: 65.6875em))  {
   .overlap-force-em {
     text-align: justify;
   }
 }
-@media only screen and (min-width: 25.0625em) and (max-width: 65.625em) {
+@media (only screen and (min-width: 25.0625em) and (max-width: 65.625em)) {
   .overlap-force-em {
     font-weight: bold;
   }
 }
-@media only screen and (max-width: 25em) {
+@media (only screen and (max-width: 25em)) {
   .overlap-force-em {
     font-weight: normal;
   }
 }
-@media only screen and (min-width: 65.6875em) {
+@media (only screen and (min-width: 65.6875em)) {
   .overlap-force-em {
     font-style: italic;
   }
diff --git a/test/fixtures/expected/retina.css b/test/fixtures/expected/retina.css
index 124c947..932d239 100644
--- a/test/fixtures/expected/retina.css
+++ b/test/fixtures/expected/retina.css
@@ -1,57 +1,57 @@
 .hello {
   color: #f00;
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)) {
   .hello {
     color: #00f;
   }
 }
-@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) {
+@media (only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi)) {
   .hello {
     color: #800000;
   }
 }
-@media only screen and (min-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 500px) and (min-resolution: 192dpi) {
+@media (only screen and (min-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 500px) and (min-resolution: 192dpi)) {
   .hello {
     color: #0f0;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 600px) and (min-resolution: 192dpi) {
+@media (only screen and (min-width: 400px) and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 600px) and (min-resolution: 192dpi)) {
   .hello {
     color: #0ff;
   }
 }
-@media only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 500px) and (min-resolution: 192dpi) {
+@media (only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 500px) and (min-resolution: 192dpi)) {
   .hello {
     color: #f0f;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 192dpi) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 192dpi)) {
   .hello {
     color: #ff0;
   }
 }
-@media only screen and (min-width: 1050px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-width: 1050px) and (min-resolution: 96dpi) {
+@media (only screen and (min-width: 1050px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-width: 1050px) and (min-resolution: 96dpi)) {
   .hello {
     color: #000;
   }
 }
-@media only screen and (min-width: 400px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 400px) and (min-resolution: 120dpi) {
+@media (only screen and (min-width: 400px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 400px) and (min-resolution: 120dpi)) {
   .hello {
     color: #fff;
   }
 }
-@media only screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 400px) and (min-resolution: 124.8dpi) {
+@media (only screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 400px) and (min-resolution: 124.8dpi)) {
   .hello {
     color: #008000;
   }
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 144dpi) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 144dpi)) {
   .hello {
     color: #808080;
   }
 }
-@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 192dpi) {
+@media (only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 192dpi)) {
   .hello {
     color: #000080;
   }
diff --git a/test/fixtures/expected/tablet.css b/test/fixtures/expected/tablet.css
index 5c1224e..fbc1f0a 100644
--- a/test/fixtures/expected/tablet.css
+++ b/test/fixtures/expected/tablet.css
@@ -1,7 +1,7 @@
 .hello {
   color: #f00;
 }
-@media only screen and (min-width: 400px) and (max-width: 1050px) {
+@media (only screen and (min-width: 400px) and (max-width: 1050px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/expected/to.css b/test/fixtures/expected/to.css
index 57da30f..b16e2e7 100644
--- a/test/fixtures/expected/to.css
+++ b/test/fixtures/expected/to.css
@@ -2,7 +2,7 @@
   background: linear-gradient(to bottom, #f8f8f8, #f4f4f4);
   color: #f00;
 }
-@media only screen and (max-width: 600px) {
+@media (only screen and (max-width: 600px)) {
   .hello {
     color: #00f;
   }
diff --git a/test/fixtures/orientation.styl b/test/fixtures/orientation.styl
index e9590a3..a27646a 100644
--- a/test/fixtures/orientation.styl
+++ b/test/fixtures/orientation.styl
@@ -12,22 +12,22 @@ rupture.density-queries = 'webkit' 'dpi'
   +above(500px, orientation: 'landscape')
     color: lime
 
-  +at(2, orientation: portrait)
+  +at(2, orientation: 'portrait')
     color: cyan
 
-  +below(500px, orientation: landscape)
+  +below(500px, orientation: 'landscape')
     color: magenta
 
-  +between(2, 4, orientation: portrait)
+  +between(2, 4, orientation: 'portrait')
     color: yellow
 
-  +desktop(orientation: landscape)
+  +desktop(orientation: 'landscape')
     color: black
 
-  +from-width(2, orientation: portrait)
+  +from-width(2, orientation: 'portrait')
     color: white
 
-  +mobile(orientation: "landscape")
+  +mobile(orientation: 'landscape')
     color: green
 
   +tablet(orientation: 'portrait')
@@ -36,13 +36,13 @@ rupture.density-queries = 'webkit' 'dpi'
   +to-width(2, orientation: 'landscape')
     color: navy
 
-  +retina(orientation: portrait)
+  +retina(orientation: 'portrait')
     color: brown
 
   +portrait(density: 'retina')
     color: brown
 
-  +density(2, orientation: landscape)
+  +density(2, orientation: 'landscape')
     color: gold
 
   +landscape(density: '2')
diff --git a/test/fixtures/retina.styl b/test/fixtures/retina.styl
index d256d0c..016efce 100644
--- a/test/fixtures/retina.styl
+++ b/test/fixtures/retina.styl
@@ -16,7 +16,7 @@ rupture.retina-density = 2
   +at(2, density: 'retina')
     color: cyan
 
-  +below(500px, density: retina)
+  +below(500px, density: 'retina')
     color: magenta
 
   +between(2, 4, density: 'retina')