Skip to content

Commit 787006f

Browse files
RobinMalfaitRobinMalfait
committed
handle 0 in space-x-0 and space-y-0 utilities
1 parent 70854a5 commit 787006f

2 files changed

Lines changed: 105 additions & 24 deletions

File tree

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

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9922,7 +9922,16 @@ test('gap-y', async () => {
99229922
test('space-x', async () => {
99239923
expect(
99249924
await run(
9925-
['space-x-0', 'space-x-4', 'space-x-[4px]', '-space-x-4'],
9925+
[
9926+
'space-x-0',
9927+
'space-x-[0]',
9928+
'space-x-[0px]',
9929+
'space-x-1',
9930+
'-space-x-1',
9931+
'space-x-4',
9932+
'space-x-[4px]',
9933+
'-space-x-4',
9934+
],
99269935
css`
99279936
@theme {
99289937
--spacing: 0.25rem;
@@ -9942,9 +9951,16 @@ test('space-x', async () => {
99429951
}
99439952

99449953
:root, :host {
9954+
--spacing: .25rem;
99459955
--spacing-4: 1rem;
99469956
}
99479957

9958+
:where(.-space-x-1 > :not(:last-child)) {
9959+
--tw-space-x-reverse: 0;
9960+
margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
9961+
margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
9962+
}
9963+
99489964
:where(.-space-x-4 > :not(:last-child)) {
99499965
--tw-space-x-reverse: 0;
99509966
margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse));
@@ -9953,8 +9969,13 @@ test('space-x', async () => {
99539969

99549970
:where(.space-x-0 > :not(:last-child)) {
99559971
--tw-space-x-reverse: 0;
9956-
margin-inline-start: calc(0 * var(--tw-space-x-reverse));
9957-
margin-inline-end: calc(0 * calc(1 - var(--tw-space-x-reverse)));
9972+
margin-inline: 0;
9973+
}
9974+
9975+
:where(.space-x-1 > :not(:last-child)) {
9976+
--tw-space-x-reverse: 0;
9977+
margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
9978+
margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
99589979
}
99599980

99609981
:where(.space-x-4 > :not(:last-child)) {
@@ -9963,6 +9984,11 @@ test('space-x', async () => {
99639984
margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse)));
99649985
}
99659986

9987+
:where(.space-x-\\[0\\] > :not(:last-child)), :where(.space-x-\\[0px\\] > :not(:last-child)) {
9988+
--tw-space-x-reverse: 0;
9989+
margin-inline: 0;
9990+
}
9991+
99669992
:where(.space-x-\\[4px\\] > :not(:last-child)) {
99679993
--tw-space-x-reverse: 0;
99689994
margin-inline-start: calc(4px * var(--tw-space-x-reverse));
@@ -9982,7 +10008,16 @@ test('space-x', async () => {
998210008
test('space-y', async () => {
998310009
expect(
998410010
await run(
9985-
['space-y-0', 'space-y-4', 'space-y-[4px]', '-space-y-4'],
10011+
[
10012+
'space-y-0',
10013+
'space-y-[0]',
10014+
'space-y-[0px]',
10015+
'space-y-1',
10016+
'-space-y-1',
10017+
'space-y-4',
10018+
'space-y-[4px]',
10019+
'-space-y-4',
10020+
],
998610021
css`
998710022
@theme {
998810023
--spacing: 0.25rem;
@@ -10002,9 +10037,16 @@ test('space-y', async () => {
1000210037
}
1000310038

1000410039
:root, :host {
10040+
--spacing: .25rem;
1000510041
--spacing-4: 1rem;
1000610042
}
1000710043

10044+
:where(.-space-y-1 > :not(:last-child)) {
10045+
--tw-space-y-reverse: 0;
10046+
margin-block-start: calc(calc(var(--spacing) * -1) * var(--tw-space-y-reverse));
10047+
margin-block-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-y-reverse)));
10048+
}
10049+
1000810050
:where(.-space-y-4 > :not(:last-child)) {
1000910051
--tw-space-y-reverse: 0;
1001010052
margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse));
@@ -10013,8 +10055,13 @@ test('space-y', async () => {
1001310055

1001410056
:where(.space-y-0 > :not(:last-child)) {
1001510057
--tw-space-y-reverse: 0;
10016-
margin-block-start: calc(0 * var(--tw-space-y-reverse));
10017-
margin-block-end: calc(0 * calc(1 - var(--tw-space-y-reverse)));
10058+
margin-block: 0;
10059+
}
10060+
10061+
:where(.space-y-1 > :not(:last-child)) {
10062+
--tw-space-y-reverse: 0;
10063+
margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
10064+
margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
1001810065
}
1001910066

1002010067
:where(.space-y-4 > :not(:last-child)) {
@@ -10023,6 +10070,11 @@ test('space-y', async () => {
1002310070
margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
1002410071
}
1002510072

10073+
:where(.space-y-\\[0\\] > :not(:last-child)), :where(.space-y-\\[0px\\] > :not(:last-child)) {
10074+
--tw-space-y-reverse: 0;
10075+
margin-block: 0;
10076+
}
10077+
1002610078
:where(.space-y-\\[4px\\] > :not(:last-child)) {
1002710079
--tw-space-y-reverse: 0;
1002810080
margin-block-start: calc(4px * var(--tw-space-y-reverse));

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type { DesignSystem } from './design-system'
1515
import type { Theme, ThemeKey } from './theme'
1616
import { compareBreakpoints } from './utils/compare-breakpoints'
1717
import { DefaultMap } from './utils/default-map'
18+
import { dimensions } from './utils/dimensions'
1819
import { unescape } from './utils/escape'
1920
import {
2021
inferDataType,
@@ -2119,31 +2120,59 @@ export function createUtilities(theme: Theme) {
21192120
spacingUtility(
21202121
'space-x',
21212122
['--space', '--spacing'],
2122-
(value) => [
2123-
atRoot([property('--tw-space-x-reverse', '0')]),
2123+
(value) => {
2124+
let zero = (() => {
2125+
if (value === '--spacing(0)') return true
21242126

2125-
styleRule(':where(& > :not(:last-child))', [
2126-
decl('--tw-sort', 'row-gap'),
2127-
decl('--tw-space-x-reverse', '0'),
2128-
decl('margin-inline-start', `calc(${value} * var(--tw-space-x-reverse))`),
2129-
decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`),
2130-
]),
2131-
],
2127+
let parsed = dimensions.get(value)
2128+
if (parsed && parsed[0] === 0) return true
2129+
2130+
return false
2131+
})()
2132+
2133+
return [
2134+
atRoot([property('--tw-space-x-reverse', '0')]),
2135+
2136+
styleRule(':where(& > :not(:last-child))', [
2137+
decl('--tw-sort', 'row-gap'),
2138+
decl('--tw-space-x-reverse', '0'),
2139+
decl('margin-inline-start', zero ? '0' : `calc(${value} * var(--tw-space-x-reverse))`),
2140+
decl(
2141+
'margin-inline-end',
2142+
zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
2143+
),
2144+
]),
2145+
]
2146+
},
21322147
{ supportsNegative: true },
21332148
)
21342149

21352150
spacingUtility(
21362151
'space-y',
21372152
['--space', '--spacing'],
2138-
(value) => [
2139-
atRoot([property('--tw-space-y-reverse', '0')]),
2140-
styleRule(':where(& > :not(:last-child))', [
2141-
decl('--tw-sort', 'column-gap'),
2142-
decl('--tw-space-y-reverse', '0'),
2143-
decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`),
2144-
decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`),
2145-
]),
2146-
],
2153+
(value) => {
2154+
let zero = (() => {
2155+
if (value === '--spacing(0)') return true
2156+
2157+
let parsed = dimensions.get(value)
2158+
if (parsed && parsed[0] === 0) return true
2159+
2160+
return false
2161+
})()
2162+
2163+
return [
2164+
atRoot([property('--tw-space-y-reverse', '0')]),
2165+
styleRule(':where(& > :not(:last-child))', [
2166+
decl('--tw-sort', 'column-gap'),
2167+
decl('--tw-space-y-reverse', '0'),
2168+
decl('margin-block-start', zero ? '0' : `calc(${value} * var(--tw-space-y-reverse))`),
2169+
decl(
2170+
'margin-block-end',
2171+
zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
2172+
),
2173+
]),
2174+
]
2175+
},
21472176
{ supportsNegative: true },
21482177
)
21492178

0 commit comments

Comments
 (0)