Skip to content

Commit 1031312

Browse files
praburangkipraburangki
authored
feat(preset-wind4, preset-mini): layout alignments (#4722)
1 parent fa6a9df commit 1031312

File tree

5 files changed

+132
-0
lines changed

5 files changed

+132
-0
lines changed

‎packages-presets/preset-mini/src/_rules/position.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,18 @@ export const justifies: StaticRule[] = [
2525
['justify-stretch', { 'justify-content': 'stretch' }],
2626
['justify-left', { 'justify-content': 'left' }],
2727
['justify-right', { 'justify-content': 'right' }],
28+
['justify-center-safe', { 'justify-content': 'safe center' }],
29+
['justify-end-safe', { 'justify-content': 'safe flex-end' }],
30+
['justify-normal', { 'justify-content': 'normal' }],
2831
...makeGlobalStaticRules('justify', 'justify-content'),
2932

3033
// items
3134
['justify-items-start', { 'justify-items': 'start' }],
3235
['justify-items-end', { 'justify-items': 'end' }],
3336
['justify-items-center', { 'justify-items': 'center' }],
3437
['justify-items-stretch', { 'justify-items': 'stretch' }],
38+
['justify-items-center-safe', { 'justify-items': 'safe center' }],
39+
['justify-items-end-safe', { 'justify-items': 'safe flex-end' }],
3540
...makeGlobalStaticRules('justify-items'),
3641

3742
// selfs
@@ -40,6 +45,9 @@ export const justifies: StaticRule[] = [
4045
['justify-self-end', { 'justify-self': 'end' }],
4146
['justify-self-center', { 'justify-self': 'center' }],
4247
['justify-self-stretch', { 'justify-self': 'stretch' }],
48+
['justify-self-baseline', { 'justify-self': 'baseline' }],
49+
['justify-self-center-safe', { 'justify-self': 'safe center' }],
50+
['justify-self-end-safe', { 'justify-self': 'safe flex-end' }],
4351
...makeGlobalStaticRules('justify-self'),
4452
]
4553

@@ -58,6 +66,11 @@ export const alignments: StaticRule[] = [
5866
['content-between', { 'align-content': 'space-between' }],
5967
['content-around', { 'align-content': 'space-around' }],
6068
['content-evenly', { 'align-content': 'space-evenly' }],
69+
['content-baseline', { 'align-content': 'baseline' }],
70+
['content-center-safe', { 'align-content': 'safe center' }],
71+
['content-end-safe', { 'align-content': 'safe flex-end' }],
72+
['content-stretch', { 'align-content': 'stretch' }],
73+
['content-normal', { 'align-content': 'normal' }],
6174
...makeGlobalStaticRules('content', 'align-content'),
6275

6376
// items
@@ -66,6 +79,9 @@ export const alignments: StaticRule[] = [
6679
['items-center', { 'align-items': 'center' }],
6780
['items-baseline', { 'align-items': 'baseline' }],
6881
['items-stretch', { 'align-items': 'stretch' }],
82+
['items-baseline-last', { 'align-items': 'last baseline' }],
83+
['items-center-safe', { 'align-items': 'safe center' }],
84+
['items-end-safe', { 'align-items': 'safe flex-end' }],
6985
...makeGlobalStaticRules('items', 'align-items'),
7086

7187
// selfs
@@ -75,6 +91,9 @@ export const alignments: StaticRule[] = [
7591
['self-center', { 'align-self': 'center' }],
7692
['self-stretch', { 'align-self': 'stretch' }],
7793
['self-baseline', { 'align-self': 'baseline' }],
94+
['self-baseline-last', { 'align-self': 'last baseline' }],
95+
['self-center-safe', { 'align-self': 'safe center' }],
96+
['self-end-safe', { 'align-self': 'safe flex-end' }],
7897
...makeGlobalStaticRules('self', 'align-self'),
7998
]
8099

@@ -87,13 +106,19 @@ export const placements: StaticRule[] = [
87106
['place-content-around', { 'place-content': 'space-around' }],
88107
['place-content-evenly', { 'place-content': 'space-evenly' }],
89108
['place-content-stretch', { 'place-content': 'stretch' }],
109+
['place-content-baseline', { 'place-content': 'baseline' }],
110+
['place-content-center-safe', { 'place-content': 'safe center' }],
111+
['place-content-end-safe', { 'place-content': 'safe flex-end' }],
90112
...makeGlobalStaticRules('place-content'),
91113

92114
// items
93115
['place-items-start', { 'place-items': 'start' }],
94116
['place-items-end', { 'place-items': 'end' }],
95117
['place-items-center', { 'place-items': 'center' }],
96118
['place-items-stretch', { 'place-items': 'stretch' }],
119+
['place-items-baseline', { 'place-items': 'baseline' }],
120+
['place-items-center-safe', { 'place-items': 'safe center' }],
121+
['place-items-end-safe', { 'place-items': 'safe flex-end' }],
97122
...makeGlobalStaticRules('place-items'),
98123

99124
// selfs
@@ -102,6 +127,8 @@ export const placements: StaticRule[] = [
102127
['place-self-end', { 'place-self': 'end' }],
103128
['place-self-center', { 'place-self': 'center' }],
104129
['place-self-stretch', { 'place-self': 'stretch' }],
130+
['place-self-center-safe', { 'place-self': 'safe center' }],
131+
['place-self-end-safe', { 'place-self': 'safe flex-end' }],
105132
...makeGlobalStaticRules('place-self'),
106133
]
107134

‎packages-presets/preset-wind4/src/rules/position.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,18 @@ export const justifies: StaticRule[] = [
2525
['justify-stretch', { 'justify-content': 'stretch' }],
2626
['justify-left', { 'justify-content': 'left' }],
2727
['justify-right', { 'justify-content': 'right' }],
28+
['justify-center-safe', { 'justify-content': 'safe center' }],
29+
['justify-end-safe', { 'justify-content': 'safe flex-end' }],
30+
['justify-normal', { 'justify-content': 'normal' }],
2831
...makeGlobalStaticRules('justify', 'justify-content'),
2932

3033
// items
3134
['justify-items-start', { 'justify-items': 'start' }],
3235
['justify-items-end', { 'justify-items': 'end' }],
3336
['justify-items-center', { 'justify-items': 'center' }],
3437
['justify-items-stretch', { 'justify-items': 'stretch' }],
38+
['justify-items-center-safe', { 'justify-items': 'safe center' }],
39+
['justify-items-end-safe', { 'justify-items': 'safe flex-end' }],
3540
...makeGlobalStaticRules('justify-items'),
3641

3742
// selfs
@@ -40,6 +45,9 @@ export const justifies: StaticRule[] = [
4045
['justify-self-end', { 'justify-self': 'end' }],
4146
['justify-self-center', { 'justify-self': 'center' }],
4247
['justify-self-stretch', { 'justify-self': 'stretch' }],
48+
['justify-self-baseline', { 'justify-self': 'baseline' }],
49+
['justify-self-center-safe', { 'justify-self': 'safe center' }],
50+
['justify-self-end-safe', { 'justify-self': 'safe flex-end' }],
4351
...makeGlobalStaticRules('justify-self'),
4452
]
4553

@@ -58,6 +66,11 @@ export const alignments: StaticRule[] = [
5866
['content-between', { 'align-content': 'space-between' }],
5967
['content-around', { 'align-content': 'space-around' }],
6068
['content-evenly', { 'align-content': 'space-evenly' }],
69+
['content-baseline', { 'align-content': 'baseline' }],
70+
['content-center-safe', { 'align-content': 'safe center' }],
71+
['content-end-safe', { 'align-content': 'safe flex-end' }],
72+
['content-stretch', { 'align-content': 'stretch' }],
73+
['content-normal', { 'align-content': 'normal' }],
6174
...makeGlobalStaticRules('content', 'align-content'),
6275

6376
// items
@@ -66,6 +79,9 @@ export const alignments: StaticRule[] = [
6679
['items-center', { 'align-items': 'center' }],
6780
['items-baseline', { 'align-items': 'baseline' }],
6881
['items-stretch', { 'align-items': 'stretch' }],
82+
['items-baseline-last', { 'align-items': 'last baseline' }],
83+
['items-center-safe', { 'align-items': 'safe center' }],
84+
['items-end-safe', { 'align-items': 'safe flex-end' }],
6985
...makeGlobalStaticRules('items', 'align-items'),
7086

7187
// selfs
@@ -75,6 +91,9 @@ export const alignments: StaticRule[] = [
7591
['self-center', { 'align-self': 'center' }],
7692
['self-stretch', { 'align-self': 'stretch' }],
7793
['self-baseline', { 'align-self': 'baseline' }],
94+
['self-baseline-last', { 'align-self': 'last baseline' }],
95+
['self-center-safe', { 'align-self': 'safe center' }],
96+
['self-end-safe', { 'align-self': 'safe flex-end' }],
7897
...makeGlobalStaticRules('self', 'align-self'),
7998
]
8099

@@ -87,13 +106,19 @@ export const placements: StaticRule[] = [
87106
['place-content-around', { 'place-content': 'space-around' }],
88107
['place-content-evenly', { 'place-content': 'space-evenly' }],
89108
['place-content-stretch', { 'place-content': 'stretch' }],
109+
['place-content-baseline', { 'place-content': 'baseline' }],
110+
['place-content-center-safe', { 'place-content': 'safe center' }],
111+
['place-content-end-safe', { 'place-content': 'safe flex-end' }],
90112
...makeGlobalStaticRules('place-content'),
91113

92114
// items
93115
['place-items-start', { 'place-items': 'start' }],
94116
['place-items-end', { 'place-items': 'end' }],
95117
['place-items-center', { 'place-items': 'center' }],
96118
['place-items-stretch', { 'place-items': 'stretch' }],
119+
['place-items-baseline', { 'place-items': 'baseline' }],
120+
['place-items-center-safe', { 'place-items': 'safe center' }],
121+
['place-items-end-safe', { 'place-items': 'safe flex-end' }],
97122
...makeGlobalStaticRules('place-items'),
98123

99124
// selfs
@@ -102,6 +127,8 @@ export const placements: StaticRule[] = [
102127
['place-self-end', { 'place-self': 'end' }],
103128
['place-self-center', { 'place-self': 'center' }],
104129
['place-self-stretch', { 'place-self': 'stretch' }],
130+
['place-self-center-safe', { 'place-self': 'safe center' }],
131+
['place-self-end-safe', { 'place-self': 'safe flex-end' }],
105132
...makeGlobalStaticRules('place-self'),
106133
]
107134

‎test/assets/output/preset-mini-targets.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,24 +404,50 @@ unocss .scope-\[unocss\]\:block{display:block;}
404404
.appearance-auto{-webkit-appearance:auto;appearance:auto;}
405405
.appearance-none{-webkit-appearance:none;appearance:none;}
406406
.place-content-stretch{place-content:stretch;}
407+
.place-content-baseline{place-content:baseline;}
408+
.place-content-center-safe{place-content:safe center;}
409+
.place-content-end-safe{place-content:safe flex-end;}
407410
.place-content-inherit{place-content:inherit;}
408411
.place-items-stretch{place-items:stretch;}
412+
.place-items-baseline{place-items:baseline;}
413+
.place-items-center-safe{place-items:safe center;}
414+
.place-items-end-safe{place-items:safe flex-end;}
409415
.place-items-unset{place-items:unset;}
410416
.place-self-stretch{place-self:stretch;}
417+
.place-self-center-safe{place-self:safe center;}
418+
.place-self-end-safe{place-self:safe flex-end;}
411419
.place-self-revert{place-self:revert;}
412420
.content-center{align-content:center;}
413421
.content-start{align-content:flex-start;}
422+
.content-center-safe{align-content:safe center;}
423+
.content-end-safe{align-content:safe flex-end;}
424+
.content-stretch{align-content:stretch;}
425+
.content-normal{align-content:normal;}
414426
.content-inherit{align-content:inherit;}
415427
.items-end{align-items:flex-end;}
428+
.items-baseline-last{align-items:last baseline;}
429+
.items-center-safe{align-items:safe center;}
430+
.items-end-safe{align-items:safe flex-end;}
416431
.items-unset{align-items:unset;}
417432
.self-stretch{align-self:stretch;}
433+
.self-baseline-last{align-self:last baseline;}
434+
.self-center-safe{align-self:safe center;}
435+
.self-end-safe{align-self:safe flex-end;}
418436
.self-revert{align-self:revert;}
419437
.justify-start{justify-content:flex-start;}
420438
.justify-center{justify-content:center;}
439+
.justify-center-safe{justify-content:safe center;}
440+
.justify-end-safe{justify-content:safe flex-end;}
441+
.justify-normal{justify-content:normal;}
421442
.justify-inherit{justify-content:inherit;}
422443
.justify-items-end{justify-items:end;}
444+
.justify-items-center-safe{justify-items:safe center;}
445+
.justify-items-end-safe{justify-items:safe flex-end;}
423446
.justify-items-unset{justify-items:unset;}
424447
.justify-self-stretch{justify-self:stretch;}
448+
.justify-self-baseline{justify-self:baseline;}
449+
.justify-self-center-safe{justify-self:safe center;}
450+
.justify-self-end-safe{justify-self:safe flex-end;}
425451
.justify-self-revert{justify-self:revert;}
426452
.gap-\$variable{gap:var(--variable);}
427453
.gap-4{gap:1rem;}

‎test/assets/output/preset-wind4-targets.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1165,10 +1165,20 @@ unocss .scope-\[unocss\]\:block{display:block;}
11651165
.\[padding\:theme\(spacing\.xl\)\]{padding:1.25rem;}
11661166
.content-center{align-content:center;}
11671167
.content-start{align-content:flex-start;}
1168+
.content-center-safe{align-content:safe center;}
1169+
.content-end-safe{align-content:safe flex-end;}
1170+
.content-stretch{align-content:stretch;}
1171+
.content-normal{align-content:normal;}
11681172
.content-inherit{align-content:inherit;}
11691173
.items-end{align-items:flex-end;}
1174+
.items-baseline-last{align-items:last baseline;}
1175+
.items-center-safe{align-items:safe center;}
1176+
.items-end-safe{align-items:safe flex-end;}
11701177
.items-unset{align-items:unset;}
11711178
.self-stretch{align-self:stretch;}
1179+
.self-baseline-last{align-self:last baseline;}
1180+
.self-center-safe{align-self:safe center;}
1181+
.self-end-safe{align-self:safe flex-end;}
11721182
.self-revert{align-self:revert;}
11731183
.box-border{box-sizing:border-box;}
11741184
.box-content{box-sizing:content-box;}
@@ -1205,19 +1215,35 @@ unocss .scope-\[unocss\]\:block{display:block;}
12051215
.top-1\/2{top:50%;}
12061216
.justify-start{justify-content:flex-start;}
12071217
.justify-center{justify-content:center;}
1218+
.justify-center-safe{justify-content:safe center;}
1219+
.justify-end-safe{justify-content:safe flex-end;}
1220+
.justify-normal{justify-content:normal;}
12081221
.justify-inherit{justify-content:inherit;}
12091222
.justify-items-end{justify-items:end;}
1223+
.justify-items-center-safe{justify-items:safe center;}
1224+
.justify-items-end-safe{justify-items:safe flex-end;}
12101225
.justify-items-unset{justify-items:unset;}
12111226
.justify-self-stretch{justify-self:stretch;}
1227+
.justify-self-baseline{justify-self:baseline;}
1228+
.justify-self-center-safe{justify-self:safe center;}
1229+
.justify-self-end-safe{justify-self:safe flex-end;}
12121230
.justify-self-revert{justify-self:revert;}
12131231
.order-\$variable{order:var(--variable);}
12141232
.order-first{order:calc(-infinity);}
12151233
.order-none{order:0;}
12161234
.place-content-stretch{place-content:stretch;}
1235+
.place-content-baseline{place-content:baseline;}
1236+
.place-content-center-safe{place-content:safe center;}
1237+
.place-content-end-safe{place-content:safe flex-end;}
12171238
.place-content-inherit{place-content:inherit;}
12181239
.place-items-stretch{place-items:stretch;}
1240+
.place-items-baseline{place-items:baseline;}
1241+
.place-items-center-safe{place-items:safe center;}
1242+
.place-items-end-safe{place-items:safe flex-end;}
12191243
.place-items-unset{place-items:unset;}
12201244
.place-self-stretch{place-self:stretch;}
1245+
.place-self-center-safe{place-self:safe center;}
1246+
.place-self-end-safe{place-self:safe flex-end;}
12211247
.place-self-revert{place-self:revert;}
12221248
.absolute{position:absolute;}
12231249
.pos-fixed{position:fixed;}

‎test/assets/preset-mini-targets.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -431,25 +431,51 @@ export const presetMiniTargets: string[] = [
431431
'justify-inherit',
432432
'justify-start',
433433
'justify-center',
434+
'justify-center-safe',
435+
'justify-end-safe',
436+
'justify-normal',
434437
'justify-items-end',
435438
'justify-items-unset',
439+
'justify-items-center-safe',
440+
'justify-items-end-safe',
436441
'justify-self-stretch',
437442
'justify-self-revert',
443+
'justify-self-baseline',
444+
'justify-self-center-safe',
445+
'justify-self-end-safe',
438446
'order-first',
439447
'order-none',
440448
'content-start',
441449
'content-inherit',
442450
'content-center',
451+
'content-center-safe',
452+
'content-end-safe',
453+
'content-stretch',
454+
'content-normal',
443455
'items-end',
444456
'items-unset',
457+
'items-baseline-last',
458+
'items-center-safe',
459+
'items-end-safe',
445460
'self-stretch',
446461
'self-revert',
462+
'self-baseline-last',
463+
'self-center-safe',
464+
'self-end-safe',
447465
'place-content-stretch',
448466
'place-items-stretch',
449467
'place-self-stretch',
450468
'place-content-inherit',
469+
'place-content-baseline',
470+
'place-content-center-safe',
471+
'place-content-end-safe',
451472
'place-items-unset',
473+
'place-items-baseline',
474+
'place-items-center-safe',
475+
'place-items-end-safe',
452476
'place-self-revert',
477+
'place-self-center-safe',
478+
'place-self-end-safe',
453479

454480
// position - insets
455481
'top-0',

0 commit comments

Comments
 (0)