Skip to content

Commit a75b690

Browse files
adamwathanadamwathan
committed
Support reverse order for space and divide utilities
1 parent 0f54a60 commit a75b690

File tree

4 files changed

+109
-27
lines changed

4 files changed

+109
-27
lines changed

‎__tests__/plugins/divideWidth.test.js

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ test('generating divide width utilities', () => {
88
default: '1px',
99
'2': '2px',
1010
'4': '4px',
11-
'8': '8px',
1211
},
1312
},
1413
variants: {
@@ -21,14 +20,42 @@ test('generating divide width utilities', () => {
2120
expect(utilities).toEqual([
2221
[
2322
{
24-
'.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
25-
'.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
26-
'.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
27-
'.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
28-
'.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
29-
'.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
30-
'.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
31-
'.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
23+
'.divide-y > :not(template) ~ :not(template)': {
24+
'--divide-y-reverse': '0',
25+
'border-top': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
26+
'border-bottom': 'calc(1px * var(--divide-y-reverse))',
27+
},
28+
'.divide-x > :not(template) ~ :not(template)': {
29+
'--divide-x-reverse': '0',
30+
'border-right': 'calc(1px * var(--divide-y-reverse))',
31+
'border-left': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
32+
},
33+
'.divide-y-2 > :not(template) ~ :not(template)': {
34+
'--divide-y-reverse': '0',
35+
'border-top': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
36+
'border-bottom': 'calc(2px * var(--divide-y-reverse))',
37+
},
38+
'.divide-x-2 > :not(template) ~ :not(template)': {
39+
'--divide-x-reverse': '0',
40+
'border-right': 'calc(2px * var(--divide-y-reverse))',
41+
'border-left': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
42+
},
43+
'.divide-y-4 > :not(template) ~ :not(template)': {
44+
'--divide-y-reverse': '0',
45+
'border-top': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
46+
'border-bottom': 'calc(4px * var(--divide-y-reverse))',
47+
},
48+
'.divide-x-4 > :not(template) ~ :not(template)': {
49+
'--divide-x-reverse': '0',
50+
'border-right': 'calc(4px * var(--divide-y-reverse))',
51+
'border-left': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
52+
},
53+
'.divide-y-reverse > :not(template) ~ :not(template)': {
54+
'--divide-y-reverse': '1',
55+
},
56+
'.divide-x-reverse > :not(template) ~ :not(template)': {
57+
'--divide-x-reverse': '1',
58+
},
3259
},
3360
['responsive'],
3461
],

‎__tests__/plugins/space.test.js

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ test('generating space utilities', () => {
88
'1': '1px',
99
'2': '2px',
1010
'4': '4px',
11-
'8': '8px',
1211
},
1312
},
1413
variants: {
@@ -21,14 +20,42 @@ test('generating space utilities', () => {
2120
expect(utilities).toEqual([
2221
[
2322
{
24-
'.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
25-
'.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
26-
'.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
27-
'.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
28-
'.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
29-
'.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
30-
'.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
31-
'.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
23+
'.space-y-1 > :not(template) ~ :not(template)': {
24+
'--space-y-reverse': '0',
25+
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
26+
'margin-bottom': 'calc(1px * var(--space-y-reverse))',
27+
},
28+
'.space-x-1 > :not(template) ~ :not(template)': {
29+
'--space-x-reverse': '0',
30+
'margin-right': 'calc(1px * var(--space-y-reverse))',
31+
'margin-left': 'calc(1px * calc(1 - var(--space-y-reverse)))',
32+
},
33+
'.space-y-2 > :not(template) ~ :not(template)': {
34+
'--space-y-reverse': '0',
35+
'margin-top': 'calc(2px * calc(1 - var(--space-y-reverse)))',
36+
'margin-bottom': 'calc(2px * var(--space-y-reverse))',
37+
},
38+
'.space-x-2 > :not(template) ~ :not(template)': {
39+
'--space-x-reverse': '0',
40+
'margin-right': 'calc(2px * var(--space-y-reverse))',
41+
'margin-left': 'calc(2px * calc(1 - var(--space-y-reverse)))',
42+
},
43+
'.space-y-4 > :not(template) ~ :not(template)': {
44+
'--space-y-reverse': '0',
45+
'margin-top': 'calc(4px * calc(1 - var(--space-y-reverse)))',
46+
'margin-bottom': 'calc(4px * var(--space-y-reverse))',
47+
},
48+
'.space-x-4 > :not(template) ~ :not(template)': {
49+
'--space-x-reverse': '0',
50+
'margin-right': 'calc(4px * var(--space-y-reverse))',
51+
'margin-left': 'calc(4px * calc(1 - var(--space-y-reverse)))',
52+
},
53+
'.space-y-reverse > :not(template) ~ :not(template)': {
54+
'--space-y-reverse': '1',
55+
},
56+
'.space-x-reverse > :not(template) ~ :not(template)': {
57+
'--space-x-reverse': '1',
58+
},
3259
},
3360
['responsive'],
3461
],

‎src/plugins/divideWidth.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,34 @@ import _ from 'lodash'
33
export default function() {
44
return function({ addUtilities, e, theme, variants }) {
55
const generators = [
6-
(value, modifier) => ({
6+
(size, modifier) => ({
77
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
8-
'border-top-width': `${value}`,
8+
'--divide-y-reverse': '0',
9+
'border-top': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
10+
'border-bottom': `calc(${size} * var(--divide-y-reverse))`,
911
},
1012
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
11-
'border-left-width': `${value}`,
13+
'--divide-x-reverse': '0',
14+
'border-right': `calc(${size} * var(--divide-y-reverse))`,
15+
'border-left': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
1216
},
1317
}),
1418
]
1519

1620
const utilities = _.flatMap(generators, generator => {
17-
return _.flatMap(theme('divideWidth'), (value, modifier) => {
18-
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
19-
})
21+
return [
22+
..._.flatMap(theme('divideWidth'), (value, modifier) => {
23+
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
24+
}),
25+
{
26+
'.divide-y-reverse > :not(template) ~ :not(template)': {
27+
'--divide-y-reverse': '1',
28+
},
29+
'.divide-x-reverse > :not(template) ~ :not(template)': {
30+
'--divide-x-reverse': '1',
31+
},
32+
},
33+
]
2034
})
2135

2236
addUtilities(utilities, variants('divideWidth'))

‎src/plugins/space.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,30 @@ export default function() {
55
const generators = [
66
(size, modifier) => ({
77
[`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
8-
'margin-top': `${size}`,
8+
'--space-y-reverse': '0',
9+
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
10+
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
911
},
1012
[`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
11-
'margin-left': `${size}`,
13+
'--space-x-reverse': '0',
14+
'margin-right': `calc(${size} * var(--space-y-reverse))`,
15+
'margin-left': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
1216
},
1317
}),
1418
]
1519

1620
const utilities = _.flatMap(generators, generator => {
17-
return _.flatMap(theme('space'), generator)
21+
return [
22+
..._.flatMap(theme('space'), generator),
23+
{
24+
'.space-y-reverse > :not(template) ~ :not(template)': {
25+
'--space-y-reverse': '1',
26+
},
27+
'.space-x-reverse > :not(template) ~ :not(template)': {
28+
'--space-x-reverse': '1',
29+
},
30+
},
31+
]
1832
})
1933

2034
addUtilities(utilities, variants('space'))

0 commit comments

Comments
 (0)