Add basic background color generator

Supports specifying background colors as an array of colors, or an
object where the label is what you want to name that color as a
background utility, and the value is the color to use.

Everything can be specified as either camelCase or kebab-case so you
don't need to quote the shit out of everything but classes will always
be rendered as kebab-case.

docs/source/_assets/less/main.less

@@ -5,8 +5,13 @@
     @class "py-2";
     background-color: green;
   }
+  @media (--breakpoint-md) {
+    background-color: orange;
+  }
 }
 
+@tailwind utilities;
+
 .bg-light {
   background: #fff;
 }

src/default-config.js

@@ -0,0 +1,121 @@
+module.exports = {
+  breakpoints: {
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    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',
+    orangeLightest: '#fff8eb',
+    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',
+    indigoLightest: '#f4f5ff',
+    purpleDark:     '#714cb4',
+    purple:         '#976ae6',
+    purpleLight:    '#ceb3ff',
+    purpleLightest: '#f7f3ff',
+    pinkDark:       '#d84f7d',
+    pink:           '#f66d9b',
+    pinkLight:      '#ffa5c3',
+    pinkLightest:   '#fdf2f5',
+  },
+  // backgroundColors: {
+  //   'light': 'white',
+  //   'light-soft': 'grey-200',
+  //   'light-softer': 'grey-300',
+  //   'light-softest': 'grey-400',
+  //   'dark': 'grey-900',
+  //   'dark-soft': 'grey-800',
+  //   'dark-softer': 'grey-700',
+  //   'dark-softest': 'grey-600',
+  //   'red-dark': 'red-dark',
+  //   'red': 'red',
+  //   'red-light': 'red-light',
+  //   'red-lightest': 'red-lightest',
+  //   'orange-dark': 'orange-dark',
+  //   'orange': 'orange',
+  //   'orange-light': 'orange-light',
+  //   'orange-lightest': 'orange-lightest',
+  //   'yellow-dark': 'yellow-dark',
+  //   'yellow': 'yellow',
+  //   'yellow-light': 'yellow-light',
+  //   'yellow-lightest': 'yellow-lightest',
+  //   'green-dark': 'green-dark',
+  //   'green': 'green',
+  //   'green-light': 'green-light',
+  //   'green-lightest': 'green-lightest',
+  //   'teal-dark': 'teal-dark',
+  //   'teal': 'teal',
+  //   'teal-light': 'teal-light',
+  //   'teal-lightest': 'teal-lightest',
+  //   'blue-dark': 'blue-dark',
+  //   'blue': 'blue',
+  //   'blue-light': 'blue-light',
+  //   'blue-lightest': 'blue-lightest',
+  //   'indigo-dark': 'indigo-dark',
+  //   'indigo': 'indigo',
+  //   'indigo-light': 'indigo-light',
+  //   'indigo-lightest': 'indigo-lightest',
+  //   'purple-dark': 'purple-dark',
+  //   'purple': 'purple',
+  //   'purple-light': 'purple-light',
+  //   'purple-lightest': 'purple-lightest',
+  //   'pink-dark': 'pink-dark',
+  //   'pink': 'pink',
+  //   'pink-light': 'pink-light',
+  //   'pink-lightest': 'pink-lightest',
+  // },
+  backgroundColors: [
+    'blue-dark',
+    'blue',
+    'blue-lightest',
+    'indigo',
+    'indigo-light',
+    'purple',
+    'purple-lightest',
+    'pink-dark',
+    'pink',
+  ],
+  // backgroundColors: {
+  //   primary: 'blue',
+  //   primaryDark: 'blueDark',
+  //   primaryLight: 'blueLight',
+  //   secondary: 'orange',
+  //   secondaryDark: 'orangeDark',
+  //   secondaryLight: 'orangeLight',
+  // }
+}

src/generators/background-colors.js

@@ -0,0 +1,25 @@
+const postcss = require('postcss')
+const _ = require('lodash')
+
+function findColor(colors, color) {
+  return _.mapKeys(colors, (value, key) => {
+    return _.camelCase(key)
+  })[_.camelCase(color)]
+}
+
+module.exports = function ({ colors, backgroundColors }) {
+  if (_.isArray(backgroundColors)) {
+    backgroundColors = _(backgroundColors).map(color => [color, color]).fromPairs()
+  }
+
+  return _(backgroundColors).toPairs().map(([className, colorName]) => {
+    const kebabClass = _.kebabCase(className)
+
+    return postcss.rule({
+      selector: `.bg-${kebabClass}`
+    }).append({
+      prop: 'background-color',
+      value: findColor(colors, colorName)
+    })
+  }).value()
+}

src/tailwind.js

@@ -1,20 +1,10 @@
-const _ = require('lodash');
-const postcss = require('postcss');
-const cssnext = require('postcss-cssnext');
-
-function defaultOptions() {
-  return {
-    breakpoints: {
-      sm: '576px',
-      md: '768px',
-      lg: '992px',
-      xl: '1200px',
-    },
-  }
-}
+const _ = require('lodash')
+const postcss = require('postcss')
+const cssnext = require('postcss-cssnext')
+const backgroundColors = require('./generators/background-colors')
 
 function findMixin(css, mixin) {
-  let match;
+  let match
 
   css.walkRules((rule) => {
     if (_.trimStart(rule.selector, '.') === mixin) {
@@ -26,7 +16,7 @@ function findMixin(css, mixin) {
   return match.clone().nodes
 }
 
-function addCustomMediaQueries(css, breakpoints) {
+function addCustomMediaQueries(css, { breakpoints }) {
   function buildMediaQuery(breakpoint) {
     if (_.isString(breakpoint)) {
       breakpoint = { min: breakpoint }
@@ -52,6 +42,21 @@ function addCustomMediaQueries(css, breakpoints) {
   })
 }
 
+function generateUtilities(css, options) {
+  css.walkAtRules('tailwind', atRule => {
+    if (atRule.params === 'utilities') {
+
+      const rules = _.flatten([
+        backgroundColors(options)
+      ])
+
+      css.insertBefore(atRule, rules)
+      atRule.remove()
+      return false
+    }
+  })
+}
+
 function substituteClassMixins(css) {
   css.walkRules(function (rule) {
     rule.walkAtRules('class', atRule => {
@@ -68,15 +73,10 @@ function substituteClassMixins(css) {
 
 module.exports = postcss.plugin('tailwind', function (options) {
   return function (css) {
-    options = options || defaultOptions()
-
-    addCustomMediaQueries(css, options.breakpoints)
-
-    // Generate utilities
-    // css.
+    options = options || require('./default-config')
 
+    addCustomMediaQueries(css, options)
+    generateUtilities(css, options)
     substituteClassMixins(css)
-
-    // return cssnext.process(css)
   }
 })