Skip to content

Commit 818692f

Browse files
adamwathanadamwathan
authored
Don't accommodate hidden elements in space/divide (#13459)
* Don't accommodate hidden elements in space/divide * Update tests * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1 parent d1eedb2 commit 818692f

File tree

5 files changed

+103
-107
lines changed

5 files changed

+103
-107
lines changed

‎CHANGELOG.md‎

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

1616
- Apply variants from left to right instead of inside-out ([#13478](https://github.com/tailwindlabs/tailwindcss/pull/13478))
17+
- Don't special-case `[hidden]` elements in `space-*`/`divide-*` utilities ([#13459](https://github.com/tailwindlabs/tailwindcss/pull/13459))
1718

1819
## [4.0.0-alpha.13] - 2024-04-04
1920

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -533,9 +533,9 @@ describe('sorting', () => {
533533
gap: var(--spacing-4, 1rem);
534534
}
535535
536-
:where(.space-x-2 > :not([hidden]) ~ :not([hidden])) {
537-
margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
538-
margin-inline-end: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
536+
:where(.space-x-2 > :not(:last-child)) {
537+
margin-inline-start: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
538+
margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
539539
}
540540
541541
@property --tw-space-x-reverse {

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

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -5296,19 +5296,19 @@ test('space-x', () => {
52965296
--spacing-4: 1rem;
52975297
}
52985298
5299-
:where(.-space-x-4 > :not([hidden]) ~ :not([hidden])) {
5300-
margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse)));
5301-
margin-inline-end: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-x-reverse));
5299+
:where(.-space-x-4 > :not(:last-child)) {
5300+
margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-x-reverse));
5301+
margin-inline-end: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse)));
53025302
}
53035303
5304-
:where(.space-x-4 > :not([hidden]) ~ :not([hidden])) {
5305-
margin-inline-start: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse)));
5306-
margin-inline-end: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse));
5304+
:where(.space-x-4 > :not(:last-child)) {
5305+
margin-inline-start: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse));
5306+
margin-inline-end: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse)));
53075307
}
53085308
5309-
:where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
5310-
margin-inline-start: calc(4px * calc(1 - var(--tw-space-x-reverse)));
5311-
margin-inline-end: calc(4px * var(--tw-space-x-reverse));
5309+
:where(.space-x-\\[4px\\] > :not(:last-child)) {
5310+
margin-inline-start: calc(4px * var(--tw-space-x-reverse));
5311+
margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
53125312
}
53135313
53145314
@property --tw-space-x-reverse {
@@ -5336,19 +5336,19 @@ test('space-y', () => {
53365336
--spacing-4: 1rem;
53375337
}
53385338
5339-
:where(.-space-y-4 > :not([hidden]) ~ :not([hidden])) {
5340-
margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse));
5341-
margin-top: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse)));
5339+
:where(.-space-y-4 > :not(:last-child)) {
5340+
margin-top: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse));
5341+
margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse)));
53425342
}
53435343
5344-
:where(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
5345-
margin-bottom: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse));
5346-
margin-top: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse)));
5344+
:where(.space-y-4 > :not(:last-child)) {
5345+
margin-top: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse));
5346+
margin-bottom: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse)));
53475347
}
53485348
5349-
:where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
5350-
margin-bottom: calc(4px * var(--tw-space-y-reverse));
5351-
margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
5349+
:where(.space-y-\\[4px\\] > :not(:last-child)) {
5350+
margin-top: calc(4px * var(--tw-space-y-reverse));
5351+
margin-bottom: calc(4px * calc(1 - var(--tw-space-y-reverse)));
53525352
}
53535353
53545354
@property --tw-space-y-reverse {
@@ -5362,7 +5362,7 @@ test('space-y', () => {
53625362

53635363
test('space-x-reverse', () => {
53645364
expect(run(['space-x-reverse'])).toMatchInlineSnapshot(`
5365-
":where(.space-x-reverse > :not([hidden]) ~ :not([hidden])) {
5365+
":where(.space-x-reverse > :not(:last-child)) {
53665366
--tw-space-x-reverse: 1;
53675367
}
53685368
@@ -5377,7 +5377,7 @@ test('space-x-reverse', () => {
53775377

53785378
test('space-y-reverse', () => {
53795379
expect(run(['space-y-reverse'])).toMatchInlineSnapshot(`
5380-
":where(.space-y-reverse > :not([hidden]) ~ :not([hidden])) {
5380+
":where(.space-y-reverse > :not(:last-child)) {
53815381
--tw-space-y-reverse: 1;
53825382
}
53835383
@@ -5399,28 +5399,28 @@ test('divide-x', () => {
53995399
['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'],
54005400
),
54015401
).toMatchInlineSnapshot(`
5402-
":where(.divide-x > :not([hidden]) ~ :not([hidden])) {
5402+
":where(.divide-x > :not(:last-child)) {
54035403
border-inline-style: var(--tw-border-style);
5404-
border-inline-end-width: calc(1px * var(--tw-divide-x-reverse));
5405-
border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
5404+
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
5405+
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
54065406
}
54075407
5408-
:where(.divide-x-123 > :not([hidden]) ~ :not([hidden])) {
5408+
:where(.divide-x-123 > :not(:last-child)) {
54095409
border-inline-style: var(--tw-border-style);
5410-
border-inline-end-width: calc(123px * var(--tw-divide-x-reverse));
5411-
border-inline-start-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
5410+
border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
5411+
border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
54125412
}
54135413
5414-
:where(.divide-x-4 > :not([hidden]) ~ :not([hidden])) {
5414+
:where(.divide-x-4 > :not(:last-child)) {
54155415
border-inline-style: var(--tw-border-style);
5416-
border-inline-end-width: calc(4px * var(--tw-divide-x-reverse));
5417-
border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
5416+
border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
5417+
border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
54185418
}
54195419
5420-
:where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
5420+
:where(.divide-x-\\[4px\\] > :not(:last-child)) {
54215421
border-inline-style: var(--tw-border-style);
5422-
border-inline-end-width: calc(4px * var(--tw-divide-x-reverse));
5423-
border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
5422+
border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
5423+
border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
54245424
}
54255425
54265426
@property --tw-divide-x-reverse {
@@ -5454,10 +5454,10 @@ test('divide-x with custom default border width', () => {
54545454
--default-border-width: 2px;
54555455
}
54565456
5457-
:where(.divide-x > :not([hidden]) ~ :not([hidden])) {
5457+
:where(.divide-x > :not(:last-child)) {
54585458
border-inline-style: var(--tw-border-style);
5459-
border-inline-end-width: calc(2px * var(--tw-divide-x-reverse));
5460-
border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
5459+
border-inline-start-width: calc(2px * var(--tw-divide-x-reverse));
5460+
border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
54615461
}
54625462
54635463
@property --tw-divide-x-reverse {
@@ -5483,32 +5483,32 @@ test('divide-y', () => {
54835483
['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'],
54845484
),
54855485
).toMatchInlineSnapshot(`
5486-
":where(.divide-y > :not([hidden]) ~ :not([hidden])) {
5487-
border-top-style: var(--tw-border-style);
5486+
":where(.divide-y > :not(:last-child)) {
54885487
border-bottom-style: var(--tw-border-style);
5489-
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
5490-
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
5488+
border-top-style: var(--tw-border-style);
5489+
border-top-width: calc(1px * var(--tw-divide-y-reverse));
5490+
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
54915491
}
54925492
5493-
:where(.divide-y-123 > :not([hidden]) ~ :not([hidden])) {
5494-
border-top-style: var(--tw-border-style);
5493+
:where(.divide-y-123 > :not(:last-child)) {
54955494
border-bottom-style: var(--tw-border-style);
5496-
border-bottom-width: calc(123px * var(--tw-divide-y-reverse));
5497-
border-top-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
5495+
border-top-style: var(--tw-border-style);
5496+
border-top-width: calc(123px * var(--tw-divide-y-reverse));
5497+
border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
54985498
}
54995499
5500-
:where(.divide-y-4 > :not([hidden]) ~ :not([hidden])) {
5501-
border-top-style: var(--tw-border-style);
5500+
:where(.divide-y-4 > :not(:last-child)) {
55025501
border-bottom-style: var(--tw-border-style);
5503-
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
5504-
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
5502+
border-top-style: var(--tw-border-style);
5503+
border-top-width: calc(4px * var(--tw-divide-y-reverse));
5504+
border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
55055505
}
55065506
5507-
:where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
5508-
border-top-style: var(--tw-border-style);
5507+
:where(.divide-y-\\[4px\\] > :not(:last-child)) {
55095508
border-bottom-style: var(--tw-border-style);
5510-
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
5511-
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
5509+
border-top-style: var(--tw-border-style);
5510+
border-top-width: calc(4px * var(--tw-divide-y-reverse));
5511+
border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
55125512
}
55135513
55145514
@property --tw-divide-y-reverse {
@@ -5542,11 +5542,11 @@ test('divide-y with custom default border width', () => {
55425542
--default-border-width: 2px;
55435543
}
55445544
5545-
:where(.divide-y > :not([hidden]) ~ :not([hidden])) {
5546-
border-top-style: var(--tw-border-style);
5545+
:where(.divide-y > :not(:last-child)) {
55475546
border-bottom-style: var(--tw-border-style);
5548-
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
5549-
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
5547+
border-top-style: var(--tw-border-style);
5548+
border-top-width: calc(2px * var(--tw-divide-y-reverse));
5549+
border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
55505550
}
55515551
55525552
@property --tw-divide-y-reverse {
@@ -5565,7 +5565,7 @@ test('divide-y with custom default border width', () => {
55655565

55665566
test('divide-x-reverse', () => {
55675567
expect(run(['divide-x-reverse'])).toMatchInlineSnapshot(`
5568-
":where(.divide-x-reverse > :not([hidden]) ~ :not([hidden])) {
5568+
":where(.divide-x-reverse > :not(:last-child)) {
55695569
--tw-divide-x-reverse: 1;
55705570
}
55715571
@@ -5580,7 +5580,7 @@ test('divide-x-reverse', () => {
55805580

55815581
test('divide-y-reverse', () => {
55825582
expect(run(['divide-y-reverse'])).toMatchInlineSnapshot(`
5583-
":where(.divide-y-reverse > :not([hidden]) ~ :not([hidden])) {
5583+
":where(.divide-y-reverse > :not(:last-child)) {
55845584
--tw-divide-y-reverse: 1;
55855585
}
55865586
@@ -5596,27 +5596,27 @@ test('divide-y-reverse', () => {
55965596
test('divide-style', () => {
55975597
expect(run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']))
55985598
.toMatchInlineSnapshot(`
5599-
":where(.divide-dashed > :not([hidden]) ~ :not([hidden])) {
5599+
":where(.divide-dashed > :not(:last-child)) {
56005600
--tw-border-style: dashed;
56015601
border-style: dashed;
56025602
}
56035603
5604-
:where(.divide-dotted > :not([hidden]) ~ :not([hidden])) {
5604+
:where(.divide-dotted > :not(:last-child)) {
56055605
--tw-border-style: dotted;
56065606
border-style: dotted;
56075607
}
56085608
5609-
:where(.divide-double > :not([hidden]) ~ :not([hidden])) {
5609+
:where(.divide-double > :not(:last-child)) {
56105610
--tw-border-style: double;
56115611
border-style: double;
56125612
}
56135613
5614-
:where(.divide-none > :not([hidden]) ~ :not([hidden])) {
5614+
:where(.divide-none > :not(:last-child)) {
56155615
--tw-border-style: none;
56165616
border-style: none;
56175617
}
56185618
5619-
:where(.divide-solid > :not([hidden]) ~ :not([hidden])) {
5619+
:where(.divide-solid > :not(:last-child)) {
56205620
--tw-border-style: solid;
56215621
border-style: solid;
56225622
}"
@@ -5832,59 +5832,59 @@ test('divide-color', () => {
58325832
--color-red-500: #ef4444;
58335833
}
58345834
5835-
:where(.divide-\\[\\#0088cc\\] > :not([hidden]) ~ :not([hidden])) {
5835+
:where(.divide-\\[\\#0088cc\\] > :not(:last-child)) {
58365836
border-color: #08c;
58375837
}
58385838
5839-
:where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) {
5839+
:where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)) {
58405840
border-color: #0088cc80;
58415841
}
58425842
5843-
:where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
5843+
:where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)) {
58445844
border-color: #0088cc80;
58455845
}
58465846
5847-
:where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
5847+
:where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
58485848
border-color: #0088cc80;
58495849
}
58505850
5851-
:where(.divide-current > :not([hidden]) ~ :not([hidden])) {
5851+
:where(.divide-current > :not(:last-child)) {
58525852
border-color: currentColor;
58535853
}
58545854
5855-
:where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) {
5855+
:where(.divide-current\\/50 > :not(:last-child)) {
58565856
border-color: color-mix(in srgb, currentColor 50%, transparent);
58575857
}
58585858
5859-
:where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
5859+
:where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
58605860
border-color: color-mix(in srgb, currentColor 50%, transparent);
58615861
}
58625862
5863-
:where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
5863+
:where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
58645864
border-color: color-mix(in srgb, currentColor 50%, transparent);
58655865
}
58665866
5867-
:where(.divide-inherit > :not([hidden]) ~ :not([hidden])) {
5867+
:where(.divide-inherit > :not(:last-child)) {
58685868
border-color: inherit;
58695869
}
58705870
5871-
:where(.divide-red-500 > :not([hidden]) ~ :not([hidden])) {
5871+
:where(.divide-red-500 > :not(:last-child)) {
58725872
border-color: var(--color-red-500, #ef4444);
58735873
}
58745874
5875-
:where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) {
5875+
:where(.divide-red-500\\/50 > :not(:last-child)) {
58765876
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
58775877
}
58785878
5879-
:where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
5879+
:where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
58805880
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
58815881
}
58825882
5883-
:where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
5883+
:where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
58845884
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
58855885
}
58865886
5887-
:where(.divide-transparent > :not([hidden]) ~ :not([hidden])) {
5887+
:where(.divide-transparent > :not(:last-child)) {
58885888
border-color: #0000;
58895889
}"
58905890
`)

0 commit comments

Comments
 (0)