Skip to content

Commit 02cba63

Browse files
adamwathanadamwathan
authored
Use left/right instead of inline-start/end for space/divide utilities (tailwindlabs#2644)
1 parent 18baa4e commit 02cba63

File tree

8 files changed

+3480
-3480
lines changed

8 files changed

+3480
-3480
lines changed

‎__tests__/fixtures/tailwind-output-flagged.css‎

Lines changed: 864 additions & 864 deletions
Large diffs are not rendered by default.

‎__tests__/fixtures/tailwind-output-important.css‎

Lines changed: 864 additions & 864 deletions
Large diffs are not rendered by default.

‎__tests__/fixtures/tailwind-output-no-color-opacity.css‎

Lines changed: 864 additions & 864 deletions
Large diffs are not rendered by default.

‎__tests__/fixtures/tailwind-output.css‎

Lines changed: 864 additions & 864 deletions
Large diffs are not rendered by default.

‎__tests__/plugins/divideWidth.test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ test('generating divide width utilities', () => {
2828
},
2929
'.divide-x > :not([hidden]) ~ :not([hidden])': {
3030
'--divide-x-reverse': '0',
31-
'border-inline-end-width': 'calc(1px * var(--divide-x-reverse))',
32-
'border-inline-start-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
31+
'border-right-width': 'calc(1px * var(--divide-x-reverse))',
32+
'border-left-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
3333
},
3434
'.divide-y-0 > :not([hidden]) ~ :not([hidden])': {
3535
'--divide-y-reverse': '0',
@@ -38,8 +38,8 @@ test('generating divide width utilities', () => {
3838
},
3939
'.divide-x-0 > :not([hidden]) ~ :not([hidden])': {
4040
'--divide-x-reverse': '0',
41-
'border-inline-end-width': 'calc(0px * var(--divide-x-reverse))',
42-
'border-inline-start-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
41+
'border-right-width': 'calc(0px * var(--divide-x-reverse))',
42+
'border-left-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
4343
},
4444
'.divide-y-2 > :not([hidden]) ~ :not([hidden])': {
4545
'--divide-y-reverse': '0',
@@ -48,8 +48,8 @@ test('generating divide width utilities', () => {
4848
},
4949
'.divide-x-2 > :not([hidden]) ~ :not([hidden])': {
5050
'--divide-x-reverse': '0',
51-
'border-inline-end-width': 'calc(2px * var(--divide-x-reverse))',
52-
'border-inline-start-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
51+
'border-right-width': 'calc(2px * var(--divide-x-reverse))',
52+
'border-left-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
5353
},
5454
'.divide-y-4 > :not([hidden]) ~ :not([hidden])': {
5555
'--divide-y-reverse': '0',
@@ -58,8 +58,8 @@ test('generating divide width utilities', () => {
5858
},
5959
'.divide-x-4 > :not([hidden]) ~ :not([hidden])': {
6060
'--divide-x-reverse': '0',
61-
'border-inline-end-width': 'calc(4px * var(--divide-x-reverse))',
62-
'border-inline-start-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
61+
'border-right-width': 'calc(4px * var(--divide-x-reverse))',
62+
'border-left-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
6363
},
6464
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
6565
'--divide-y-reverse': '1',

‎__tests__/plugins/space.test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ test('generating space utilities', () => {
3030
},
3131
'.space-x-0 > :not([hidden]) ~ :not([hidden])': {
3232
'--space-x-reverse': '0',
33-
'margin-inline-end': 'calc(0px * var(--space-x-reverse))',
34-
'margin-inline-start': 'calc(0px * calc(1 - var(--space-x-reverse)))',
33+
'margin-right': 'calc(0px * var(--space-x-reverse))',
34+
'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
3535
},
3636
'.space-y-1 > :not([hidden]) ~ :not([hidden])': {
3737
'--space-y-reverse': '0',
@@ -40,8 +40,8 @@ test('generating space utilities', () => {
4040
},
4141
'.space-x-1 > :not([hidden]) ~ :not([hidden])': {
4242
'--space-x-reverse': '0',
43-
'margin-inline-end': 'calc(1px * var(--space-x-reverse))',
44-
'margin-inline-start': 'calc(1px * calc(1 - var(--space-x-reverse)))',
43+
'margin-right': 'calc(1px * var(--space-x-reverse))',
44+
'margin-left': 'calc(1px * calc(1 - var(--space-x-reverse)))',
4545
},
4646
'.space-y-2 > :not([hidden]) ~ :not([hidden])': {
4747
'--space-y-reverse': '0',
@@ -50,8 +50,8 @@ test('generating space utilities', () => {
5050
},
5151
'.space-x-2 > :not([hidden]) ~ :not([hidden])': {
5252
'--space-x-reverse': '0',
53-
'margin-inline-end': 'calc(2px * var(--space-x-reverse))',
54-
'margin-inline-start': 'calc(2px * calc(1 - var(--space-x-reverse)))',
53+
'margin-right': 'calc(2px * var(--space-x-reverse))',
54+
'margin-left': 'calc(2px * calc(1 - var(--space-x-reverse)))',
5555
},
5656
'.space-y-4 > :not([hidden]) ~ :not([hidden])': {
5757
'--space-y-reverse': '0',
@@ -60,8 +60,8 @@ test('generating space utilities', () => {
6060
},
6161
'.space-x-4 > :not([hidden]) ~ :not([hidden])': {
6262
'--space-x-reverse': '0',
63-
'margin-inline-end': 'calc(4px * var(--space-x-reverse))',
64-
'margin-inline-start': 'calc(4px * calc(1 - var(--space-x-reverse)))',
63+
'margin-right': 'calc(4px * var(--space-x-reverse))',
64+
'margin-left': 'calc(4px * calc(1 - var(--space-x-reverse)))',
6565
},
6666
'.-space-y-2 > :not([hidden]) ~ :not([hidden])': {
6767
'--space-y-reverse': '0',
@@ -70,8 +70,8 @@ test('generating space utilities', () => {
7070
},
7171
'.-space-x-2 > :not([hidden]) ~ :not([hidden])': {
7272
'--space-x-reverse': '0',
73-
'margin-inline-end': 'calc(-2px * var(--space-x-reverse))',
74-
'margin-inline-start': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
73+
'margin-right': 'calc(-2px * var(--space-x-reverse))',
74+
'margin-left': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
7575
},
7676
'.-space-y-1 > :not([hidden]) ~ :not([hidden])': {
7777
'--space-y-reverse': '0',
@@ -80,8 +80,8 @@ test('generating space utilities', () => {
8080
},
8181
'.-space-x-1 > :not([hidden]) ~ :not([hidden])': {
8282
'--space-x-reverse': '0',
83-
'margin-inline-end': 'calc(-1px * var(--space-x-reverse))',
84-
'margin-inline-start': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
83+
'margin-right': 'calc(-1px * var(--space-x-reverse))',
84+
'margin-left': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
8585
},
8686
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
8787
'--space-y-reverse': '1',

‎src/plugins/divideWidth.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export default function () {
1414
},
1515
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
1616
'--divide-x-reverse': '0',
17-
'border-inline-end-width': `calc(${size} * var(--divide-x-reverse))`,
18-
'border-inline-start-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
17+
'border-right-width': `calc(${size} * var(--divide-x-reverse))`,
18+
'border-left-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
1919
},
2020
}
2121
},

‎src/plugins/space.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export default function () {
1414
},
1515
[`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
1616
'--space-x-reverse': '0',
17-
'margin-inline-end': `calc(${size} * var(--space-x-reverse))`,
18-
'margin-inline-start': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
17+
'margin-right': `calc(${size} * var(--space-x-reverse))`,
18+
'margin-left': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
1919
},
2020
}
2121
},

0 commit comments

Comments
 (0)