import _ from 'lodash'
import postcss from 'postcss'

function buildMediaQuery(breakpoint) {
  if (_.isString(breakpoint)) {
    breakpoint = {min: breakpoint}
  }
  return _(breakpoint).map((value, feature) => {
      feature = _.get(
        {
          min: 'min-width',
          max: 'max-width',
        },
        feature,
        feature
      )
      return `(${feature}: ${value})`
    }).join(' and ')
}

export default function(options) {
  let breakpoints = options.breakpoints

  return function(css) {
    Object.keys(breakpoints).forEach(breakpoint => {
      const variableName = `--breakpoint-${breakpoint}`
      const mediaQuery = buildMediaQuery(breakpoints[breakpoint])
      const rule = postcss.atRule({
        name: 'custom-media',
        params: `${variableName} ${mediaQuery}`,
      })
      css.prepend(rule)
    })
  }
}

@@ -82,16 +82,17 @@
 eakpoint
+s
 ) %7B%0A  if
@@ -114,16 +114,17 @@
 eakpoint
+s
 )) %7B%0A   
@@ -134,16 +134,17 @@
 eakpoint
+s
  = %7Bmin:
@@ -158,14 +158,132 @@
 oint
+s
 %7D%0A  %7D%0A
+  if (!_.isArray(breakpoints)) %7B%0A    breakpoints = %5Bbreakpoints%5D%0A  %7D%0A  return _(breakpoints).map((breakpoint) =%3E %7B%0A  
   re
@@ -323,24 +323,26 @@
 ature) =%3E %7B%0A
+  
       featur
@@ -360,18 +360,22 @@
         
-%7B%0A
+  %7B%0A  
         
@@ -404,16 +404,18 @@
         
+ 
+ 
 max: 'ma
@@ -436,11 +436,15 @@
     
+  
 %7D,%0A
+  
     
@@ -460,24 +460,26 @@
 re,%0A        
+  
 feature%0A    
@@ -480,24 +480,26 @@
 e%0A      
+  
 )%0A      
 return %60
@@ -486,24 +486,26 @@
     )%0A      
+ 
+ 
 return %60($%7Bf
@@ -528,16 +528,18 @@
 %7D)%60%0A    
+  
 %7D).join(
@@ -547,16 +547,32 @@
  and ')%0A
+  %7D).join(', ')%0A
 %7D%0A%0Aexpor

Add ability to define more complex breakpoints.