From 09a56e794f9c6e59e0dc39806d6ed779b1949121 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 13 Oct 2017 11:39:55 -0400
Subject: [PATCH] Rename 'breakpoint' features to 'screens', support for 'raw'
 key

---
 src/defaultConfig.js                          |  2 +-
 src/generators/container.js                   |  4 +-
 src/index.js                                  |  4 +-
 src/lib/substituteResponsiveAtRules.js        |  6 +--
 ...tAtRules.js => substituteScreenAtRules.js} | 10 ++---
 src/util/buildMediaQuery.js                   | 38 ++++++++++---------
 src/util/mergeConfig.js                       |  2 +-
 7 files changed, 35 insertions(+), 31 deletions(-)
 rename src/lib/{substituteBreakpointAtRules.js => substituteScreenAtRules.js} (50%)

diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index b7420e75b..2f5602746 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -49,7 +49,7 @@ const colors = {
 
 export default {
   colors,
-  breakpoints: {
+  screens: {
     sm: '576px',
     md: '768px',
     lg: '992px',
diff --git a/src/generators/container.js b/src/generators/container.js
index d7c1c0dbb..3774dd912 100644
--- a/src/generators/container.js
+++ b/src/generators/container.js
@@ -20,8 +20,8 @@ function extractMinWidths(breakpoints) {
   })
 }
 
-export default function ({ breakpoints }) {
-  const minWidths = extractMinWidths(breakpoints)
+export default function ({ screens }) {
+  const minWidths = extractMinWidths(screens)
 
   const atRules = _.map(minWidths, (minWidth) => {
     const atRule = postcss.atRule({
diff --git a/src/index.js b/src/index.js
index a4404fde5..d229dd6c4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,7 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
-import substituteBreakpointAtRules from './lib/substituteBreakpointAtRules'
+import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 
 const plugin = postcss.plugin('tailwind', (options = {}) => {
@@ -23,7 +23,7 @@ const plugin = postcss.plugin('tailwind', (options = {}) => {
     generateUtilities(config),
     substituteHoverableAtRules(config),
     substituteResponsiveAtRules(config),
-    substituteBreakpointAtRules(config),
+    substituteScreenAtRules(config),
     substituteClassApplyAtRules(config),
     stylefmt,
   ])
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index e58e9825c..dd8689623 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -14,16 +14,16 @@ export default function(options) {
       atRule.remove()
     })
 
-    Object.keys(options.breakpoints).forEach(breakpoint => {
+    Object.keys(options.screens).forEach(screen => {
       const mediaQuery = postcss.atRule({
         name: 'media',
-        params: buildMediaQuery(options.breakpoints[breakpoint]),
+        params: buildMediaQuery(options.screens[screen]),
       })
 
       mediaQuery.append(
         rules.map(rule => {
           const cloned = rule.clone()
-          cloned.selectors = _.map(rule.selectors, selector => `.${breakpoint}\\:${selector.slice(1)}`)
+          cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`)
           return cloned
         })
       )
diff --git a/src/lib/substituteBreakpointAtRules.js b/src/lib/substituteScreenAtRules.js
similarity index 50%
rename from src/lib/substituteBreakpointAtRules.js
rename to src/lib/substituteScreenAtRules.js
index ec2f63a04..67d9de910 100644
--- a/src/lib/substituteBreakpointAtRules.js
+++ b/src/lib/substituteScreenAtRules.js
@@ -7,15 +7,15 @@ export default function(options) {
   return function(css) {
     const rules = []
 
-    css.walkAtRules('breakpoint', atRule => {
-      const breakpoint = atRule.params
+    css.walkAtRules('screen', atRule => {
+      const screen = atRule.params
 
-      if (! _.has(options.breakpoints, breakpoint)) {
-        throw atRule.error(`No \`${breakpoint}\` breakpoint found.`)
+      if (! _.has(options.screens, screen)) {
+        throw atRule.error(`No \`${screen}\` screen found.`)
       }
 
       atRule.name = 'media'
-      atRule.params = buildMediaQuery(options.breakpoints[breakpoint])
+      atRule.params = buildMediaQuery(options.screens[screen])
     })
   }
 }
diff --git a/src/util/buildMediaQuery.js b/src/util/buildMediaQuery.js
index 2a6fe50d7..ad6cff6ea 100644
--- a/src/util/buildMediaQuery.js
+++ b/src/util/buildMediaQuery.js
@@ -1,25 +1,29 @@
 import _ from 'lodash'
 
-export default function buildMediaQuery(breakpoints) {
-  if (_.isString(breakpoints)) {
-    breakpoints = { min: breakpoints }
+export default function buildMediaQuery(screens) {
+  if (_.isString(screens)) {
+    screens = { min: screens }
   }
 
-  if (!_.isArray(breakpoints)) {
-    breakpoints = [breakpoints]
+  if (!_.isArray(screens)) {
+    screens = [screens]
   }
 
-  return _(breakpoints).map((breakpoint) => {
-    return _(breakpoint).map((value, feature) => {
-        feature = _.get(
-          {
-            min: 'min-width',
-            max: 'max-width',
-          },
-          feature,
-          feature
-        )
-        return `(${feature}: ${value})`
-      }).join(' and ')
+  return _(screens).map((screen) => {
+    if (_.has(screen, 'raw')) {
+      return screen.raw
+    }
+
+    return _(screen).map((value, feature) => {
+      feature = _.get(
+        {
+          min: 'min-width',
+          max: 'max-width',
+        },
+        feature,
+        feature
+      )
+      return `(${feature}: ${value})`
+    }).join(' and ')
   }).join(', ')
 }
diff --git a/src/util/mergeConfig.js b/src/util/mergeConfig.js
index 24db80900..5490f2452 100644
--- a/src/util/mergeConfig.js
+++ b/src/util/mergeConfig.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 const configTemplate = {
-  breakpoints: null,
+  screens: null,
   colors: null,
   text: {
     fonts: null,