Convert new stuff to use ES6 modules

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
 yarn.lock
+lib

build.js

@@ -1,22 +0,0 @@
-console.info('Building Tailwind!')
-
-const fs = require('fs')
-const postcss = require('postcss')
-const defaultConfig = require('./src/default-config')
-
-fs.readFile('./src/tailwind.css', (err, css) => {
-  postcss([
-    require('./src/tailwind')(defaultConfig),
-  ]).process(css, {
-    from: './src/tailwind.css',
-    to: './dist/tailwind.css',
-    map: {inline: false},
-  }).then(result => {
-    fs.writeFileSync('dist/tailwind.css', result.css)
-    if (result.map) {
-      fs.writeFileSync('dist/tailwind.css.map', result.map)
-    }
-  })
-})
-
-console.log('Finished Building Tailwind!')

package.json

@@ -5,24 +5,68 @@
   "license": "MIT",
   "contributors": [
     "Adam Wathan <adam.wathan@gmail.com>",
-    "Jonathan Reinink <jonathan@reinink.ca>"
+    "Jonathan Reinink <jonathan@reinink.ca>",
+    "David Hemphill <davidlee.hemphill@gmail.com>"
   ],
   "scripts": {
-    "build": "node ./build.js",
+    "prebabelify": "rimraf lib",
+    "babelify": "babel src --out-dir lib",
+    "prepare": "npm run babelify",
+    "build": "npm run prepare && node lib/build.js",
     "test": "jest"
   },
-  "dependencies": {
+  "devDependencies": {
+    "babel-cli": "^6.6.5",
+    "babel-core": "^6.7.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-env": "^1.0.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-3": "^6.24.1",
     "jest": "^20.0.4",
+    "rimraf": "^2.6.1",
+    "stylefmt": "^6.0.0"
+  },
+  "dependencies": {
     "lodash": "^4.17.4",
     "normalize.css": "^6.0.0",
     "postcss": "^6.0.9",
     "postcss-cssnext": "^3.0.2",
+    "postcss-prettify": "^0.3.4",
     "suitcss-base": "^3.0.0"
   },
-  "devDependencies": {
-    "stylefmt": "^6.0.0"
-  },
   "browserslist": [
     "> 1%"
-  ]
+  ],
+  "babel": {
+    "presets": [
+      "babel-preset-react",
+      [
+        "babel-preset-env",
+        {
+          "targets": {
+            "node": "7.0"
+          }
+        }
+      ],
+      "babel-preset-stage-3"
+    ],
+    "env": {
+      "browsers": {
+        "presets": [
+          "babel-preset-react",
+          [
+            "babel-preset-env",
+            {
+              "targets": {
+                "browsers": [
+                  "last 5 versions"
+                ]
+              }
+            }
+          ],
+          "babel-preset-stage-3"
+        ]
+      }
+    }
+  }
 }

src/build.js

@@ -0,0 +1,22 @@
+import fs from 'fs'
+import postcss from 'postcss'
+import tailwind from './tailwind'
+import defaultConfig from './defaultConfig'
+
+console.info('Building Tailwind!')
+
+fs.readFile('./src/tailwind.css', (err, css) => {
+  postcss([tailwind(defaultConfig)])
+    .process(css, {
+      from: './tailwind.css',
+      to: './dist/tailwind.css',
+      map: {inline: false},
+    })
+    .then(result => {
+      fs.writeFileSync('./dist/tailwind.css', result.css)
+      if (result.map) fs.writeFileSync('./dist/tailwind.css.map', result.map)
+    })
+    .catch(error => console.log(error))
+})
+
+console.log('Finished Building Tailwind!')

