Skip to content

Commit b0c7872

Browse files
adamwathanadamwathan
committed
Fix bug where divide-x/y-0 didn't work due to missing unit in calc
1 parent e262218 commit b0c7872

File tree

4 files changed

+59
-44
lines changed

4 files changed

+59
-44
lines changed

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

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

10611061
.divide-y-0 > :not(template) ~ :not(template) {
10621062
--divide-y-reverse: 0 !important;
1063-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
1064-
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
1063+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
1064+
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
10651065
}
10661066

10671067
.divide-x-0 > :not(template) ~ :not(template) {
10681068
--divide-x-reverse: 0 !important;
1069-
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
1070-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
1069+
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
1070+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
10711071
}
10721072

10731073
.divide-y-2 > :not(template) ~ :not(template) {
@@ -12349,14 +12349,14 @@ video {
1234912349

1235012350
.sm\:divide-y-0 > :not(template) ~ :not(template) {
1235112351
--divide-y-reverse: 0 !important;
12352-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
12353-
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
12352+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
12353+
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
1235412354
}
1235512355

1235612356
.sm\:divide-x-0 > :not(template) ~ :not(template) {
1235712357
--divide-x-reverse: 0 !important;
12358-
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
12359-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
12358+
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
12359+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
1236012360
}
1236112361

1236212362
.sm\:divide-y-2 > :not(template) ~ :not(template) {
@@ -23639,14 +23639,14 @@ video {
2363923639

2364023640
.md\:divide-y-0 > :not(template) ~ :not(template) {
2364123641
--divide-y-reverse: 0 !important;
23642-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
23643-
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
23642+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
23643+
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
2364423644
}
2364523645

2364623646
.md\:divide-x-0 > :not(template) ~ :not(template) {
2364723647
--divide-x-reverse: 0 !important;
23648-
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
23649-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
23648+
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
23649+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
2365023650
}
2365123651

2365223652
.md\:divide-y-2 > :not(template) ~ :not(template) {
@@ -34929,14 +34929,14 @@ video {
3492934929

3493034930
.lg\:divide-y-0 > :not(template) ~ :not(template) {
3493134931
--divide-y-reverse: 0 !important;
34932-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
34933-
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
34932+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
34933+
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
3493434934
}
3493534935

3493634936
.lg\:divide-x-0 > :not(template) ~ :not(template) {
3493734937
--divide-x-reverse: 0 !important;
34938-
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
34939-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
34938+
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
34939+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
3494034940
}
3494134941

3494234942
.lg\:divide-y-2 > :not(template) ~ :not(template) {
@@ -46219,14 +46219,14 @@ video {
4621946219

4622046220
.xl\:divide-y-0 > :not(template) ~ :not(template) {
4622146221
--divide-y-reverse: 0 !important;
46222-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
46223-
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
46222+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
46223+
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
4622446224
}
4622546225

4622646226
.xl\:divide-x-0 > :not(template) ~ :not(template) {
4622746227
--divide-x-reverse: 0 !important;
46228-
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
46229-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
46228+
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
46229+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
4623046230
}
4623146231

4623246232
.xl\:divide-y-2 > :not(template) ~ :not(template) {

‎__tests__/fixtures/tailwind-output.css

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

10611061
.divide-y-0 > :not(template) ~ :not(template) {
10621062
--divide-y-reverse: 0;
1063-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
1064-
border-bottom-width: calc(0 * var(--divide-y-reverse));
1063+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
1064+
border-bottom-width: calc(0px * var(--divide-y-reverse));
10651065
}
10661066

10671067
.divide-x-0 > :not(template) ~ :not(template) {
10681068
--divide-x-reverse: 0;
1069-
border-right-width: calc(0 * var(--divide-x-reverse));
1070-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
1069+
border-right-width: calc(0px * var(--divide-x-reverse));
1070+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
10711071
}
10721072

10731073
.divide-y-2 > :not(template) ~ :not(template) {
@@ -12349,14 +12349,14 @@ video {
1234912349

1235012350
.sm\:divide-y-0 > :not(template) ~ :not(template) {
1235112351
--divide-y-reverse: 0;
12352-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
12353-
border-bottom-width: calc(0 * var(--divide-y-reverse));
12352+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
12353+
border-bottom-width: calc(0px * var(--divide-y-reverse));
1235412354
}
1235512355

1235612356
.sm\:divide-x-0 > :not(template) ~ :not(template) {
1235712357
--divide-x-reverse: 0;
12358-
border-right-width: calc(0 * var(--divide-x-reverse));
12359-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
12358+
border-right-width: calc(0px * var(--divide-x-reverse));
12359+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
1236012360
}
1236112361

1236212362
.sm\:divide-y-2 > :not(template) ~ :not(template) {
@@ -23639,14 +23639,14 @@ video {
2363923639

2364023640
.md\:divide-y-0 > :not(template) ~ :not(template) {
2364123641
--divide-y-reverse: 0;
23642-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
23643-
border-bottom-width: calc(0 * var(--divide-y-reverse));
23642+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
23643+
border-bottom-width: calc(0px * var(--divide-y-reverse));
2364423644
}
2364523645

2364623646
.md\:divide-x-0 > :not(template) ~ :not(template) {
2364723647
--divide-x-reverse: 0;
23648-
border-right-width: calc(0 * var(--divide-x-reverse));
23649-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
23648+
border-right-width: calc(0px * var(--divide-x-reverse));
23649+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
2365023650
}
2365123651

2365223652
.md\:divide-y-2 > :not(template) ~ :not(template) {
@@ -34929,14 +34929,14 @@ video {
3492934929

3493034930
.lg\:divide-y-0 > :not(template) ~ :not(template) {
3493134931
--divide-y-reverse: 0;
34932-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
34933-
border-bottom-width: calc(0 * var(--divide-y-reverse));
34932+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
34933+
border-bottom-width: calc(0px * var(--divide-y-reverse));
3493434934
}
3493534935

3493634936
.lg\:divide-x-0 > :not(template) ~ :not(template) {
3493734937
--divide-x-reverse: 0;
34938-
border-right-width: calc(0 * var(--divide-x-reverse));
34939-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
34938+
border-right-width: calc(0px * var(--divide-x-reverse));
34939+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
3494034940
}
3494134941

3494234942
.lg\:divide-y-2 > :not(template) ~ :not(template) {
@@ -46219,14 +46219,14 @@ video {
4621946219

4622046220
.xl\:divide-y-0 > :not(template) ~ :not(template) {
4622146221
--divide-y-reverse: 0;
46222-
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
46223-
border-bottom-width: calc(0 * var(--divide-y-reverse));
46222+
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
46223+
border-bottom-width: calc(0px * var(--divide-y-reverse));
4622446224
}
4622546225

4622646226
.xl\:divide-x-0 > :not(template) ~ :not(template) {
4622746227
--divide-x-reverse: 0;
46228-
border-right-width: calc(0 * var(--divide-x-reverse));
46229-
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
46228+
border-right-width: calc(0px * var(--divide-x-reverse));
46229+
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
4623046230
}
4623146231

4623246232
.xl\:divide-y-2 > :not(template) ~ :not(template) {

‎__tests__/plugins/divideWidth.test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ test('generating divide width utilities', () => {
66
theme: {
77
divideWidth: {
88
default: '1px',
9+
'0': '0',
910
'2': '2px',
1011
'4': '4px',
1112
},
@@ -30,6 +31,16 @@ test('generating divide width utilities', () => {
3031
'border-right-width': 'calc(1px * var(--divide-x-reverse))',
3132
'border-left-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
3233
},
34+
'.divide-y-0 > :not(template) ~ :not(template)': {
35+
'--divide-y-reverse': '0',
36+
'border-top-width': 'calc(0px * calc(1 - var(--divide-y-reverse)))',
37+
'border-bottom-width': 'calc(0px * var(--divide-y-reverse))',
38+
},
39+
'.divide-x-0 > :not(template) ~ :not(template)': {
40+
'--divide-x-reverse': '0',
41+
'border-right-width': 'calc(0px * var(--divide-x-reverse))',
42+
'border-left-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
43+
},
3344
'.divide-y-2 > :not(template) ~ :not(template)': {
3445
'--divide-y-reverse': '0',
3546
'border-top-width': 'calc(2px * calc(1 - var(--divide-y-reverse)))',

‎src/plugins/divideWidth.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@ export default function() {
66
(size, modifier) => ({
77
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
88
'--divide-y-reverse': '0',
9-
'border-top-width': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
10-
'border-bottom-width': `calc(${size} * var(--divide-y-reverse))`,
9+
'border-top-width': `calc(${
10+
size === '0' ? '0px' : size
11+
} * calc(1 - var(--divide-y-reverse)))`,
12+
'border-bottom-width': `calc(${size === '0' ? '0px' : size} * var(--divide-y-reverse))`,
1113
},
1214
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
1315
'--divide-x-reverse': '0',
14-
'border-right-width': `calc(${size} * var(--divide-x-reverse))`,
15-
'border-left-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
16+
'border-right-width': `calc(${size === '0' ? '0px' : size} * var(--divide-x-reverse))`,
17+
'border-left-width': `calc(${
18+
size === '0' ? '0px' : size
19+
} * calc(1 - var(--divide-x-reverse)))`,
1620
},
1721
}),
1822
]

0 commit comments

Comments
 (0)