feat: add rupture-no-conflict (#77)

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+*.log

no-conflict.styl

@@ -0,0 +1,2 @@
+rupture-no-conlict = true
+@import 'rupture/rupture'

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

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;
   }

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;
   }

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;
   }

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;
   }

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;
   }

test/fixtures/expected/device.css

@@ -1,29 +1,29 @@
 .device {
   color: #f00;
 }
-@media only screen and (max-device-width: 600px) {
+@media (only screen and (max-device-width: 600px)) {
   .device {
     color: #00f;
   }
 }
 .not-device {
   color: #f00;
 }
-@media only screen and (max-width: 600px) {
+@media (only screen and (max-width: 600px)) {
   .not-device {
     color: #00f;
   }
 }
 .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';

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;
   }