Skip to content

Commit 64a3444

Browse files
philipp-spiessphilipp-spiess
committed
Add currentcolor test
1 parent 6341716 commit 64a3444

File tree

3 files changed

+1454
-277
lines changed

3 files changed

+1454
-277
lines changed

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

Lines changed: 135 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -91,28 +91,34 @@ exports[`border-* 1`] = `
9191
border-color: oklab(59.9824% -.067 -.124 / .5);
9292
}
9393
94-
.border-\\[color\\:var\\(--my-color\\)\\] {
94+
.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
9595
border-color: var(--my-color);
9696
}
9797
98-
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
99-
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
98+
@supports (color: color-mix(in lab, red, red)) {
99+
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
100+
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
101+
}
100102
}
101103
102-
.border-\\[var\\(--my-color\\)\\] {
104+
.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 {
103105
border-color: var(--my-color);
104106
}
105107
106-
.border-\\[var\\(--my-color\\)\\]\\/50 {
107-
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
108+
@supports (color: color-mix(in lab, red, red)) {
109+
.border-\\[var\\(--my-color\\)\\]\\/50 {
110+
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
111+
}
108112
}
109113
110-
.border-current {
114+
.border-current, .border-current\\/50 {
111115
border-color: currentColor;
112116
}
113117
114-
.border-current\\/50 {
115-
border-color: color-mix(in oklab, currentColor 50%, transparent);
118+
@supports (color: color-mix(in lab, red, red)) {
119+
.border-current\\/50 {
120+
border-color: color-mix(in oklab, currentColor 50%, transparent);
121+
}
116122
}
117123
118124
.border-inherit {
@@ -265,28 +271,34 @@ exports[`border-b-* 1`] = `
265271
border-bottom-color: oklab(59.9824% -.067 -.124 / .5);
266272
}
267273
268-
.border-b-\\[color\\:var\\(--my-color\\)\\] {
274+
.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
269275
border-bottom-color: var(--my-color);
270276
}
271277
272-
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
273-
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
278+
@supports (color: color-mix(in lab, red, red)) {
279+
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
280+
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
281+
}
274282
}
275283
276-
.border-b-\\[var\\(--my-color\\)\\] {
284+
.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 {
277285
border-bottom-color: var(--my-color);
278286
}
279287
280-
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
281-
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
288+
@supports (color: color-mix(in lab, red, red)) {
289+
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
290+
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
291+
}
282292
}
283293
284-
.border-b-current {
294+
.border-b-current, .border-b-current\\/50 {
285295
border-bottom-color: currentColor;
286296
}
287297
288-
.border-b-current\\/50 {
289-
border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
298+
@supports (color: color-mix(in lab, red, red)) {
299+
.border-b-current\\/50 {
300+
border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
301+
}
290302
}
291303
292304
.border-b-inherit {
@@ -439,28 +451,34 @@ exports[`border-e-* 1`] = `
439451
border-inline-end-color: oklab(59.9824% -.067 -.124 / .5);
440452
}
441453
442-
.border-e-\\[color\\:var\\(--my-color\\)\\] {
454+
.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
443455
border-inline-end-color: var(--my-color);
444456
}
445457
446-
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
447-
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
458+
@supports (color: color-mix(in lab, red, red)) {
459+
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
460+
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
461+
}
448462
}
449463
450-
.border-e-\\[var\\(--my-color\\)\\] {
464+
.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 {
451465
border-inline-end-color: var(--my-color);
452466
}
453467
454-
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
455-
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
468+
@supports (color: color-mix(in lab, red, red)) {
469+
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
470+
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
471+
}
456472
}
457473
458-
.border-e-current {
474+
.border-e-current, .border-e-current\\/50 {
459475
border-inline-end-color: currentColor;
460476
}
461477
462-
.border-e-current\\/50 {
463-
border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
478+
@supports (color: color-mix(in lab, red, red)) {
479+
.border-e-current\\/50 {
480+
border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
481+
}
464482
}
465483
466484
.border-e-inherit {
@@ -613,28 +631,34 @@ exports[`border-l-* 1`] = `
613631
border-left-color: oklab(59.9824% -.067 -.124 / .5);
614632
}
615633
616-
.border-l-\\[color\\:var\\(--my-color\\)\\] {
634+
.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
617635
border-left-color: var(--my-color);
618636
}
619637
620-
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
621-
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
638+
@supports (color: color-mix(in lab, red, red)) {
639+
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
640+
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
641+
}
622642
}
623643
624-
.border-l-\\[var\\(--my-color\\)\\] {
644+
.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 {
625645
border-left-color: var(--my-color);
626646
}
627647
628-
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
629-
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
648+
@supports (color: color-mix(in lab, red, red)) {
649+
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
650+
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
651+
}
630652
}
631653
632-
.border-l-current {
654+
.border-l-current, .border-l-current\\/50 {
633655
border-left-color: currentColor;
634656
}
635657
636-
.border-l-current\\/50 {
637-
border-left-color: color-mix(in oklab, currentColor 50%, transparent);
658+
@supports (color: color-mix(in lab, red, red)) {
659+
.border-l-current\\/50 {
660+
border-left-color: color-mix(in oklab, currentColor 50%, transparent);
661+
}
638662
}
639663
640664
.border-l-inherit {
@@ -787,28 +811,34 @@ exports[`border-r-* 1`] = `
787811
border-right-color: oklab(59.9824% -.067 -.124 / .5);
788812
}
789813
790-
.border-r-\\[color\\:var\\(--my-color\\)\\] {
814+
.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
791815
border-right-color: var(--my-color);
792816
}
793817
794-
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
795-
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
818+
@supports (color: color-mix(in lab, red, red)) {
819+
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
820+
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
821+
}
796822
}
797823
798-
.border-r-\\[var\\(--my-color\\)\\] {
824+
.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 {
799825
border-right-color: var(--my-color);
800826
}
801827
802-
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
803-
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
828+
@supports (color: color-mix(in lab, red, red)) {
829+
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
830+
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
831+
}
804832
}
805833
806-
.border-r-current {
834+
.border-r-current, .border-r-current\\/50 {
807835
border-right-color: currentColor;
808836
}
809837
810-
.border-r-current\\/50 {
811-
border-right-color: color-mix(in oklab, currentColor 50%, transparent);
838+
@supports (color: color-mix(in lab, red, red)) {
839+
.border-r-current\\/50 {
840+
border-right-color: color-mix(in oklab, currentColor 50%, transparent);
841+
}
812842
}
813843
814844
.border-r-inherit {
@@ -961,28 +991,34 @@ exports[`border-s-* 1`] = `
961991
border-inline-start-color: oklab(59.9824% -.067 -.124 / .5);
962992
}
963993
964-
.border-s-\\[color\\:var\\(--my-color\\)\\] {
994+
.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
965995
border-inline-start-color: var(--my-color);
966996
}
967997
968-
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
969-
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
998+
@supports (color: color-mix(in lab, red, red)) {
999+
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1000+
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1001+
}
9701002
}
9711003
972-
.border-s-\\[var\\(--my-color\\)\\] {
1004+
.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 {
9731005
border-inline-start-color: var(--my-color);
9741006
}
9751007
976-
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
977-
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1008+
@supports (color: color-mix(in lab, red, red)) {
1009+
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
1010+
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1011+
}
9781012
}
9791013
980-
.border-s-current {
1014+
.border-s-current, .border-s-current\\/50 {
9811015
border-inline-start-color: currentColor;
9821016
}
9831017
984-
.border-s-current\\/50 {
985-
border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
1018+
@supports (color: color-mix(in lab, red, red)) {
1019+
.border-s-current\\/50 {
1020+
border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
1021+
}
9861022
}
9871023
9881024
.border-s-inherit {
@@ -1135,28 +1171,34 @@ exports[`border-t-* 1`] = `
11351171
border-top-color: oklab(59.9824% -.067 -.124 / .5);
11361172
}
11371173
1138-
.border-t-\\[color\\:var\\(--my-color\\)\\] {
1174+
.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
11391175
border-top-color: var(--my-color);
11401176
}
11411177
1142-
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1143-
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1178+
@supports (color: color-mix(in lab, red, red)) {
1179+
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1180+
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1181+
}
11441182
}
11451183
1146-
.border-t-\\[var\\(--my-color\\)\\] {
1184+
.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 {
11471185
border-top-color: var(--my-color);
11481186
}
11491187
1150-
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
1151-
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1188+
@supports (color: color-mix(in lab, red, red)) {
1189+
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
1190+
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1191+
}
11521192
}
11531193
1154-
.border-t-current {
1194+
.border-t-current, .border-t-current\\/50 {
11551195
border-top-color: currentColor;
11561196
}
11571197
1158-
.border-t-current\\/50 {
1159-
border-top-color: color-mix(in oklab, currentColor 50%, transparent);
1198+
@supports (color: color-mix(in lab, red, red)) {
1199+
.border-t-current\\/50 {
1200+
border-top-color: color-mix(in oklab, currentColor 50%, transparent);
1201+
}
11601202
}
11611203
11621204
.border-t-inherit {
@@ -1309,28 +1351,34 @@ exports[`border-x-* 1`] = `
13091351
border-inline-color: oklab(59.9824% -.067 -.124 / .5);
13101352
}
13111353
1312-
.border-x-\\[color\\:var\\(--my-color\\)\\] {
1354+
.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
13131355
border-inline-color: var(--my-color);
13141356
}
13151357
1316-
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1317-
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1358+
@supports (color: color-mix(in lab, red, red)) {
1359+
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1360+
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1361+
}
13181362
}
13191363
1320-
.border-x-\\[var\\(--my-color\\)\\] {
1364+
.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 {
13211365
border-inline-color: var(--my-color);
13221366
}
13231367
1324-
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
1325-
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1368+
@supports (color: color-mix(in lab, red, red)) {
1369+
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
1370+
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1371+
}
13261372
}
13271373
1328-
.border-x-current {
1374+
.border-x-current, .border-x-current\\/50 {
13291375
border-inline-color: currentColor;
13301376
}
13311377
1332-
.border-x-current\\/50 {
1333-
border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
1378+
@supports (color: color-mix(in lab, red, red)) {
1379+
.border-x-current\\/50 {
1380+
border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
1381+
}
13341382
}
13351383
13361384
.border-x-inherit {
@@ -1483,28 +1531,34 @@ exports[`border-y-* 1`] = `
14831531
border-block-color: oklab(59.9824% -.067 -.124 / .5);
14841532
}
14851533
1486-
.border-y-\\[color\\:var\\(--my-color\\)\\] {
1534+
.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
14871535
border-block-color: var(--my-color);
14881536
}
14891537
1490-
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1491-
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1538+
@supports (color: color-mix(in lab, red, red)) {
1539+
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
1540+
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1541+
}
14921542
}
14931543
1494-
.border-y-\\[var\\(--my-color\\)\\] {
1544+
.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 {
14951545
border-block-color: var(--my-color);
14961546
}
14971547
1498-
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
1499-
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1548+
@supports (color: color-mix(in lab, red, red)) {
1549+
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
1550+
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
1551+
}
15001552
}
15011553
1502-
.border-y-current {
1554+
.border-y-current, .border-y-current\\/50 {
15031555
border-block-color: currentColor;
15041556
}
15051557
1506-
.border-y-current\\/50 {
1507-
border-block-color: color-mix(in oklab, currentColor 50%, transparent);
1558+
@supports (color: color-mix(in lab, red, red)) {
1559+
.border-y-current\\/50 {
1560+
border-block-color: color-mix(in oklab, currentColor 50%, transparent);
1561+
}
15081562
}
15091563
15101564
.border-y-inherit {

0 commit comments

Comments
 (0)