Add divideWidth plugin

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -758,6 +758,46 @@ video {
   margin-left: 1px !important;
 }
 
+.divide-y-0 > * + * {
+  border-top-width: 0 !important;
+}
+
+.divide-x-0 > * + * {
+  border-left-width: 0 !important;
+}
+
+.divide-y-2 > * + * {
+  border-top-width: 2px !important;
+}
+
+.divide-x-2 > * + * {
+  border-left-width: 2px !important;
+}
+
+.divide-y-4 > * + * {
+  border-top-width: 4px !important;
+}
+
+.divide-x-4 > * + * {
+  border-left-width: 4px !important;
+}
+
+.divide-y-8 > * + * {
+  border-top-width: 8px !important;
+}
+
+.divide-x-8 > * + * {
+  border-left-width: 8px !important;
+}
+
+.divide-y > * + * {
+  border-top-width: 1px !important;
+}
+
+.divide-x > * + * {
+  border-left-width: 1px !important;
+}
+
 .sr-only {
   position: absolute !important;
   width: 1px !important;

__tests__/fixtures/tailwind-output.css

@@ -758,6 +758,46 @@ video {
   margin-left: 1px;
 }
 
+.divide-y-0 > * + * {
+  border-top-width: 0;
+}
+
+.divide-x-0 > * + * {
+  border-left-width: 0;
+}
+
+.divide-y-2 > * + * {
+  border-top-width: 2px;
+}
+
+.divide-x-2 > * + * {
+  border-left-width: 2px;
+}
+
+.divide-y-4 > * + * {
+  border-top-width: 4px;
+}
+
+.divide-x-4 > * + * {
+  border-left-width: 4px;
+}
+
+.divide-y-8 > * + * {
+  border-top-width: 8px;
+}
+
+.divide-x-8 > * + * {
+  border-left-width: 8px;
+}
+
+.divide-y > * + * {
+  border-top-width: 1px;
+}
+
+.divide-x > * + * {
+  border-left-width: 1px;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

__tests__/plugins/divideWidth.test.js

@@ -0,0 +1,44 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/divideWidth'
+
+test('generating divide width utilities', () => {
+  const config = {
+    theme: {
+      divideWidth: {
+        default: '1px',
+        '2': '2px',
+        '4': '4px',
+        '8': '8px',
+      },
+    },
+    variants: {
+      divideWidth: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      [
+        {
+          '.divide-y-2 > * + *': { 'border-top-width': '2px' },
+          '.divide-x-2 > * + *': { 'border-left-width': '2px' },
+        },
+        {
+          '.divide-y-4 > * + *': { 'border-top-width': '4px' },
+          '.divide-x-4 > * + *': { 'border-left-width': '4px' },
+        },
+        {
+          '.divide-y-8 > * + *': { 'border-top-width': '8px' },
+          '.divide-x-8 > * + *': { 'border-left-width': '8px' },
+        },
+        {
+          '.divide-y > * + *': { 'border-top-width': '1px' },
+          '.divide-x > * + *': { 'border-left-width': '1px' },
+        },
+      ],
+      ['responsive'],
+    ],
+  ])
+})

src/corePlugins.js

@@ -1,6 +1,7 @@
 import preflight from './plugins/preflight'
 import container from './plugins/container'
 import stack from './plugins/stack'
+import divideWidth from './plugins/divideWidth'
 import accessibility from './plugins/accessibility'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
@@ -98,6 +99,7 @@ export default function({ corePlugins: corePluginConfig }) {
     preflight,
     container,
     stack,
+    divideWidth,
     accessibility,
     appearance,
     backgroundAttachment,

src/plugins/divideWidth.js

@@ -0,0 +1,20 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const generators = [
+      (value, modifier) => ({
+        [`.${e(`divide-y${modifier}`)} > * + *`]: { 'border-top-width': `${value}` },
+        [`.${e(`divide-x${modifier}`)} > * + *`]: { 'border-left-width': `${value}` },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(theme('divideWidth'), (value, modifier) => {
+        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+      })
+    })
+
+    addUtilities(utilities, variants('divideWidth'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -206,6 +206,7 @@ module.exports = {
       move: 'move',
       'not-allowed': 'not-allowed',
     },
+    divideWidth: theme => theme('borderWidth'),
     fill: {
       current: 'currentColor',
     },