From b447cd6ccd54b147128d46e5ee9bdf760fd66cdd Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 16 Apr 2020 10:53:19 -0400
Subject: [PATCH] Add divideWidth plugin

---
 .../fixtures/tailwind-output-important.css    | 40 +++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 40 +++++++++++++++++
 __tests__/plugins/divideWidth.test.js         | 44 +++++++++++++++++++
 src/corePlugins.js                            |  2 +
 src/plugins/divideWidth.js                    | 20 +++++++++
 stubs/defaultConfig.stub.js                   |  1 +
 6 files changed, 147 insertions(+)
 create mode 100644 __tests__/plugins/divideWidth.test.js
 create mode 100644 src/plugins/divideWidth.js

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 24040287e..f96fc3de2 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__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;
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index a66f47fcc..a9076ae42 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__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;
diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js
new file mode 100644
index 000000000..b13cc591d
--- /dev/null
+++ b/__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'],
+    ],
+  ])
+})
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 0cfcac3d7..5f72a29ae 100644
--- a/src/corePlugins.js
+++ b/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,
diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
new file mode 100644
index 000000000..52a36047a
--- /dev/null
+++ b/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'))
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index b6ad0005a..ab7dd497b 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -206,6 +206,7 @@ module.exports = {
       move: 'move',
       'not-allowed': 'not-allowed',
     },
+    divideWidth: theme => theme('borderWidth'),
     fill: {
       current: 'currentColor',
     },