Skip to content

Commit 92bf26b

Browse files
thecrypticaceadamwathan
thecrypticace
and
adamwathan
authored
Reset reverse state in space-x/y-* and divide-x/y-* (#15094)
We weren't resetting the `--tw-space-x-reverse` and `--tw-space-y-reverse` state in the `space-x/y-{number}` utilities which broke code assuming that `md:space-x-3` would no longer be reversed. This PR fixes that. --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent c5a0b54 commit 92bf26b

File tree

4 files changed

+22
-0
lines changed

4 files changed

+22
-0
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
13+
- Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
1314

1415
## [4.0.0-beta.1] - 2024-11-21
1516

‎packages/tailwindcss/src/index.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,6 +686,7 @@ describe('sorting', () => {
686686
}
687687
688688
:where(.space-x-2 > :not(:last-child)) {
689+
--tw-space-x-reverse: 0;
689690
margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse));
690691
margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
691692
}

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7866,16 +7866,19 @@ test('space-x', async () => {
78667866
}
78677867
78687868
:where(.-space-x-4 > :not(:last-child)) {
7869+
--tw-space-x-reverse: 0;
78697870
margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse));
78707871
margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse)));
78717872
}
78727873
78737874
:where(.space-x-4 > :not(:last-child)) {
7875+
--tw-space-x-reverse: 0;
78747876
margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse));
78757877
margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse)));
78767878
}
78777879
78787880
:where(.space-x-\\[4px\\] > :not(:last-child)) {
7881+
--tw-space-x-reverse: 0;
78797882
margin-inline-start: calc(4px * var(--tw-space-x-reverse));
78807883
margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
78817884
}
@@ -7914,16 +7917,19 @@ test('space-y', async () => {
79147917
}
79157918
79167919
:where(.-space-y-4 > :not(:last-child)) {
7920+
--tw-space-y-reverse: 0;
79177921
margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse));
79187922
margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse)));
79197923
}
79207924
79217925
:where(.space-y-4 > :not(:last-child)) {
7926+
--tw-space-y-reverse: 0;
79227927
margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
79237928
margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
79247929
}
79257930
79267931
:where(.space-y-\\[4px\\] > :not(:last-child)) {
7932+
--tw-space-y-reverse: 0;
79277933
margin-block-start: calc(4px * var(--tw-space-y-reverse));
79287934
margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
79297935
}
@@ -8001,24 +8007,28 @@ test('divide-x', async () => {
80018007
),
80028008
).toMatchInlineSnapshot(`
80038009
":where(.divide-x > :not(:last-child)) {
8010+
--tw-divide-x-reverse: 0;
80048011
border-inline-style: var(--tw-border-style);
80058012
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
80068013
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
80078014
}
80088015
80098016
:where(.divide-x-4 > :not(:last-child)) {
8017+
--tw-divide-x-reverse: 0;
80108018
border-inline-style: var(--tw-border-style);
80118019
border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
80128020
border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
80138021
}
80148022
80158023
:where(.divide-x-123 > :not(:last-child)) {
8024+
--tw-divide-x-reverse: 0;
80168025
border-inline-style: var(--tw-border-style);
80178026
border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
80188027
border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
80198028
}
80208029
80218030
:where(.divide-x-\\[4px\\] > :not(:last-child)) {
8031+
--tw-divide-x-reverse: 0;
80228032
border-inline-style: var(--tw-border-style);
80238033
border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
80248034
border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
@@ -8077,6 +8087,7 @@ test('divide-x with custom default border width', async () => {
80778087
}
80788088
80798089
:where(.divide-x > :not(:last-child)) {
8090+
--tw-divide-x-reverse: 0;
80808091
border-inline-style: var(--tw-border-style);
80818092
border-inline-start-width: calc(2px * var(--tw-divide-x-reverse));
80828093
border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
@@ -8116,27 +8127,31 @@ test('divide-y', async () => {
81168127
),
81178128
).toMatchInlineSnapshot(`
81188129
":where(.divide-y > :not(:last-child)) {
8130+
--tw-divide-y-reverse: 0;
81198131
border-bottom-style: var(--tw-border-style);
81208132
border-top-style: var(--tw-border-style);
81218133
border-top-width: calc(1px * var(--tw-divide-y-reverse));
81228134
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
81238135
}
81248136
81258137
:where(.divide-y-4 > :not(:last-child)) {
8138+
--tw-divide-y-reverse: 0;
81268139
border-bottom-style: var(--tw-border-style);
81278140
border-top-style: var(--tw-border-style);
81288141
border-top-width: calc(4px * var(--tw-divide-y-reverse));
81298142
border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
81308143
}
81318144
81328145
:where(.divide-y-123 > :not(:last-child)) {
8146+
--tw-divide-y-reverse: 0;
81338147
border-bottom-style: var(--tw-border-style);
81348148
border-top-style: var(--tw-border-style);
81358149
border-top-width: calc(123px * var(--tw-divide-y-reverse));
81368150
border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
81378151
}
81388152
81398153
:where(.divide-y-\\[4px\\] > :not(:last-child)) {
8154+
--tw-divide-y-reverse: 0;
81408155
border-bottom-style: var(--tw-border-style);
81418156
border-top-style: var(--tw-border-style);
81428157
border-top-width: calc(4px * var(--tw-divide-y-reverse));
@@ -8196,6 +8211,7 @@ test('divide-y with custom default border width', async () => {
81968211
}
81978212
81988213
:where(.divide-y > :not(:last-child)) {
8214+
--tw-divide-y-reverse: 0;
81998215
border-bottom-style: var(--tw-border-style);
82008216
border-top-style: var(--tw-border-style);
82018217
border-top-width: calc(2px * var(--tw-divide-y-reverse));

‎packages/tailwindcss/src/utilities.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1828,6 +1828,7 @@ export function createUtilities(theme: Theme) {
18281828

18291829
styleRule(':where(& > :not(:last-child))', [
18301830
decl('--tw-sort', 'row-gap'),
1831+
decl('--tw-space-x-reverse', '0'),
18311832
decl('margin-inline-start', `calc(${value} * var(--tw-space-x-reverse))`),
18321833
decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`),
18331834
]),
@@ -1842,6 +1843,7 @@ export function createUtilities(theme: Theme) {
18421843
atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
18431844
styleRule(':where(& > :not(:last-child))', [
18441845
decl('--tw-sort', 'column-gap'),
1846+
decl('--tw-space-y-reverse', '0'),
18451847
decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`),
18461848
decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`),
18471849
]),
@@ -2190,6 +2192,7 @@ export function createUtilities(theme: Theme) {
21902192
styleRule(':where(& > :not(:last-child))', [
21912193
decl('--tw-sort', 'divide-x-width'),
21922194
borderProperties(),
2195+
decl('--tw-divide-x-reverse', '0'),
21932196
decl('border-inline-style', 'var(--tw-border-style)'),
21942197
decl('border-inline-start-width', `calc(${value} * var(--tw-divide-x-reverse))`),
21952198
decl('border-inline-end-width', `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`),
@@ -2210,6 +2213,7 @@ export function createUtilities(theme: Theme) {
22102213
styleRule(':where(& > :not(:last-child))', [
22112214
decl('--tw-sort', 'divide-y-width'),
22122215
borderProperties(),
2216+
decl('--tw-divide-y-reverse', '0'),
22132217
decl('border-bottom-style', 'var(--tw-border-style)'),
22142218
decl('border-top-style', 'var(--tw-border-style)'),
22152219
decl('border-top-width', `calc(${value} * var(--tw-divide-y-reverse))`),

0 commit comments

Comments
 (0)