Add shadows and flex generators, extract defineClass(es)

src/generators/background-colors.js

@@ -1,5 +1,5 @@
-const postcss = require('postcss')
 const _ = require('lodash')
+const defineClass = require('../util/define-class')
 
 function findColor(colors, color) {
   const colorsNormalized = _.mapKeys(colors, (value, key) => {
@@ -20,13 +20,8 @@ module.exports = function ({ colors, backgroundColors }) {
   }
 
   return _(backgroundColors).toPairs().map(([className, colorName]) => {
-    const kebabClass = _.kebabCase(className)
-
-    return postcss.rule({
-      selector: `.bg-${kebabClass}`
-    }).append({
-      prop: 'background-color',
-      value: findColor(colors, colorName)
+    return defineClass(`bg-${className}`, {
+        backgroundColor: findColor(colors, colorName),
     })
   }).value()
 }

src/generators/flex.js

@@ -0,0 +1,86 @@
+const postcss = require('postcss')
+const _ = require('lodash')
+const defineClasses = require('../util/define-classes')
+
+module.exports = function () {
+  return defineClasses({
+    flex: {
+      display: 'flex',
+    },
+    inlineFlex: {
+      display: 'inline-flex',
+    },
+    flexRow: {
+      flexDirection: 'row',
+    },
+    flexRowReverse: {
+      flexDirection: 'row-reverse',
+    },
+    flexCol: {
+      flexDirection: 'column',
+    },
+    flexColReverse: {
+      flexDirection: 'column-reverse',
+    },
+    flexWrap: {
+      flexWrap: 'wrap',
+    },
+    flexWrapReverse: {
+      flexWrap: 'wrap-reverse',
+    },
+    flexNowrap: {
+      flexWrap: 'nowrap',
+    },
+    itemsStart: {
+      alignItems: 'flex-start',
+    },
+    itemsEnd: {
+      alignItems: 'flex-end',
+    },
+    itemsCenter: {
+      alignItems: 'center',
+    },
+    itemsBaseline: {
+      alignItems: 'baseline',
+    },
+    itemsStretch: {
+      alignItems: 'stretch',
+    },
+    justifyStart: {
+      justifyContent: 'flex-start',
+    },
+    justifyEnd: {
+      justifyContent: 'flex-end',
+    },
+    justifyCenter: {
+      justifyContent: 'center',
+    },
+    justifyBetween: {
+      justifyContent: 'space-between',
+    },
+    justifyAround: {
+      justifyContent: 'space-around',
+    },
+    flexAuto: {
+      flex: 'auto',
+    },
+    flexInitial: {
+      flex: 'initial',
+    },
+    flexNone: {
+      flex: 'none',
+    },
+    flexGrow: {
+      flexGrow: '1',
+    },
+    flexShrink: {
+      flexShrink: '1',
+    },
+    flexNoGrow: {
+      flexGrow: '0',
+    },
+    flexNoShrink: {
+      flexShrink: '0',
+    },
+  })
+}

src/generators/shadows.js

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

src/tailwind.js

@@ -2,6 +2,8 @@ const _ = require('lodash')
 const postcss = require('postcss')
 const cssnext = require('postcss-cssnext')
 const backgroundColors = require('./generators/background-colors')
+const shadows = require('./generators/shadows')
+const flex = require('./generators/flex')
 
 function findMixin(css, mixin, onError) {
   let match
@@ -51,10 +53,27 @@ function generateUtilities(css, options) {
     if (atRule.params === 'utilities') {
 
       const rules = _.flatten([
-        backgroundColors(options)
+        backgroundColors(options),
+        shadows(options),
+        flex(),
       ])
 
       css.insertBefore(atRule, rules)
+
+      Object.keys(options.breakpoints).forEach(breakpoint => {
+        const mediaQuery = postcss.atRule({
+          name: 'media',
+          params: `(--breakpoint-${breakpoint})`,
+        })
+
+        mediaQuery.append(rules.map(rule => {
+          const cloned = rule.clone()
+          cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}`
+          return cloned
+        }))
+        css.insertBefore(atRule, mediaQuery)
+      })
+
       atRule.remove()
       return false
     }

src/util/define-class.js

@@ -0,0 +1,16 @@
+const _ = require('lodash')
+const postcss = require('postcss')
+
+module.exports = function defineClass(className, properties) {
+  const kebabClass = _.kebabCase(className)
+  const decls = _(properties).toPairs().map(([property, value]) => {
+    return postcss.decl({
+      prop: _.kebabCase(property),
+      value: value,
+    })
+  }).value()
+
+  return postcss.rule({
+    selector: `.${kebabClass}`
+  }).append(decls)
+}

src/util/define-classes.js

@@ -0,0 +1,8 @@
+const _ = require('lodash')
+const defineClass = require('./define-class')
+
+module.exports = function defineClasses(classes) {
+  return _(classes).toPairs().map(([className, properties]) => {
+    return defineClass(className, properties)
+  }).value()
+}