Rename 'breakpoint' features to 'screens', support for 'raw' key

src/defaultConfig.js

@@ -49,7 +49,7 @@ const colors = {
 
 export default {
   colors,
-  breakpoints: {
+  screens: {
     sm: '576px',
     md: '768px',
     lg: '992px',

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({

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,
   ])

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

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])
     })
   }
 }

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(', ')
 }

src/util/mergeConfig.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 const configTemplate = {
-  breakpoints: null,
+  screens: null,
   colors: null,
   text: {
     fonts: null,