Skip to content

Commit 43fda0b

Browse files
benfacephilipp-spiess
benface
authored and
philipp-spiess
committed
Add safe alignment utilities
1 parent d6d913e commit 43fda0b

File tree

5 files changed

+156
-3
lines changed

5 files changed

+156
-3
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
- _Experimental_: Add `scripting`, `scripting-none`, and `scripting-initial` variants ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929))
1515
- _Experimental_: Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variant ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946))
1616
- _Experimental_: Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941))
17+
- _Experimental_: Add safe alignment utilities ([#14607](https://github.com/tailwindlabs/tailwindcss/pull/14607))
1718
- _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
1819
- _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
1920
- _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3746,7 +3746,9 @@ exports[`getClassList 1`] = `
37463746
"content-baseline",
37473747
"content-between",
37483748
"content-center",
3749+
"content-center-safe",
37493750
"content-end",
3751+
"content-end-safe",
37503752
"content-evenly",
37513753
"content-none",
37523754
"content-normal",
@@ -4876,24 +4878,32 @@ exports[`getClassList 1`] = `
48764878
"italic",
48774879
"items-baseline",
48784880
"items-center",
4881+
"items-center-safe",
48794882
"items-end",
4883+
"items-end-safe",
48804884
"items-start",
48814885
"items-stretch",
48824886
"justify-around",
48834887
"justify-baseline",
48844888
"justify-between",
48854889
"justify-center",
4890+
"justify-center-safe",
48864891
"justify-end",
4892+
"justify-end-safe",
48874893
"justify-evenly",
48884894
"justify-items-center",
4895+
"justify-items-center-safe",
48894896
"justify-items-end",
4897+
"justify-items-end-safe",
48904898
"justify-items-normal",
48914899
"justify-items-start",
48924900
"justify-items-stretch",
48934901
"justify-normal",
48944902
"justify-self-auto",
48954903
"justify-self-center",
4904+
"justify-self-center-safe",
48964905
"justify-self-end",
4906+
"justify-self-end-safe",
48974907
"justify-self-start",
48984908
"justify-self-stretch",
48994909
"justify-start",
@@ -6004,18 +6014,24 @@ exports[`getClassList 1`] = `
60046014
"place-content-baseline",
60056015
"place-content-between",
60066016
"place-content-center",
6017+
"place-content-center-safe",
60076018
"place-content-end",
6019+
"place-content-end-safe",
60086020
"place-content-evenly",
60096021
"place-content-start",
60106022
"place-content-stretch",
60116023
"place-items-baseline",
60126024
"place-items-center",
6025+
"place-items-center-safe",
60136026
"place-items-end",
6027+
"place-items-end-safe",
60146028
"place-items-start",
60156029
"place-items-stretch",
60166030
"place-self-auto",
60176031
"place-self-center",
6032+
"place-self-center-safe",
60186033
"place-self-end",
6034+
"place-self-end-safe",
60196035
"place-self-start",
60206036
"place-self-stretch",
60216037
"placeholder-current",
@@ -7279,7 +7295,9 @@ exports[`getClassList 1`] = `
72797295
"self-auto",
72807296
"self-baseline",
72817297
"self-center",
7298+
"self-center-safe",
72827299
"self-end",
7300+
"self-end-safe",
72837301
"self-start",
72847302
"self-stretch",
72857303
"sepia",

‎packages/tailwindcss/src/feature-flags.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable'
22
export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable'
33
export const enablePointerVariants = process.env.FEATURES_ENV !== 'stable'
4+
export const enableSafeAlignment = process.env.FEATURES_ENV !== 'stable'
45
export const enableScripting = process.env.FEATURES_ENV !== 'stable'
56
export const enableSourceInline = process.env.FEATURES_ENV !== 'stable'
67
export const enableUserValid = process.env.FEATURES_ENV !== 'stable'

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 99 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7125,8 +7125,10 @@ test('place-content', async () => {
71257125
expect(
71267126
await run([
71277127
'place-content-center',
7128+
'place-content-center-safe',
71287129
'place-content-start',
71297130
'place-content-end',
7131+
'place-content-end-safe',
71307132
'place-content-between',
71317133
'place-content-around',
71327134
'place-content-evenly',
@@ -7150,10 +7152,18 @@ test('place-content', async () => {
71507152
place-content: center;
71517153
}
71527154
7155+
.place-content-center-safe {
7156+
place-content: safe center;
7157+
}
7158+
71537159
.place-content-end {
71547160
place-content: end;
71557161
}
71567162
7163+
.place-content-end-safe {
7164+
place-content: safe end;
7165+
}
7166+
71577167
.place-content-evenly {
71587168
place-content: space-evenly;
71597169
}
@@ -7194,7 +7204,9 @@ test('place-items', async () => {
71947204
await run([
71957205
'place-items-start',
71967206
'place-items-end',
7207+
'place-items-end-safe',
71977208
'place-items-center',
7209+
'place-items-center-safe',
71987210
'place-items-baseline',
71997211
'place-items-stretch',
72007212
]),
@@ -7207,10 +7219,18 @@ test('place-items', async () => {
72077219
place-items: center;
72087220
}
72097221
7222+
.place-items-center-safe {
7223+
place-items: safe center;
7224+
}
7225+
72107226
.place-items-end {
72117227
place-items: end;
72127228
}
72137229
7230+
.place-items-end-safe {
7231+
place-items: safe end;
7232+
}
7233+
72147234
.place-items-start {
72157235
place-items: start;
72167236
}
@@ -7241,8 +7261,10 @@ test('align-content', async () => {
72417261
await run([
72427262
'content-normal',
72437263
'content-center',
7264+
'content-center-safe',
72447265
'content-start',
72457266
'content-end',
7267+
'content-end-safe',
72467268
'content-between',
72477269
'content-around',
72487270
'content-evenly',
@@ -7266,10 +7288,18 @@ test('align-content', async () => {
72667288
align-content: center;
72677289
}
72687290
7291+
.content-center-safe {
7292+
align-content: safe center;
7293+
}
7294+
72697295
.content-end {
72707296
align-content: flex-end;
72717297
}
72727298
7299+
.content-end-safe {
7300+
align-content: safe flex-end;
7301+
}
7302+
72737303
.content-evenly {
72747304
align-content: space-evenly;
72757305
}
@@ -7312,8 +7342,17 @@ test('align-content', async () => {
73127342
})
73137343

73147344
test('items', async () => {
7315-
expect(await run(['items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch']))
7316-
.toMatchInlineSnapshot(`
7345+
expect(
7346+
await run([
7347+
'items-start',
7348+
'items-end',
7349+
'items-end-safe',
7350+
'items-center',
7351+
'items-center-safe',
7352+
'items-baseline',
7353+
'items-stretch',
7354+
]),
7355+
).toMatchInlineSnapshot(`
73177356
".items-baseline {
73187357
align-items: baseline;
73197358
}
@@ -7322,10 +7361,18 @@ test('items', async () => {
73227361
align-items: center;
73237362
}
73247363
7364+
.items-center-safe {
7365+
align-items: safe center;
7366+
}
7367+
73257368
.items-end {
73267369
align-items: flex-end;
73277370
}
73287371
7372+
.items-end-safe {
7373+
align-items: safe flex-end;
7374+
}
7375+
73297376
.items-start {
73307377
align-items: flex-start;
73317378
}
@@ -7357,7 +7404,9 @@ test('justify', async () => {
73577404
'justify-normal',
73587405
'justify-start',
73597406
'justify-end',
7407+
'justify-end-safe',
73607408
'justify-center',
7409+
'justify-center-safe',
73617410
'justify-between',
73627411
'justify-around',
73637412
'justify-evenly',
@@ -7376,10 +7425,18 @@ test('justify', async () => {
73767425
justify-content: center;
73777426
}
73787427
7428+
.justify-center-safe {
7429+
justify-content: safe center;
7430+
}
7431+
73797432
.justify-end {
73807433
justify-content: flex-end;
73817434
}
73827435
7436+
.justify-end-safe {
7437+
justify-content: safe flex-end;
7438+
}
7439+
73837440
.justify-evenly {
73847441
justify-content: space-evenly;
73857442
}
@@ -7424,18 +7481,28 @@ test('justify-items', async () => {
74247481
await run([
74257482
'justify-items-start',
74267483
'justify-items-end',
7484+
'justify-items-end-safe',
74277485
'justify-items-center',
7486+
'justify-items-center-safe',
74287487
'justify-items-stretch',
74297488
]),
74307489
).toMatchInlineSnapshot(`
74317490
".justify-items-center {
74327491
justify-items: center;
74337492
}
74347493
7494+
.justify-items-center-safe {
7495+
justify-items: safe center;
7496+
}
7497+
74357498
.justify-items-end {
74367499
justify-items: end;
74377500
}
74387501
7502+
.justify-items-end-safe {
7503+
justify-items: safe end;
7504+
}
7505+
74397506
.justify-items-start {
74407507
justify-items: start;
74417508
}
@@ -8284,7 +8351,9 @@ test('place-self', async () => {
82848351
'place-self-auto',
82858352
'place-self-start',
82868353
'place-self-end',
8354+
'place-self-end-safe',
82878355
'place-self-center',
8356+
'place-self-center-safe',
82888357
'place-self-stretch',
82898358
]),
82908359
).toMatchInlineSnapshot(`
@@ -8296,10 +8365,18 @@ test('place-self', async () => {
82968365
place-self: center;
82978366
}
82988367
8368+
.place-self-center-safe {
8369+
place-self: safe center;
8370+
}
8371+
82998372
.place-self-end {
83008373
place-self: end;
83018374
}
83028375
8376+
.place-self-end-safe {
8377+
place-self: safe end;
8378+
}
8379+
83038380
.place-self-start {
83048381
place-self: start;
83058382
}
@@ -8331,7 +8408,9 @@ test('self', async () => {
83318408
'self-auto',
83328409
'self-start',
83338410
'self-end',
8411+
'self-end-safe',
83348412
'self-center',
8413+
'self-center-safe',
83358414
'self-stretch',
83368415
'self-baseline',
83378416
]),
@@ -8348,10 +8427,18 @@ test('self', async () => {
83488427
align-self: center;
83498428
}
83508429
8430+
.self-center-safe {
8431+
align-self: safe center;
8432+
}
8433+
83518434
.self-end {
83528435
align-self: flex-end;
83538436
}
83548437
8438+
.self-end-safe {
8439+
align-self: safe flex-end;
8440+
}
8441+
83558442
.self-start {
83568443
align-self: flex-start;
83578444
}
@@ -8385,7 +8472,9 @@ test('justify-self', async () => {
83858472
'justify-self-auto',
83868473
'justify-self-start',
83878474
'justify-self-end',
8475+
'justify-self-end-safe',
83888476
'justify-self-center',
8477+
'justify-self-center-safe',
83898478
'justify-self-stretch',
83908479
'justify-self-baseline',
83918480
]),
@@ -8398,10 +8487,18 @@ test('justify-self', async () => {
83988487
justify-self: center;
83998488
}
84008489
8490+
.justify-self-center-safe {
8491+
justify-self: safe center;
8492+
}
8493+
84018494
.justify-self-end {
84028495
justify-self: flex-end;
84038496
}
84048497
8498+
.justify-self-end-safe {
8499+
justify-self: safe flex-end;
8500+
}
8501+
84058502
.justify-self-start {
84068503
justify-self: flex-start;
84078504
}

0 commit comments

Comments
 (0)