From ddaaa2a7f89501aee518d6773b9422e63e3f9143 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 24 Aug 2017 21:25:19 -0400
Subject: [PATCH] Add support for object based custom media queries

---
 src/tailwind.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/tailwind.js b/src/tailwind.js
index ca1f0cedf..aef6e0664 100644
--- a/src/tailwind.js
+++ b/src/tailwind.js
@@ -27,9 +27,23 @@ function findMixin(css, mixin) {
 }
 
 function addCustomMediaQueries(css, breakpoints) {
+  function buildMediaQuery(breakpoint) {
+    if (_.isString(breakpoint)) {
+      breakpoint = { min: breakpoint }
+    }
+    return _(breakpoint).toPairs().map(([feature, value]) => {
+      feature = _.get({
+        min: 'min-width',
+        max: 'max-width',
+      }, feature, feature)
+
+      return `(${feature}: ${value})`
+    }).join(' and ')
+  }
+
   Object.keys(breakpoints).forEach(breakpoint => {
     const variableName = `--breakpoint-${breakpoint}`
-    const mediaQuery = `(min-width: ${breakpoints[breakpoint]})`
+    const mediaQuery = buildMediaQuery(breakpoints[breakpoint])
     const rule = postcss.atRule({
       name: 'custom-media',
       params: `${variableName} ${mediaQuery}`