Port borderColors module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import borderColors from './plugins/borderColors'
 import borderRadius from './plugins/borderRadius'
 import borderStyle from './plugins/borderStyle'
 import borderWidths from './plugins/borderWidths'
@@ -42,6 +43,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.borderColors === false ? () => {} : borderColors(),
     config.modules.borderRadius === false ? () => {} : borderRadius(),
     config.modules.borderStyle === false ? () => {} : borderStyle(),
     config.modules.borderWidths === false ? () => {} : borderWidths(),

src/generators/borderColors.js

@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ borderColors }) {
-  return _.map(_.omit(borderColors, 'default'), (color, className) => {
-    return defineClass(`border-${className}`, {
-      'border-color': color,
-    })
-  })
-}

src/plugins/borderColors.js

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(_.omit(config('borderColors'), 'default'), (value, modifier) => {
+      return [`.${e(`border-${modifier}`)}`, {
+        'border-color': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.borderColors'))
+  }
+}

src/utilityModules.js

@@ -6,7 +6,6 @@ import backgroundPosition from './generators/backgroundPosition'
 import backgroundRepeat from './generators/backgroundRepeat'
 import backgroundSize from './generators/backgroundSize'
 import borderCollapse from './generators/borderCollapse'
-import borderColors from './generators/borderColors'
 
 export default [
   { name: 'lists', generator: lists },
@@ -17,5 +16,4 @@ export default [
   { name: 'backgroundRepeat', generator: backgroundRepeat },
   { name: 'backgroundSize', generator: backgroundSize },
   { name: 'borderCollapse', generator: borderCollapse },
-  { name: 'borderColors', generator: borderColors },
 ]