Support reverse order for space and divide utilities

tailwindlabs · Apr 20, 2020 · a75b690 · a75b690
1 parent 0f54a60
commit a75b690
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'))