Skip to content

Commit dbb5b1d

Browse files
JuanM04reinink
JuanM04
and
reinink
authored
Added border-spacing utility (#7102)
* Added `border-spacing` utility * Update to base CSS variable approach Co-authored-by: Jonathan Reinink <[email protected]>
1 parent deee3b1 commit dbb5b1d

17 files changed

+404
-305
lines changed

‎src/corePlugins.js

+35
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,41 @@ export let corePlugins = {
529529
})
530530
},
531531

532+
borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
533+
addDefaults('border-spacing', {
534+
'--tw-border-spacing-x': 0,
535+
'--tw-border-spacing-y': 0,
536+
})
537+
538+
matchUtilities(
539+
{
540+
'border-spacing': (value) => {
541+
return {
542+
'--tw-border-spacing-x': value,
543+
'--tw-border-spacing-y': value,
544+
'@defaults border-spacing': {},
545+
'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
546+
}
547+
},
548+
'border-spacing-x': (value) => {
549+
return {
550+
'--tw-border-spacing-x': value,
551+
'@defaults border-spacing': {},
552+
'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
553+
}
554+
},
555+
'border-spacing-y': (value) => {
556+
return {
557+
'--tw-border-spacing-y': value,
558+
'@defaults border-spacing': {},
559+
'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
560+
}
561+
},
562+
},
563+
{ values: theme('borderSpacing') }
564+
)
565+
},
566+
532567
transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
533568
translate: createUtilityPlugin(
534569
'translate',

‎stubs/defaultConfig.stub.js

+3
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,9 @@ module.exports = {
194194
'3xl': '1.5rem',
195195
full: '9999px',
196196
},
197+
borderSpacing: ({ theme }) => ({
198+
...theme('spacing'),
199+
}),
197200
borderWidth: {
198201
DEFAULT: '1px',
199202
0: '0px',

‎tests/__snapshots__/source-maps.test.js.snap

+317
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`apply generates source maps 1`] = `
4+
Array [
5+
"2:4 -> 2:4",
6+
"3:6-27 -> 3:6-27",
7+
"4:6-33 -> 4:6-18",
8+
"4:6-33 -> 5:6-17",
9+
"4:6-33 -> 6:6-24",
10+
"4:6-33 -> 7:6-61",
11+
"5:4 -> 8:4",
12+
"7:4 -> 10:4",
13+
"8:6-39 -> 11:6-39",
14+
"9:6-31 -> 12:6-18",
15+
"9:6-31 -> 13:6-17",
16+
"9:6-31 -> 14:6-24",
17+
"9:6-31 -> 15:6-61",
18+
"10:4 -> 16:4",
19+
"13:6 -> 18:4",
20+
"13:6-29 -> 19:6-18",
21+
"13:6-29 -> 20:6-17",
22+
"13:6-29 -> 21:6-24",
23+
"13:6 -> 22:6",
24+
"13:29 -> 23:0",
25+
]
26+
`;
27+
28+
exports[`components have source maps 1`] = `
29+
Array [
30+
"2:4 -> 1:0",
31+
"2:4 -> 2:4",
32+
"2:24 -> 3:0",
33+
"2:4 -> 4:0",
34+
"2:4 -> 5:4",
35+
"2:4 -> 6:8",
36+
"2:24 -> 7:4",
37+
"2:24 -> 8:0",
38+
"2:4 -> 9:0",
39+
"2:4 -> 10:4",
40+
"2:4 -> 11:8",
41+
"2:24 -> 12:4",
42+
"2:24 -> 13:0",
43+
"2:4 -> 14:0",
44+
"2:4 -> 15:4",
45+
"2:4 -> 16:8",
46+
"2:24 -> 17:4",
47+
"2:24 -> 18:0",
48+
"2:4 -> 19:0",
49+
"2:4 -> 20:4",
50+
"2:4 -> 21:8",
51+
"2:24 -> 22:4",
52+
"2:24 -> 23:0",
53+
"2:4 -> 24:0",
54+
"2:4 -> 25:4",
55+
"2:4 -> 26:8",
56+
"2:24 -> 27:4",
57+
"2:24 -> 28:0",
58+
]
59+
`;
60+
61+
exports[`preflight + base have source maps 1`] = `
62+
Array [
63+
"2:4 -> 1:0",
64+
"2:18-4 -> 3:1-2",
65+
"2:18 -> 6:1",
66+
"2:4 -> 8:0",
67+
"2:4-18 -> 11:2-32",
68+
"2:4-18 -> 12:2-25",
69+
"2:4-18 -> 13:2-29",
70+
"2:4-18 -> 14:2-31",
71+
"2:18 -> 15:0",
72+
"2:4 -> 17:0",
73+
"2:4-18 -> 19:2-18",
74+
"2:18 -> 20:0",
75+
"2:4 -> 22:0",
76+
"2:18 -> 27:1",
77+
"2:4 -> 29:0",
78+
"2:4-18 -> 30:2-26",
79+
"2:4-18 -> 31:2-40",
80+
"2:4-18 -> 32:2-26",
81+
"2:4-18 -> 33:2-21",
82+
"2:4-18 -> 34:2-230",
83+
"2:18 -> 35:0",
84+
"2:4 -> 37:0",
85+
"2:18 -> 40:1",
86+
"2:4 -> 42:0",
87+
"2:4-18 -> 43:2-19",
88+
"2:4-18 -> 44:2-30",
89+
"2:18 -> 45:0",
90+
"2:4 -> 47:0",
91+
"2:18 -> 51:1",
92+
"2:4 -> 53:0",
93+
"2:4-18 -> 54:2-19",
94+
"2:4-18 -> 55:2-24",
95+
"2:4-18 -> 56:2-31",
96+
"2:18 -> 57:0",
97+
"2:4 -> 59:0",
98+
"2:18 -> 61:1",
99+
"2:4 -> 63:0",
100+
"2:4-18 -> 64:2-35",
101+
"2:18 -> 65:0",
102+
"2:4 -> 67:0",
103+
"2:18 -> 69:1",
104+
"2:4 -> 71:0",
105+
"2:4-18 -> 77:2-20",
106+
"2:4-18 -> 78:2-22",
107+
"2:18 -> 79:0",
108+
"2:4 -> 81:0",
109+
"2:18 -> 83:1",
110+
"2:4 -> 85:0",
111+
"2:4-18 -> 86:2-16",
112+
"2:4-18 -> 87:2-26",
113+
"2:18 -> 88:0",
114+
"2:4 -> 90:0",
115+
"2:18 -> 92:1",
116+
"2:4 -> 94:0",
117+
"2:4-18 -> 96:2-21",
118+
"2:18 -> 97:0",
119+
"2:4 -> 99:0",
120+
"2:18 -> 102:1",
121+
"2:4 -> 104:0",
122+
"2:4-18 -> 108:2-121",
123+
"2:4-18 -> 109:2-24",
124+
"2:18 -> 110:0",
125+
"2:4 -> 112:0",
126+
"2:18 -> 114:1",
127+
"2:4 -> 116:0",
128+
"2:4-18 -> 117:2-16",
129+
"2:18 -> 118:0",
130+
"2:4 -> 120:0",
131+
"2:18 -> 122:1",
132+
"2:4 -> 124:0",
133+
"2:4-18 -> 126:2-16",
134+
"2:4-18 -> 127:2-16",
135+
"2:4-18 -> 128:2-20",
136+
"2:4-18 -> 129:2-26",
137+
"2:18 -> 130:0",
138+
"2:4 -> 132:0",
139+
"2:4-18 -> 133:2-17",
140+
"2:18 -> 134:0",
141+
"2:4 -> 136:0",
142+
"2:4-18 -> 137:2-13",
143+
"2:18 -> 138:0",
144+
"2:4 -> 140:0",
145+
"2:18 -> 144:1",
146+
"2:4 -> 146:0",
147+
"2:4-18 -> 147:2-24",
148+
"2:4-18 -> 148:2-31",
149+
"2:4-18 -> 149:2-35",
150+
"2:18 -> 150:0",
151+
"2:4 -> 152:0",
152+
"2:18 -> 156:1",
153+
"2:4 -> 158:0",
154+
"2:4-18 -> 163:2-30",
155+
"2:4-18 -> 164:2-25",
156+
"2:4-18 -> 165:2-30",
157+
"2:4-18 -> 166:2-24",
158+
"2:4-18 -> 167:2-19",
159+
"2:4-18 -> 168:2-20",
160+
"2:18 -> 169:0",
161+
"2:4 -> 171:0",
162+
"2:18 -> 173:1",
163+
"2:4 -> 175:0",
164+
"2:4-18 -> 177:2-22",
165+
"2:18 -> 178:0",
166+
"2:4 -> 180:0",
167+
"2:18 -> 183:1",
168+
"2:4 -> 185:0",
169+
"2:4-18 -> 189:2-36",
170+
"2:4-18 -> 190:2-39",
171+
"2:4-18 -> 191:2-32",
172+
"2:18 -> 192:0",
173+
"2:4 -> 194:0",
174+
"2:18 -> 196:1",
175+
"2:4 -> 198:0",
176+
"2:4-18 -> 199:2-15",
177+
"2:18 -> 200:0",
178+
"2:4 -> 202:0",
179+
"2:18 -> 204:1",
180+
"2:4 -> 206:0",
181+
"2:4-18 -> 207:2-18",
182+
"2:18 -> 208:0",
183+
"2:4 -> 210:0",
184+
"2:18 -> 212:1",
185+
"2:4 -> 214:0",
186+
"2:4-18 -> 215:2-26",
187+
"2:18 -> 216:0",
188+
"2:4 -> 218:0",
189+
"2:18 -> 220:1",
190+
"2:4 -> 222:0",
191+
"2:4-18 -> 224:2-14",
192+
"2:18 -> 225:0",
193+
"2:4 -> 227:0",
194+
"2:18 -> 230:1",
195+
"2:4 -> 232:0",
196+
"2:4-18 -> 233:2-39",
197+
"2:4-18 -> 234:2-30",
198+
"2:18 -> 235:0",
199+
"2:4 -> 237:0",
200+
"2:18 -> 239:1",
201+
"2:4 -> 241:0",
202+
"2:4-18 -> 242:2-26",
203+
"2:18 -> 243:0",
204+
"2:4 -> 245:0",
205+
"2:18 -> 248:1",
206+
"2:4 -> 250:0",
207+
"2:4-18 -> 251:2-36",
208+
"2:4-18 -> 252:2-23",
209+
"2:18 -> 253:0",
210+
"2:4 -> 255:0",
211+
"2:18 -> 257:1",
212+
"2:4 -> 259:0",
213+
"2:4-18 -> 260:2-20",
214+
"2:18 -> 261:0",
215+
"2:4 -> 263:0",
216+
"2:18 -> 265:1",
217+
"2:4 -> 267:0",
218+
"2:4-18 -> 280:2-11",
219+
"2:18 -> 281:0",
220+
"2:4 -> 283:0",
221+
"2:4-18 -> 284:2-11",
222+
"2:4-18 -> 285:2-12",
223+
"2:18 -> 286:0",
224+
"2:4 -> 288:0",
225+
"2:4-18 -> 289:2-12",
226+
"2:18 -> 290:0",
227+
"2:4 -> 292:0",
228+
"2:4-18 -> 295:2-18",
229+
"2:4-18 -> 296:2-11",
230+
"2:4-18 -> 297:2-12",
231+
"2:18 -> 298:0",
232+
"2:4 -> 300:0",
233+
"2:18 -> 302:1",
234+
"2:4 -> 304:0",
235+
"2:4-18 -> 305:2-18",
236+
"2:18 -> 306:0",
237+
"2:4 -> 308:0",
238+
"2:18 -> 311:1",
239+
"2:4 -> 313:0",
240+
"2:4-18 -> 315:2-20",
241+
"2:4-18 -> 316:2-24",
242+
"2:18 -> 317:0",
243+
"2:4 -> 319:0",
244+
"2:18 -> 321:1",
245+
"2:4 -> 323:0",
246+
"2:4-18 -> 325:2-17",
247+
"2:18 -> 326:0",
248+
"2:4 -> 328:0",
249+
"2:18 -> 330:1",
250+
"2:4 -> 331:0",
251+
"2:4-18 -> 332:2-17",
252+
"2:18 -> 333:0",
253+
"2:4 -> 335:0",
254+
"2:18 -> 339:1",
255+
"2:4 -> 341:0",
256+
"2:4-18 -> 349:2-24",
257+
"2:4-18 -> 350:2-32",
258+
"2:18 -> 351:0",
259+
"2:4 -> 353:0",
260+
"2:18 -> 355:1",
261+
"2:4 -> 357:0",
262+
"2:4-18 -> 359:2-17",
263+
"2:4-18 -> 360:2-14",
264+
"2:18 -> 361:0",
265+
"2:4 -> 363:0",
266+
"2:18 -> 365:1",
267+
"2:4 -> 367:0",
268+
"2:4-18 -> 368:2-15",
269+
"2:18 -> 369:0",
270+
"2:4 -> 371:0",
271+
"2:4-18 -> 372:2-26",
272+
"2:4-18 -> 373:2-26",
273+
"2:4-18 -> 374:2-21",
274+
"2:4-18 -> 375:2-21",
275+
"2:4-18 -> 376:2-16",
276+
"2:4-18 -> 377:2-16",
277+
"2:4-18 -> 378:2-16",
278+
"2:4-18 -> 379:2-17",
279+
"2:4-18 -> 380:2-17",
280+
"2:4-18 -> 381:2-15",
281+
"2:4-18 -> 382:2-15",
282+
"2:4-18 -> 383:2-20",
283+
"2:4-18 -> 384:2-40",
284+
"2:4-18 -> 385:2-17",
285+
"2:4-18 -> 386:2-22",
286+
"2:4-18 -> 387:2-24",
287+
"2:4-18 -> 388:2-25",
288+
"2:4-18 -> 389:2-26",
289+
"2:4-18 -> 390:2-20",
290+
"2:4-18 -> 391:2-29",
291+
"2:4-18 -> 392:2-30",
292+
"2:4-18 -> 393:2-40",
293+
"2:4-18 -> 394:2-36",
294+
"2:4-18 -> 395:2-29",
295+
"2:4-18 -> 396:2-24",
296+
"2:4-18 -> 397:2-32",
297+
"2:4-18 -> 398:2-14",
298+
"2:4-18 -> 399:2-20",
299+
"2:4-18 -> 400:2-18",
300+
"2:4-18 -> 401:2-19",
301+
"2:4-18 -> 402:2-20",
302+
"2:4-18 -> 403:2-16",
303+
"2:4-18 -> 404:2-18",
304+
"2:4-18 -> 405:2-15",
305+
"2:4-18 -> 406:2-21",
306+
"2:4-18 -> 407:2-23",
307+
"2:4-18 -> 408:2-29",
308+
"2:4-18 -> 409:2-27",
309+
"2:4-18 -> 410:2-28",
310+
"2:4-18 -> 411:2-29",
311+
"2:4-18 -> 412:2-25",
312+
"2:4-18 -> 413:2-26",
313+
"2:4-18 -> 414:2-27",
314+
"2:4 -> 415:2",
315+
"2:18 -> 416:0",
316+
]
317+
`;

‎tests/basic-usage.test.css

+15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
*,
22
::before,
33
::after {
4+
--tw-border-spacing-x: 0;
5+
--tw-border-spacing-y: 0;
46
--tw-translate-x: 0;
57
--tw-translate-y: 0;
68
--tw-rotate: 0;
@@ -252,6 +254,19 @@
252254
.border-collapse {
253255
border-collapse: collapse;
254256
}
257+
.border-spacing-4 {
258+
--tw-border-spacing-x: 1rem;
259+
--tw-border-spacing-y: 1rem;
260+
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
261+
}
262+
.border-spacing-x-6 {
263+
--tw-border-spacing-x: 1.5rem;
264+
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
265+
}
266+
.border-spacing-y-8 {
267+
--tw-border-spacing-y: 2rem;
268+
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
269+
}
255270
.origin-top-right {
256271
transform-origin: top right;
257272
}

0 commit comments

Comments
 (0)