Skip to content

Commit 5f05677

Browse files
adamwathanadamwathan
committed
Fix missing unit in calc bug in space plugin
1 parent 072c60c commit 5f05677

File tree

4 files changed

+55
-44
lines changed

4 files changed

+55
-44
lines changed

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -608,14 +608,14 @@ video {
608608

609609
.space-y-0 > :not(template) ~ :not(template) {
610610
--space-y-reverse: 0 !important;
611-
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
612-
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
611+
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
612+
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
613613
}
614614

615615
.space-x-0 > :not(template) ~ :not(template) {
616616
--space-x-reverse: 0 !important;
617-
margin-right: calc(0 * var(--space-x-reverse)) !important;
618-
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
617+
margin-right: calc(0px * var(--space-x-reverse)) !important;
618+
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
619619
}
620620

621621
.space-y-1 > :not(template) ~ :not(template) {
@@ -11897,14 +11897,14 @@ video {
1189711897
@media (min-width: 640px) {
1189811898
.sm\:space-y-0 > :not(template) ~ :not(template) {
1189911899
--space-y-reverse: 0 !important;
11900-
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
11901-
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
11900+
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
11901+
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
1190211902
}
1190311903

1190411904
.sm\:space-x-0 > :not(template) ~ :not(template) {
1190511905
--space-x-reverse: 0 !important;
11906-
margin-right: calc(0 * var(--space-x-reverse)) !important;
11907-
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
11906+
margin-right: calc(0px * var(--space-x-reverse)) !important;
11907+
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
1190811908
}
1190911909

1191011910
.sm\:space-y-1 > :not(template) ~ :not(template) {
@@ -23187,14 +23187,14 @@ video {
2318723187
@media (min-width: 768px) {
2318823188
.md\:space-y-0 > :not(template) ~ :not(template) {
2318923189
--space-y-reverse: 0 !important;
23190-
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
23191-
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
23190+
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
23191+
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
2319223192
}
2319323193

2319423194
.md\:space-x-0 > :not(template) ~ :not(template) {
2319523195
--space-x-reverse: 0 !important;
23196-
margin-right: calc(0 * var(--space-x-reverse)) !important;
23197-
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
23196+
margin-right: calc(0px * var(--space-x-reverse)) !important;
23197+
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
2319823198
}
2319923199

2320023200
.md\:space-y-1 > :not(template) ~ :not(template) {
@@ -34477,14 +34477,14 @@ video {
3447734477
@media (min-width: 1024px) {
3447834478
.lg\:space-y-0 > :not(template) ~ :not(template) {
3447934479
--space-y-reverse: 0 !important;
34480-
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
34481-
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
34480+
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
34481+
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
3448234482
}
3448334483

3448434484
.lg\:space-x-0 > :not(template) ~ :not(template) {
3448534485
--space-x-reverse: 0 !important;
34486-
margin-right: calc(0 * var(--space-x-reverse)) !important;
34487-
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
34486+
margin-right: calc(0px * var(--space-x-reverse)) !important;
34487+
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
3448834488
}
3448934489

3449034490
.lg\:space-y-1 > :not(template) ~ :not(template) {
@@ -45767,14 +45767,14 @@ video {
4576745767
@media (min-width: 1280px) {
4576845768
.xl\:space-y-0 > :not(template) ~ :not(template) {
4576945769
--space-y-reverse: 0 !important;
45770-
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
45771-
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
45770+
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
45771+
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
4577245772
}
4577345773

4577445774
.xl\:space-x-0 > :not(template) ~ :not(template) {
4577545775
--space-x-reverse: 0 !important;
45776-
margin-right: calc(0 * var(--space-x-reverse)) !important;
45777-
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
45776+
margin-right: calc(0px * var(--space-x-reverse)) !important;
45777+
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
4577845778
}
4577945779

4578045780
.xl\:space-y-1 > :not(template) ~ :not(template) {

‎__tests__/fixtures/tailwind-output.css

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -608,14 +608,14 @@ video {
608608

609609
.space-y-0 > :not(template) ~ :not(template) {
610610
--space-y-reverse: 0;
611-
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
612-
margin-bottom: calc(0 * var(--space-y-reverse));
611+
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
612+
margin-bottom: calc(0px * var(--space-y-reverse));
613613
}
614614

615615
.space-x-0 > :not(template) ~ :not(template) {
616616
--space-x-reverse: 0;
617-
margin-right: calc(0 * var(--space-x-reverse));
618-
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
617+
margin-right: calc(0px * var(--space-x-reverse));
618+
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
619619
}
620620

621621
.space-y-1 > :not(template) ~ :not(template) {
@@ -11897,14 +11897,14 @@ video {
1189711897
@media (min-width: 640px) {
1189811898
.sm\:space-y-0 > :not(template) ~ :not(template) {
1189911899
--space-y-reverse: 0;
11900-
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
11901-
margin-bottom: calc(0 * var(--space-y-reverse));
11900+
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
11901+
margin-bottom: calc(0px * var(--space-y-reverse));
1190211902
}
1190311903

1190411904
.sm\:space-x-0 > :not(template) ~ :not(template) {
1190511905
--space-x-reverse: 0;
11906-
margin-right: calc(0 * var(--space-x-reverse));
11907-
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
11906+
margin-right: calc(0px * var(--space-x-reverse));
11907+
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
1190811908
}
1190911909

1191011910
.sm\:space-y-1 > :not(template) ~ :not(template) {
@@ -23187,14 +23187,14 @@ video {
2318723187
@media (min-width: 768px) {
2318823188
.md\:space-y-0 > :not(template) ~ :not(template) {
2318923189
--space-y-reverse: 0;
23190-
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
23191-
margin-bottom: calc(0 * var(--space-y-reverse));
23190+
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
23191+
margin-bottom: calc(0px * var(--space-y-reverse));
2319223192
}
2319323193

2319423194
.md\:space-x-0 > :not(template) ~ :not(template) {
2319523195
--space-x-reverse: 0;
23196-
margin-right: calc(0 * var(--space-x-reverse));
23197-
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
23196+
margin-right: calc(0px * var(--space-x-reverse));
23197+
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
2319823198
}
2319923199

2320023200
.md\:space-y-1 > :not(template) ~ :not(template) {
@@ -34477,14 +34477,14 @@ video {
3447734477
@media (min-width: 1024px) {
3447834478
.lg\:space-y-0 > :not(template) ~ :not(template) {
3447934479
--space-y-reverse: 0;
34480-
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
34481-
margin-bottom: calc(0 * var(--space-y-reverse));
34480+
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
34481+
margin-bottom: calc(0px * var(--space-y-reverse));
3448234482
}
3448334483

3448434484
.lg\:space-x-0 > :not(template) ~ :not(template) {
3448534485
--space-x-reverse: 0;
34486-
margin-right: calc(0 * var(--space-x-reverse));
34487-
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
34486+
margin-right: calc(0px * var(--space-x-reverse));
34487+
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
3448834488
}
3448934489

3449034490
.lg\:space-y-1 > :not(template) ~ :not(template) {
@@ -45767,14 +45767,14 @@ video {
4576745767
@media (min-width: 1280px) {
4576845768
.xl\:space-y-0 > :not(template) ~ :not(template) {
4576945769
--space-y-reverse: 0;
45770-
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
45771-
margin-bottom: calc(0 * var(--space-y-reverse));
45770+
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
45771+
margin-bottom: calc(0px * var(--space-y-reverse));
4577245772
}
4577345773

4577445774
.xl\:space-x-0 > :not(template) ~ :not(template) {
4577545775
--space-x-reverse: 0;
45776-
margin-right: calc(0 * var(--space-x-reverse));
45777-
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
45776+
margin-right: calc(0px * var(--space-x-reverse));
45777+
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
4577845778
}
4577945779

4578045780
.xl\:space-y-1 > :not(template) ~ :not(template) {

‎__tests__/plugins/space.test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ test('generating space utilities', () => {
55
const config = {
66
theme: {
77
space: {
8+
'0': '0',
89
'1': '1px',
910
'2': '2px',
1011
'4': '4px',
@@ -22,6 +23,16 @@ test('generating space utilities', () => {
2223
expect(utilities).toEqual([
2324
[
2425
{
26+
'.space-y-0 > :not(template) ~ :not(template)': {
27+
'--space-y-reverse': '0',
28+
'margin-top': 'calc(0px * calc(1 - var(--space-y-reverse)))',
29+
'margin-bottom': 'calc(0px * var(--space-y-reverse))',
30+
},
31+
'.space-x-0 > :not(template) ~ :not(template)': {
32+
'--space-x-reverse': '0',
33+
'margin-right': 'calc(0px * var(--space-x-reverse))',
34+
'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
35+
},
2536
'.space-y-1 > :not(template) ~ :not(template)': {
2637
'--space-y-reverse': '0',
2738
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',

‎src/plugins/space.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ export default function() {
77
(size, modifier) => ({
88
[`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
99
'--space-y-reverse': '0',
10-
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
11-
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
10+
'margin-top': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-y-reverse)))`,
11+
'margin-bottom': `calc(${size === '0' ? '0px' : size} * var(--space-y-reverse))`,
1212
},
1313
[`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
1414
'--space-x-reverse': '0',
15-
'margin-right': `calc(${size} * var(--space-x-reverse))`,
16-
'margin-left': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
15+
'margin-right': `calc(${size === '0' ? '0px' : size} * var(--space-x-reverse))`,
16+
'margin-left': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-x-reverse)))`,
1717
},
1818
}),
1919
]

0 commit comments

Comments
 (0)