From a75b6901aa4c8f245b62b959ef5f3fcdf47ba07e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 20 Apr 2020 13:34:00 -0400
Subject: [PATCH] Support reverse order for space and divide utilities

---
 __tests__/plugins/divideWidth.test.js | 45 +++++++++++++++++++++------
 __tests__/plugins/space.test.js       | 45 +++++++++++++++++++++------
 src/plugins/divideWidth.js            | 26 ++++++++++++----
 src/plugins/space.js                  | 20 ++++++++++--
 4 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js
index af1723b6a..92a7f522a 100644
--- a/__tests__/plugins/divideWidth.test.js
+++ b/__tests__/plugins/divideWidth.test.js
@@ -8,7 +8,6 @@ test('generating divide width utilities', () => {
         default: '1px',
         '2': '2px',
         '4': '4px',
-        '8': '8px',
       },
     },
     variants: {
@@ -21,14 +20,42 @@ test('generating divide width utilities', () => {
   expect(utilities).toEqual([
     [
       {
-        '.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
-        '.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
-        '.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
-        '.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
-        '.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
-        '.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
-        '.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
-        '.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
+        '.divide-y > :not(template) ~ :not(template)': {
+          '--divide-y-reverse': '0',
+          'border-top': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
+          'border-bottom': 'calc(1px * var(--divide-y-reverse))',
+        },
+        '.divide-x > :not(template) ~ :not(template)': {
+          '--divide-x-reverse': '0',
+          'border-right': 'calc(1px * var(--divide-y-reverse))',
+          'border-left': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
+        },
+        '.divide-y-2 > :not(template) ~ :not(template)': {
+          '--divide-y-reverse': '0',
+          'border-top': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
+          'border-bottom': 'calc(2px * var(--divide-y-reverse))',
+        },
+        '.divide-x-2 > :not(template) ~ :not(template)': {
+          '--divide-x-reverse': '0',
+          'border-right': 'calc(2px * var(--divide-y-reverse))',
+          'border-left': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
+        },
+        '.divide-y-4 > :not(template) ~ :not(template)': {
+          '--divide-y-reverse': '0',
+          'border-top': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
+          'border-bottom': 'calc(4px * var(--divide-y-reverse))',
+        },
+        '.divide-x-4 > :not(template) ~ :not(template)': {
+          '--divide-x-reverse': '0',
+          'border-right': 'calc(4px * var(--divide-y-reverse))',
+          'border-left': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
+        },
+        '.divide-y-reverse > :not(template) ~ :not(template)': {
+          '--divide-y-reverse': '1',
+        },
+        '.divide-x-reverse > :not(template) ~ :not(template)': {
+          '--divide-x-reverse': '1',
+        },
       },
       ['responsive'],
     ],
diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js
index e77277d0e..b4c2e5540 100644
--- a/__tests__/plugins/space.test.js
+++ b/__tests__/plugins/space.test.js
@@ -8,7 +8,6 @@ test('generating space utilities', () => {
         '1': '1px',
         '2': '2px',
         '4': '4px',
-        '8': '8px',
       },
     },
     variants: {
@@ -21,14 +20,42 @@ test('generating space utilities', () => {
   expect(utilities).toEqual([
     [
       {
-        '.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
-        '.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
-        '.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
-        '.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
-        '.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
-        '.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
-        '.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
-        '.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
+        '.space-y-1 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(1px * var(--space-y-reverse))',
+        },
+        '.space-x-1 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(1px * var(--space-y-reverse))',
+          'margin-left': 'calc(1px * calc(1 - var(--space-y-reverse)))',
+        },
+        '.space-y-2 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(2px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(2px * var(--space-y-reverse))',
+        },
+        '.space-x-2 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(2px * var(--space-y-reverse))',
+          'margin-left': 'calc(2px * calc(1 - var(--space-y-reverse)))',
+        },
+        '.space-y-4 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(4px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(4px * var(--space-y-reverse))',
+        },
+        '.space-x-4 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(4px * var(--space-y-reverse))',
+          'margin-left': 'calc(4px * calc(1 - var(--space-y-reverse)))',
+        },
+        '.space-y-reverse > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '1',
+        },
+        '.space-x-reverse > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '1',
+        },
       },
       ['responsive'],
     ],
diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
index f1fdb7f94..23ecfa602 100644
--- a/src/plugins/divideWidth.js
+++ b/src/plugins/divideWidth.js
@@ -3,20 +3,34 @@ import _ from 'lodash'
 export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const generators = [
-      (value, modifier) => ({
+      (size, modifier) => ({
         [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
-          'border-top-width': `${value}`,
+          '--divide-y-reverse': '0',
+          'border-top': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
+          'border-bottom': `calc(${size} * var(--divide-y-reverse))`,
         },
         [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
-          'border-left-width': `${value}`,
+          '--divide-x-reverse': '0',
+          'border-right': `calc(${size} * var(--divide-y-reverse))`,
+          'border-left': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
         },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('divideWidth'), (value, modifier) => {
-        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
-      })
+      return [
+        ..._.flatMap(theme('divideWidth'), (value, modifier) => {
+          return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        }),
+        {
+          '.divide-y-reverse > :not(template) ~ :not(template)': {
+            '--divide-y-reverse': '1',
+          },
+          '.divide-x-reverse > :not(template) ~ :not(template)': {
+            '--divide-x-reverse': '1',
+          },
+        },
+      ]
     })
 
     addUtilities(utilities, variants('divideWidth'))
diff --git a/src/plugins/space.js b/src/plugins/space.js
index c7c674631..a9d0c02f5 100644
--- a/src/plugins/space.js
+++ b/src/plugins/space.js
@@ -5,16 +5,30 @@ export default function() {
     const generators = [
       (size, modifier) => ({
         [`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
-          'margin-top': `${size}`,
+          '--space-y-reverse': '0',
+          'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
+          'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
         },
         [`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
-          'margin-left': `${size}`,
+          '--space-x-reverse': '0',
+          'margin-right': `calc(${size} * var(--space-y-reverse))`,
+          'margin-left': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
         },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(theme('space'), generator)
+      return [
+        ..._.flatMap(theme('space'), generator),
+        {
+          '.space-y-reverse > :not(template) ~ :not(template)': {
+            '--space-y-reverse': '1',
+          },
+          '.space-x-reverse > :not(template) ~ :not(template)': {
+            '--space-x-reverse': '1',
+          },
+        },
+      ]
     })
 
     addUtilities(utilities, variants('space'))