src/defaultConfig.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   breakpoints: {
     sm: '576px',
     md: '768px',
@@ -6,52 +6,52 @@ module.exports = {
     xl: '1200px',
   },
   colors: {
-    black:          '#000000',
-    grey900:        '#212b35',
-    grey800:        '#404e5c',
-    grey700:        '#647382',
-    grey600:        '#919eab',
-    grey500:        '#c5ced6',
-    grey400:        '#dfe3e8',
-    grey300:        '#f0f2f5',
-    grey200:        '#f7f9fa',
-    white:          '#ffffff',
-    redDark:        '#d43633',
-    red:            '#f25451',
-    redLight:       '#fa8785',
-    redLightest:    '#fff1f0',
-    orangeDark:     '#f29500',
-    orange:         '#ffb82b',
-    orangeLight:    '#ffd685',
+    black: '#000000',
+    grey900: '#212b35',
+    grey800: '#404e5c',
+    grey700: '#647382',
+    grey600: '#919eab',
+    grey500: '#c5ced6',
+    grey400: '#dfe3e8',
+    grey300: '#f0f2f5',
+    grey200: '#f7f9fa',
+    white: '#ffffff',
+    redDark: '#d43633',
+    red: '#f25451',
+    redLight: '#fa8785',
+    redLightest: '#fff1f0',
+    orangeDark: '#f29500',
+    orange: '#ffb82b',
+    orangeLight: '#ffd685',
     orangeLightest: '#fff8eb',
-    yellowDark:     '#ffc400',
-    yellow:         '#ffe14a',
-    yellowLight:    '#ffea83',
+    yellowDark: '#ffc400',
+    yellow: '#ffe14a',
+    yellowLight: '#ffea83',
     yellowLightest: '#fffbe5',
-    greenDark:      '#34ae4c',
-    green:          '#57d06f',
-    greenLight:     '#b1f3be',
-    greenLightest:  '#eefff1',
-    tealDark:       '#249e9a',
-    teal:           '#4dc0b5',
-    tealLight:      '#9eebe4',
-    tealLightest:   '#eefffd',
-    blueDark:       '#3687c8',
-    blue:           '#4aa2ea',
-    blueLight:      '#acdaff',
-    blueLightest:   '#f1f9ff',
-    indigoDark:     '#4957a5',
-    indigo:         '#6574cd',
-    indigoLight:    '#bcc5fb',
+    greenDark: '#34ae4c',
+    green: '#57d06f',
+    greenLight: '#b1f3be',
+    greenLightest: '#eefff1',
+    tealDark: '#249e9a',
+    teal: '#4dc0b5',
+    tealLight: '#9eebe4',
+    tealLightest: '#eefffd',
+    blueDark: '#3687c8',
+    blue: '#4aa2ea',
+    blueLight: '#acdaff',
+    blueLightest: '#f1f9ff',
+    indigoDark: '#4957a5',
+    indigo: '#6574cd',
+    indigoLight: '#bcc5fb',
     indigoLightest: '#f4f5ff',
-    purpleDark:     '#714cb4',
-    purple:         '#976ae6',
-    purpleLight:    '#ceb3ff',
+    purpleDark: '#714cb4',
+    purple: '#976ae6',
+    purpleLight: '#ceb3ff',
     purpleLightest: '#f7f3ff',
-    pinkDark:       '#d84f7d',
-    pink:           '#f66d9b',
-    pinkLight:      '#ffa5c3',
-    pinkLightest:   '#fdf2f5',
+    pinkDark: '#d84f7d',
+    pink: '#f66d9b',
+    pinkLight: '#ffa5c3',
+    pinkLightest: '#fdf2f5',
   },
   backgroundColors: [
     {
@@ -119,5 +119,5 @@ module.exports = {
     3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
     4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
     5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
-  }
+  },
 }

src/generators/backgroundColors.js

@@ -1,20 +1,25 @@
-const _ = require('lodash')
-const defineClass = require('../util/defineClass')
-const findColor = require('../util/findColor')
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+import findColor from '../util/findColor'
 
-module.exports = function ({ colors, backgroundColors }) {
+export default function({colors, backgroundColors}) {
   if (_.isArray(backgroundColors)) {
-    backgroundColors = _(backgroundColors).flatMap(color => {
-      if (_.isString(color)) {
-        return [[color, color]]
-      }
-      return _.toPairs(color)
-    }).fromPairs()
+    backgroundColors = _(backgroundColors)
+      .flatMap(color => {
+        if (_.isString(color)) {
+          return [[color, color]]
+        }
+        return _.toPairs(color)
+      })
+      .fromPairs()
   }
 
-  return _(backgroundColors).toPairs().map(([className, colorName]) => {
-    return defineClass(`bg-${className}`, {
-      backgroundColor: findColor(colors, colorName),
+  return _(backgroundColors)
+    .toPairs()
+    .map(([className, colorName]) => {
+      return defineClass(`bg-${className}`, {
+        backgroundColor: findColor(colors, colorName),
+      })
     })
-  }).value()
+    .value()
 }

src/generators/backgroundSize.js

@@ -1,6 +1,6 @@
-const defineClasses = require('../util/defineClasses')
+import defineClasses from '../util/defineClasses'
 
-module.exports = function () {
+export default function() {
   return defineClasses({
     bgCover: {
       backgroundSize: 'cover',

src/generators/borderWidths.js

@@ -1,24 +1,24 @@
-const _ = require('lodash')
-const defineClass = require('../util/defineClass')
-const defineClasses = require('../util/defineClasses')
-const findColor = require('../util/findColor')
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+import defineClasses from '../util/defineClasses'
+import findColor from '../util/findColor'
 
 function defaultBorder(width, color) {
   return defineClasses({
     border: {
-      border: `${width} solid ${color}`
+      border: `${width} solid ${color}`,
     },
     borderT: {
-      borderTop: `${width} solid ${color}`
+      borderTop: `${width} solid ${color}`,
     },
     borderR: {
-      borderRight: `${width} solid ${color}`
+      borderRight: `${width} solid ${color}`,
     },
     borderB: {
-      borderBottom: `${width} solid ${color}`
+      borderBottom: `${width} solid ${color}`,
     },
     borderL: {
-      borderLeft: `${width} solid ${color}`
+      borderLeft: `${width} solid ${color}`,
     },
   })
 }
@@ -26,24 +26,24 @@ function defaultBorder(width, color) {
 function sizedBorder(size, width, color) {
   return defineClasses({
     [`border-${size}`]: {
-      border: `${width} solid ${color}`
+      border: `${width} solid ${color}`,
     },
     [`border-t-${size}`]: {
-      borderTop: `${width} solid ${color}`
+      borderTop: `${width} solid ${color}`,
     },
     [`border-r-${size}`]: {
-      borderRight: `${width} solid ${color}`
+      borderRight: `${width} solid ${color}`,
     },
     [`border-b-${size}`]: {
-      borderBottom: `${width} solid ${color}`
+      borderBottom: `${width} solid ${color}`,
     },
     [`border-l-${size}`]: {
-      borderLeft: `${width} solid ${color}`
+      borderLeft: `${width} solid ${color}`,
     },
   })
 }
 
-module.exports = function ({ colors, borders }) {
+module.exports = function({colors, borders}) {
   const color = findColor(colors, borders.defaults.color)
 
   return _.flatten([

src/generators/flex.js

@@ -1,8 +1,8 @@
-const postcss = require('postcss')
-const _ = require('lodash')
-const defineClasses = require('../util/defineClasses')
+import postcss from 'postcss'
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
 
-module.exports = function () {
+export default function() {
   return defineClasses({
     flex: {
       display: 'flex',

src/generators/shadows.js

@@ -1,10 +1,13 @@
-const _ = require('lodash')
-const defineClass = require('../util/defineClass')
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
 
-module.exports = function ({ shadows }) {
-  return _(shadows).toPairs().map(([className, shadow]) => {
-    return defineClass(`shadow-${className}`, {
-      boxShadow: shadow,
+export default function({shadows}) {
+  return _(shadows)
+    .toPairs()
+    .map(([className, shadow]) => {
+      return defineClass(`shadow-${className}`, {
+        boxShadow: shadow,
+      })
     })
-  }).value()
+    .value()
 }

src/lib/addCustomMediaQueries.js

@@ -1,23 +1,10 @@
-const _ = require('lodash')
-const postcss = require('postcss')
+import _ from 'lodash'
+import postcss from 'postcss'
 
-function buildMediaQuery(breakpoint) {
-  if (_.isString(breakpoint)) {
-    breakpoint = {min: breakpoint}
-  }
+export default function(options) {
+  let breakpoints = options.breakpoints
 
-  return _(breakpoint).toPairs().map(([feature, value]) => {
-    feature = _.get({
-      min: 'min-width',
-      max: 'max-width',
-    }, feature, feature)
-
-    return `(${feature}: ${value})`
-  }).join(' and ')
-}
-
-module.exports = function ({breakpoints}) {
-  return function (css) {
+  return function(css) {
     Object.keys(breakpoints).forEach(breakpoint => {
       const variableName = `--breakpoint-${breakpoint}`
       const mediaQuery = buildMediaQuery(breakpoints[breakpoint])
@@ -29,3 +16,23 @@ module.exports = function ({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 ')
+}

src/lib/generateUtilities.js

@@ -1,16 +1,21 @@
-const _ = require('lodash')
-const responsive = require('../util/responsive')
+import _ from 'lodash'
+import backgroundColors from '../generators/backgroundColors'
+import backgroundSize from '../generators/backgroundSize'
+import borderWidths from '../generators/borderWidths'
+import shadows from '../generators/shadows'
+import flex from '../generators/flex'
+import responsive from '../util/responsive'
 
-module.exports = function (options) {
-  return function (css) {
+export default function(options) {
+  return function(css) {
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'utilities') {
         const utilities = _.flatten([
-          require('../generators/backgroundColors')(options),
-          require('../generators/backgroundSize')(options),
-          require('../generators/borderWidths')(options),
-          require('../generators/shadows')(options),
-          require('../generators/flex')(options),
+          backgroundColors(options),
+          backgroundSize(options),
+          borderWidths(options),
+          shadows(options),
+          flex(options),
         ])
         css.insertBefore(atRule, responsive(utilities))
         atRule.remove()

src/lib/substituteClassApplyAtRules.js

@@ -1,10 +1,10 @@
-const postcss = require('postcss')
-const _ = require('lodash')
-const findMixin = require('../util/findMixin')
+import postcss from 'postcss'
+import _ from 'lodash'
+import findMixin from '../util/findMixin'
 
-module.exports = function (options) {
-  return function (css) {
-    css.walkRules(rule => {
+export default postcss.plugin('tailwind-apply', function(css) {
+  return function(css) {
+    css.walkRules(function(rule) {
       rule.walkAtRules('apply', atRule => {
         const mixins = postcss.list.space(atRule.params)
 
@@ -28,4 +28,4 @@ module.exports = function (options) {
       })
     })
   }
-}
+})

src/lib/substituteResponsiveAtRules.js

@@ -1,9 +1,9 @@
-const _ = require('lodash')
-const postcss = require('postcss')
-const cloneNodes = require('../util/cloneNodes')
+import _ from 'lodash'
+import postcss from 'postcss'
+import cloneNodes from '../util/cloneNodes'
 
-module.exports = function (options) {
-  return function (css) {
+export default function(options) {
+  return function(css) {
     const rules = []
 
     css.walkAtRules('responsive', atRule => {
@@ -19,11 +19,13 @@ module.exports = function (options) {
         params: `(--breakpoint-${breakpoint})`,
       })
 
-      mediaQuery.append(rules.map(rule => {
-        const cloned = rule.clone()
-        cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}`
-        return cloned
-      }))
+      mediaQuery.append(
+        rules.map(rule => {
+          const cloned = rule.clone()
+          cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}`
+          return cloned
+        })
+      )
       css.append(mediaQuery)
     })
   }

src/tailwind.js

@@ -1,14 +1,15 @@
-const _ = require('lodash')
-const postcss = require('postcss')
-const fs = require('fs')
+import fs from 'fs'
+import _ from 'lodash'
+import postcss from 'postcss'
+import cssnext from 'postcss-cssnext'
 
-const addCustomMediaQueries = require('./lib/addCustomMediaQueries')
-const generateUtilities = require('./lib/generateUtilities')
-const substituteResponsiveAtRules = require('./lib/substituteResponsiveAtRules')
-const substituteClassApplyAtRules = require('./lib/substituteClassApplyAtRules')
+import addCustomMediaQueries from './lib/addCustomMediaQueries'
+import generateUtilities from './lib/generateUtilities'
+import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
+import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 
-module.exports = postcss.plugin('tailwind', options => {
-  options = options || require('./default-config')
+export default postcss.plugin('tailwind', options => {
+  options = options || require('./defaultConfig')
 
   return postcss([
     addCustomMediaQueries(options),

src/util/cloneNodes.js

@@ -1,5 +1,5 @@
-const _ = require('lodash')
+import _ from 'lodash'
 
-module.exports = function cloneNodes(nodes) {
+export default function cloneNodes(nodes) {
   return _.map(nodes, node => node.clone())
 }

src/util/defineClass.js

@@ -1,7 +1,7 @@
-const _ = require('lodash')
-const postcss = require('postcss')
+import _ from 'lodash'
+import postcss from 'postcss'
 
-module.exports = function defineClass(className, properties) {
+export default function(className, properties) {
   const decls = _.map(properties, (value, property) => {
     return postcss.decl({
       prop: _.kebabCase(property),

src/util/defineClasses.js

@@ -1,9 +1,9 @@
-const postcss = require('postcss')
-const _ = require('lodash')
-const defineClass = require('./defineClass')
+import postcss from 'postcss'
+import _ from 'lodash'
+import defineClass from './defineClass'
 
-module.exports = function defineClasses(classes) {
-  return _.map(classes, function(properties, className) {
+export default function defineClasses(classes) {
+  return _.map(classes, (properties, className) => {
     return defineClass(className, properties)
   })
 }

src/util/findMixin.js

@@ -1,6 +1,6 @@
-const _ = require('lodash')
+import _ from 'lodash'
 
-module.exports = function findMixin(css, mixin, onError) {
+export default function findMixin(css, mixin, onError) {
   const matches = []
 
   css.walkRules(rule => {

src/util/responsive.js

@@ -1,10 +1,10 @@
-const postcss = require('postcss')
-const cloneNodes = require('./cloneNodes')
+import postcss from 'postcss'
+import cloneNodes from './cloneNodes'
 
-module.exports = function responsive(rules) {
-  const atRule = postcss.atRule({
-    name: 'responsive',
-  })
-  atRule.append(cloneNodes(rules))
-  return atRule
+export default function responsive(rules) {
+  return postcss
+    .atRule({
+      name: 'responsive',
+    })
+    .append(cloneNodes(rules))
 }