Port borderWidths module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import borderWidths from './plugins/borderWidths'
 import cursor from './plugins/cursor'
 import display from './plugins/display'
 import flexbox from './plugins/flexbox'
@@ -39,6 +40,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.borderWidths === false ? () => {} : borderWidths(),
     config.modules.cursor === false ? () => {} : cursor(),
     config.modules.display === false ? () => {} : display(),
     config.modules.flexbox === false ? () => {} : flexbox(),

src/generators/borderWidths.js

@@ -1,38 +0,0 @@
-import _ from 'lodash'
-import defineClasses from '../util/defineClasses'
-
-function defineBorderWidthUtilities(borderWidths) {
-  const generators = [
-    (width, modifier) =>
-      defineClasses({
-        [`border${modifier}`]: {
-          'border-width': `${width}`,
-        },
-      }),
-    (width, modifier) =>
-      defineClasses({
-        [`border-t${modifier}`]: {
-          'border-top-width': `${width}`,
-        },
-        [`border-r${modifier}`]: {
-          'border-right-width': `${width}`,
-        },
-        [`border-b${modifier}`]: {
-          'border-bottom-width': `${width}`,
-        },
-        [`border-l${modifier}`]: {
-          'border-left-width': `${width}`,
-        },
-      }),
-  ]
-
-  return _.flatMap(generators, generator => {
-    return _.flatMap(borderWidths, (width, modifier) => {
-      return generator(width, modifier === 'default' ? '' : `-${modifier}`)
-    })
-  })
-}
-
-module.exports = function({ borderWidths }) {
-  return defineBorderWidthUtilities(borderWidths)
-}

src/plugins/borderWidths.js

@@ -0,0 +1,25 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const generators = [
+      (value, modifier) => ({
+        [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
+      }),
+      (value, modifier) => ({
+        [`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` },
+        [`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` },
+        [`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` },
+        [`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(config('borderWidths'), (value, modifier) => {
+        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+      })
+    })
+
+    addUtilities(utilities, config('modules.borderWidths'))
+  }
+}

src/utilityModules.js

@@ -9,7 +9,6 @@ import borderCollapse from './generators/borderCollapse'
 import borderColors from './generators/borderColors'
 import borderRadius from './generators/borderRadius'
 import borderStyle from './generators/borderStyle'
-import borderWidths from './generators/borderWidths'
 
 export default [
   { name: 'lists', generator: lists },
@@ -23,5 +22,4 @@ export default [
   { name: 'borderColors', generator: borderColors },
   { name: 'borderRadius', generator: borderRadius },
   { name: 'borderStyle', generator: borderStyle },
-  { name: 'borderWidths', generator: borderWidths },
 ]