Add support for @breakpoint rule

src/index.js

@@ -11,6 +11,7 @@ import addCustomMediaQueries from './lib/addCustomMediaQueries'
 import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
+import substituteBreakpointAtRules from './lib/substituteBreakpointAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 
 const plugin = postcss.plugin('tailwind', (options = {}) => {
@@ -21,6 +22,7 @@ const plugin = postcss.plugin('tailwind', (options = {}) => {
     generateUtilities(config),
     substituteHoverableAtRules(config),
     substituteResponsiveAtRules(config),
+    substituteBreakpointAtRules(config),
     substituteClassApplyAtRules(config),
     cssnext(),
     stylefmt,

src/lib/substituteBreakpointAtRules.js

@@ -0,0 +1,20 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+import cloneNodes from '../util/cloneNodes'
+
+export default function(options) {
+  return function(css) {
+    const rules = []
+
+    css.walkAtRules('breakpoint', atRule => {
+      const breakpoint = atRule.params
+
+      if (! _.has(options.breakpoints, breakpoint)) {
+        throw atRule.error(`No \`${breakpoint}\` breakpoint found.`)
+      }
+
+      atRule.name = 'media'
+      atRule.params = `(--breakpoint-${atRule.params})`
+    })
+  }
+}