Skip to content

Commit e4b32a7

Browse files
thecrypticacethecrypticace
authored
Add size-* shorthand (#12287)
* Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog
1 parent 9d83400 commit e4b32a7

File tree

5 files changed

+383
-0
lines changed

5 files changed

+383
-0
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2929
- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
3030
- Support loading plugins by package / file name ([#12087](https://github.com/tailwindlabs/tailwindcss/pull/12087))
3131
- Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180))
32+
- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287))
3233

3334
### Changed
3435

‎src/corePlugins.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -773,6 +773,8 @@ export let corePlugins = {
773773

774774
aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
775775

776+
size: createUtilityPlugin('size', [['size', ['width', 'height']]]),
777+
776778
height: createUtilityPlugin('height', [['h', ['height']]]),
777779
maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
778780
minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),

‎stubs/config.full.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -968,6 +968,40 @@ module.exports = {
968968
'3/4': '75%',
969969
full: '100%',
970970
}),
971+
size: ({ theme }) => ({
972+
auto: 'auto',
973+
...theme('spacing'),
974+
'1/2': '50%',
975+
'1/3': '33.333333%',
976+
'2/3': '66.666667%',
977+
'1/4': '25%',
978+
'2/4': '50%',
979+
'3/4': '75%',
980+
'1/5': '20%',
981+
'2/5': '40%',
982+
'3/5': '60%',
983+
'4/5': '80%',
984+
'1/6': '16.666667%',
985+
'2/6': '33.333333%',
986+
'3/6': '50%',
987+
'4/6': '66.666667%',
988+
'5/6': '83.333333%',
989+
'1/12': '8.333333%',
990+
'2/12': '16.666667%',
991+
'3/12': '25%',
992+
'4/12': '33.333333%',
993+
'5/12': '41.666667%',
994+
'6/12': '50%',
995+
'7/12': '58.333333%',
996+
'8/12': '66.666667%',
997+
'9/12': '75%',
998+
'10/12': '83.333333%',
999+
'11/12': '91.666667%',
1000+
full: '100%',
1001+
min: 'min-content',
1002+
max: 'max-content',
1003+
fit: 'fit-content',
1004+
}),
9711005
width: ({ theme }) => ({
9721006
auto: 'auto',
9731007
...theme('spacing'),

‎tests/plugins/__snapshots__/size.test.js.snap

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should test the 'size' plugin 1`] = `
4+
"
5+
.size-0 {
6+
width: 0;
7+
height: 0;
8+
}
9+
10+
.size-0\\.5 {
11+
width: .125rem;
12+
height: .125rem;
13+
}
14+
15+
.size-1 {
16+
width: .25rem;
17+
height: .25rem;
18+
}
19+
20+
.size-1\\.5 {
21+
width: .375rem;
22+
height: .375rem;
23+
}
24+
25+
.size-1\\/12 {
26+
width: 8.33333%;
27+
height: 8.33333%;
28+
}
29+
30+
.size-1\\/2 {
31+
width: 50%;
32+
height: 50%;
33+
}
34+
35+
.size-1\\/3 {
36+
width: 33.3333%;
37+
height: 33.3333%;
38+
}
39+
40+
.size-1\\/4 {
41+
width: 25%;
42+
height: 25%;
43+
}
44+
45+
.size-1\\/5 {
46+
width: 20%;
47+
height: 20%;
48+
}
49+
50+
.size-1\\/6 {
51+
width: 16.6667%;
52+
height: 16.6667%;
53+
}
54+
55+
.size-10 {
56+
width: 2.5rem;
57+
height: 2.5rem;
58+
}
59+
60+
.size-10\\/12 {
61+
width: 83.3333%;
62+
height: 83.3333%;
63+
}
64+
65+
.size-11 {
66+
width: 2.75rem;
67+
height: 2.75rem;
68+
}
69+
70+
.size-11\\/12 {
71+
width: 91.6667%;
72+
height: 91.6667%;
73+
}
74+
75+
.size-12 {
76+
width: 3rem;
77+
height: 3rem;
78+
}
79+
80+
.size-14 {
81+
width: 3.5rem;
82+
height: 3.5rem;
83+
}
84+
85+
.size-16 {
86+
width: 4rem;
87+
height: 4rem;
88+
}
89+
90+
.size-2 {
91+
width: .5rem;
92+
height: .5rem;
93+
}
94+
95+
.size-2\\.5 {
96+
width: .625rem;
97+
height: .625rem;
98+
}
99+
100+
.size-2\\/12 {
101+
width: 16.6667%;
102+
height: 16.6667%;
103+
}
104+
105+
.size-2\\/3 {
106+
width: 66.6667%;
107+
height: 66.6667%;
108+
}
109+
110+
.size-2\\/4 {
111+
width: 50%;
112+
height: 50%;
113+
}
114+
115+
.size-2\\/5 {
116+
width: 40%;
117+
height: 40%;
118+
}
119+
120+
.size-2\\/6 {
121+
width: 33.3333%;
122+
height: 33.3333%;
123+
}
124+
125+
.size-20 {
126+
width: 5rem;
127+
height: 5rem;
128+
}
129+
130+
.size-24 {
131+
width: 6rem;
132+
height: 6rem;
133+
}
134+
135+
.size-28 {
136+
width: 7rem;
137+
height: 7rem;
138+
}
139+
140+
.size-3 {
141+
width: .75rem;
142+
height: .75rem;
143+
}
144+
145+
.size-3\\.5 {
146+
width: .875rem;
147+
height: .875rem;
148+
}
149+
150+
.size-3\\/12 {
151+
width: 25%;
152+
height: 25%;
153+
}
154+
155+
.size-3\\/4 {
156+
width: 75%;
157+
height: 75%;
158+
}
159+
160+
.size-3\\/5 {
161+
width: 60%;
162+
height: 60%;
163+
}
164+
165+
.size-3\\/6 {
166+
width: 50%;
167+
height: 50%;
168+
}
169+
170+
.size-32 {
171+
width: 8rem;
172+
height: 8rem;
173+
}
174+
175+
.size-36 {
176+
width: 9rem;
177+
height: 9rem;
178+
}
179+
180+
.size-4 {
181+
width: 1rem;
182+
height: 1rem;
183+
}
184+
185+
.size-4\\/12 {
186+
width: 33.3333%;
187+
height: 33.3333%;
188+
}
189+
190+
.size-4\\/5 {
191+
width: 80%;
192+
height: 80%;
193+
}
194+
195+
.size-4\\/6 {
196+
width: 66.6667%;
197+
height: 66.6667%;
198+
}
199+
200+
.size-40 {
201+
width: 10rem;
202+
height: 10rem;
203+
}
204+
205+
.size-44 {
206+
width: 11rem;
207+
height: 11rem;
208+
}
209+
210+
.size-48 {
211+
width: 12rem;
212+
height: 12rem;
213+
}
214+
215+
.size-5 {
216+
width: 1.25rem;
217+
height: 1.25rem;
218+
}
219+
220+
.size-5\\/12 {
221+
width: 41.6667%;
222+
height: 41.6667%;
223+
}
224+
225+
.size-5\\/6 {
226+
width: 83.3333%;
227+
height: 83.3333%;
228+
}
229+
230+
.size-52 {
231+
width: 13rem;
232+
height: 13rem;
233+
}
234+
235+
.size-56 {
236+
width: 14rem;
237+
height: 14rem;
238+
}
239+
240+
.size-6 {
241+
width: 1.5rem;
242+
height: 1.5rem;
243+
}
244+
245+
.size-6\\/12 {
246+
width: 50%;
247+
height: 50%;
248+
}
249+
250+
.size-60 {
251+
width: 15rem;
252+
height: 15rem;
253+
}
254+
255+
.size-64 {
256+
width: 16rem;
257+
height: 16rem;
258+
}
259+
260+
.size-7 {
261+
width: 1.75rem;
262+
height: 1.75rem;
263+
}
264+
265+
.size-7\\/12 {
266+
width: 58.3333%;
267+
height: 58.3333%;
268+
}
269+
270+
.size-72 {
271+
width: 18rem;
272+
height: 18rem;
273+
}
274+
275+
.size-8 {
276+
width: 2rem;
277+
height: 2rem;
278+
}
279+
280+
.size-8\\/12 {
281+
width: 66.6667%;
282+
height: 66.6667%;
283+
}
284+
285+
.size-80 {
286+
width: 20rem;
287+
height: 20rem;
288+
}
289+
290+
.size-9 {
291+
width: 2.25rem;
292+
height: 2.25rem;
293+
}
294+
295+
.size-9\\/12 {
296+
width: 75%;
297+
height: 75%;
298+
}
299+
300+
.size-96 {
301+
width: 24rem;
302+
height: 24rem;
303+
}
304+
305+
.size-auto {
306+
width: auto;
307+
height: auto;
308+
}
309+
310+
.size-fit {
311+
width: -moz-fit-content;
312+
width: fit-content;
313+
height: -moz-fit-content;
314+
height: fit-content;
315+
}
316+
317+
.size-full {
318+
width: 100%;
319+
height: 100%;
320+
}
321+
322+
.size-max {
323+
width: max-content;
324+
height: max-content;
325+
}
326+
327+
.size-min {
328+
width: min-content;
329+
height: min-content;
330+
}
331+
332+
.size-px {
333+
width: 1px;
334+
height: 1px;
335+
}
336+
"
337+
`;

0 commit comments

Comments
 (0)