8000 update tests to include gradient position color stop reset values · tailwindlabs/tailwindcss@54c153c · GitHub
Skip to content

Commit 54c153c

Browse files
RobinMalfaitRobinMalfait
committed
update tests to include gradient position color stop reset values
1 parent 40dd88f commit 54c153c

10 files changed

+170
-82
lines changed

‎tests/any-type.test.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ crosscheck(({ stable, oxide }) => {
185185
`
186186

187187
return run(input, config).then((result) => {
188-
let oxideExpected = css`
188+
oxide.expect(result.css).toMatchFormattedCss(css`
189189
.inset-\[var\(--any-value\)\] {
190190
inset: var(--any-value);
191191
}
@@ -499,16 +499,22 @@ crosscheck(({ stable, oxide }) => {
499499
background-color: var(--any-value);
500500
}
501501
.from-\[var\(--any-value\)\] {
502-
--tw-gradient-from: var(--any-value);
503-
--tw-gradient-to: #fff0;
502+
--tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
503+
--tw-gradient-from-position: ;
504+
--tw-gradient-to: #fff0 var(--tw-gradient-from-position);
505+
--tw-gradient-to-position: ;
504506
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
505507
}
506508
.via-\[var\(--any-value\)\] {
507-
--tw-gradient-to: #fff0;
508-
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
509+
--tw-gradient-via-position: ;
510+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
511+
--tw-gradient-to-position: ;
512+
--tw-gradient-stops: var(--tw-gradient-from),
513+
var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
509514
}
510515
.to-\[var\(--any-value\)\] {
511-
--tw-gradient-to: var(--any-value);
516+
--tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
517+
--tw-gradient-to-position: ;
512518
}
513519
.fill-\[var\(--any-value\)\] {
514520
fill: var(--any-value);
@@ -732,8 +738,8 @@ crosscheck(({ stable, oxide }) => {
732738
--tw-content: var(--any-value);
733739
content: var(--tw-content);
734740
}
735-
`
736-
let stableExpected = css`
741+
`)
742+
stable.expect(result.css).toMatchFormattedCss(css`
737743
.inset-\[var\(--any-value\)\] {
738744
inset: var(--any-value);
739745
}
@@ -1056,16 +1062,22 @@ crosscheck(({ stable, oxide }) => {
10561062
--tw-bg-opacity: var(--any-value);
10571063
}
10581064
.from-\[var\(--any-value\)\] {
1059-
--tw-gradient-from: var(--any-value);
1060-
--tw-gradient-to: #fff0;
1065+
--tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
1066+
--tw-gradient-from-position: ;
1067+
--tw-gradient-to: #fff0 var(--tw-gradient-from-position);
1068+
--tw-gradient-to-position: ;
10611069
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
10621070
}
10631071
.via-\[var\(--any-value\)\] {
1064-
--tw-gradient-to: #fff0;
1065-
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
1072+
--tw-gradient-via-position: ;
1073+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
1074+
--tw-gradient-to-position: ;
1075+
--tw-gradient-stops: var(--tw-gradient-from),
1076+
var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
10661077
}
10671078
.to-\[var\(--any-value\)\] {
1068-
--tw-gradient-to: var(--any-value);
1079+
--tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
1080+
--tw-gradient-to-position: ;
10691081
}
10701082
.fill-\[var\(--any-value\)\] {
10711083
fill: var(--any-value);
@@ -1298,9 +1310,7 @@ crosscheck(({ stable, oxide }) => {
12981310
--tw-content: var(--any-value);
12991311
content: var(--tw-content);
13001312
}
1301-
`
1302-
oxide.expect(result.css).toMatchFormattedCss(oxideExpected)
1303-
stable.expect(result.css).toMatchFormattedCss(stableExpected)
1313+
`)
13041314
})
13051315
})
13061316
test.todo('rewrite the any test to be easier to understand or break it up into multiple tests')

‎tests/arbitrary-values.oxide.test.css‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -659,28 +659,40 @@
659659
background-image: var(--url);
660660
}
661661
.from-\[\#da5b66\] {
662-
--tw-gradient-from: #da5b66;
663-
--tw-gradient-to: #da5b6600;
662+
--tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
663+
--tw-gradient-from-position: ;
664+
--tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
665+
--tw-gradient-to-position: ;
664666
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
665667
}
666668
.from-\[var\(--color\)\] {
667-
--tw-gradient-from: var(--color);
668-
--tw-gradient-to: #fff0;
669+
--tw-gradient-from: var(--color) var(--tw-gradient-from-position);
670+
--tw-gradient-from-position: ;
671+
--tw-gradient-to: #fff0 var(--tw-gradient-from-position);
672+
--tw-gradient-to-position: ;
669673
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
670674
}
671675
.via-\[\#da5b66\] {
672-
--tw-gradient-to: #da5b6600;
673-
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
676+
--tw-gradient-via-position: ;
677+
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
678+
--tw-gradient-to-position: ;
679+
--tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
680+
var(--tw-gradient-to);
674681
}
675682
.via-\[var\(--color\)\] {
676-
--tw-gradient-to: #fff0;
677-
--tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to);
683+
--tw-gradient-via-position: ;
684+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
685+
--tw-gradient-to-position: ;
686+
--tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
687+
var(--tw-gradient-to);
678688
}
679689
.to-\[\#da5b66\] {
680-
--tw-gradient-to: #da5b66;
690+
--tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
691+
--tw-gradient-to-position: ;
681692
}
682693
.to-\[var\(--color\)\] {
683-
--tw-gradient-to: var(--color);
694+
--tw-gradient-to: var(--color) var(--tw-gradient-to-position);
695+
--tw-gradient-to-position: ;
684696
}
685697
.bg-\[length\:200px_100px\] {
686698
background-size: 200px 100px;

‎tests/arbitrary-values.test.css‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -688,28 +688,40 @@
688688
background-image: var(--url);
689689
}
690690
.from-\[\#da5b66\] {
691-
--tw-gradient-from: #da5b66;
692-
--tw-gradient-to: #da5b6600;
691+
--tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
692+
--tw-gradient-from-position: ;
693+
--tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
694+
--tw-gradient-to-position: ;
693695
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
694696
}
695697
.from-\[var\(--color\)\] {
696-
--tw-gradient-from: var(--color);
697-
--tw-gradient-to: #fff0;
698+
--tw-gradient-from: var(--color) var(--tw-gradient-from-position);
699+
--tw-gradient-from-position: ;
700+
--tw-gradient-to: #fff0 var(--tw-gradient-from-position);
701+
--tw-gradient-to-position: ;
698702
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
699703
}
700704
.via-\[\#da5b66\] {
701-
--tw-gradient-to: #da5b6600;
702-
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
705+
--tw-gradient-via-position: ;
706+
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
707+
--tw-gradient-to-position: ;
708+
--tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
709+
var(--tw-gradient-to);
703710
}
704711
.via-\[var\(--color\)\] {
705-
--tw-gradient-to: #fff0;
706-
--tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to);
712+
--tw-gradient-via-position: ;
713+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
714+
--tw-gradient-to-position: ;
715+
--tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
716+
var(--tw-gradient-to);
707717
}
708718
.to-\[\#da5b66\] {
709-
--tw-gradient-to: #da5b66;
719+
--tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
720+
--tw-gradient-to-position: ;
710721
}
711722
.to-\[var\(--color\)\] {
712-
--tw-gradient-to: var(--color);
723+
--tw-gradient-to: var(--color) var(--tw-gradient-to-position);
724+
--tw-gradient-to-position: ;
713725
}
714726
.bg-\[length\:200px_100px\] {
715727
background-size: 200px 100px;

‎tests/basic-usage.oxide.test.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -607,16 +607,22 @@
607607
background-image: linear-gradient(to right, var(--tw-gradient-stops));
608608
}
609609
.from-red-300 {
610-
--tw-gradient-from: #fca5a5;
611-
--tw-gradient-to: #fca5a500;
610+
--tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
611+
--tw-gradient-from-position: ;
612+
--tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
613+
--tw-gradient-to-position: ;
612614
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
613615
}
614616
.via-purple-200 {
615-
--tw-gradient-to: #e9d5ff00;
616-
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
617+
--tw-gradient-via-position: ;
618+
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
619+
--tw-gradient-to-position: ;
< EE55 code>620+
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
621+
var(--tw-gradient-to);
617622
}
618623
.to-blue-400 {
619-
--tw-gradient-to: #60a5fa;
624+
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
625+
--tw-gradient-to-position: ;
620626
}
621627
.decoration-slice {
622628
-webkit-box-decoration-break: slice;

‎tests/basic-usage.test.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -625,16 +625,22 @@
625625
background-image: linear-gradient(to right, var(--tw-gradient-stops));
626626
}
627627
.from-red-300 {
628-
--tw-gradient-from: #fca5a5;
629-
--tw-gradient-to: #fca5a500;
628+
--tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
629+
--tw-gradient-from-position: ;
630+
--tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
631+
--tw-gradient-to-position: ;
630632
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
631633
}
632634
.via-purple-200 {
633-
--tw-gradient-to: #e9d5ff00;
634-
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
635+
--tw-gradient-via-position: ;
636+
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
637+
--tw-gradient-to-position: ;
638+
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
639+
var(--tw-gradient-to);
635640
}
636641
.to-blue-400 {
637-
--tw-gradient-to: #60a5fa;
642+
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
643+
--tw-gradient-to-position: ;
638644
}
639645
.decoration-slice {
640646
-webkit-box-decoration-break: slice;

‎tests/color-opacity-modifiers.test.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,10 @@ crosscheck(({ stable, oxide }) => {
172172
return run('@tailwind utilities', config).then((result) => {
173173
expect(result.css).toMatchFormattedCss(css`
174174
.from-red-500\/50 {
175-
--tw-gradient-from: #ef444480;
176-
--tw-gradient-to: #ef444400;
175+
--tw-gradient-from: #ef444480 var(--tw-gradient-from-position);
176+
--tw-gradient-from-position: ;
177+
--tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
178+
--tw-gradient-to-position: ;
177179
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
178180
}
179181
.fill-red-500\/25 {

‎tests/kitchen-sink.test.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -527,8 +527,10 @@ crosscheck(({ stable, oxide }) => {
527527
background-image: url('/images/homepage-1.jpg');
528528
}
529529
.from-foo {
530-
--tw-gradient-from: #bada55;
531-
--tw-gradient-to: #bada5500;
530+
--tw-gradient-from: #bada55 var(--tw-gradient-from-position);
531+
--tw-gradient-from-position: ;
532+
--tw-gradient-to: #bada5500 var(--tw-gradient-from-position);
533+
--tw-gradient-to-position: ;
532534
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
533535
}
534536
.px-1 {
@@ -1087,8 +1089,10 @@ crosscheck(({ stable, oxide }) => {
10871089
background-image: url('/images/homepage-1.jpg');
10881090
}
10891091
.from-foo {
1090-
--tw-gradient-from: #bada55;
1091-
--tw-gradient-to: #bada5500;
1092+
--tw-gradient-from: #bada55 var(--tw-gradient-from-position);
1093+
--tw-gradient-from-position: ;
1094+
--tw-gradient-to: #bada5500 var(--tw-gradient-from-position);
1095+
--tw-gradient-to-position: ;
10921096
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
10931097
}
10941098
.px-1 {

‎tests/plugins/gradientColorStops.test.js‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,28 +34,40 @@ crosscheck(({ stable, oxide }) => {
3434
return run('@tailwind utilities', config).then((result) => {
3535
stable.expect(result.css).toMatchFormattedCss(css`
3636
.from-primary {
37-
--tw-gradient-from: #1f1f1f;
38-
--tw-gradient-to: #1f1f1f00;
37+
--tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
38+
--tw-gradient-from-position: ;
39+
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
40+
--tw-gradient-to-position: ;
3941
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
4042
}
4143
.from-secondary {
42-
--tw-gradient-from: #bf5540;
43-
--tw-gradient-to: #bf554000;
44+
--tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
45+
--tw-gradient-from-position: ;
46+
--tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
47+
--tw-gradient-to-position: ;
4448
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
4549
}
4650
.via-primary {
47-
--tw-gradient-to: #1f1f1f00;
48-
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f, var(--tw-gradient-to);
51+
--tw-gradient-via-position: ;
52+
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
53+
--tw-gradient-to-position: ;
54+
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f var(--tw-gradient-via-position),
55+
var(--tw-gradient-to);
4956
}
5057
.via-secondary {
51-
--tw-gradient-to: #bf554000;
52-
--tw-gradient-stops: var(--tw-gradient-from), #bf5540, var(--tw-gradient-to);
58+
--tw-gradient-via-position: ;
59+
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
60+
--tw-gradient-to-position: ;
61+
--tw-gradient-stops: var(--tw-gradient-from), #bf5540 var(--tw-gradient-via-position),
62+
var(--tw-gradient-to);
5363
}
5464
.to-primary {
55-
--tw-gradient-to: #1f1f1f;
65+
--tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
66+
--tw-gradient-to-position: ;
5667
}
5768
.to-secondary {
58-
--tw-gradient-to: #bf5540;
69+
--tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
70+
--tw-gradient-to-position: ;
5971
}
6072
.text-primary {
6173
--tw-text-opacity: 1;
@@ -71,28 +83,40 @@ crosscheck(({ stable, oxide }) => {
7183
`)
7284
oxide.expect(result.css).toMatchFormattedCss(css`
7385
.from-primary {
74-
--tw-gradient-from: #1f1f1f;
75-
--tw-gradient-to: #1f1f1f00;
86+
--tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
87+
--tw-gradient-from-position: ;
88+
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
89+
--tw-gradient-to-position: ;
7690
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
7791
}
7892
.from-secondary {
79-
--tw-gradient-from: #bf5540;
80-
--tw-gradient-to: #bf554000;
93+
--tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
94+
--tw-gradient-from-position: ;
95+
--tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
96+
--tw-gradient-to-position: ;
8197
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
8298
}
8399
.via-primary {
84-
--tw-gradient-to: #1f1f1f00;
85-
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f, var(--tw-gradient-to);
100+
--tw-gradient-via-position: ;
101+
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
102+
--tw-gradient-to-position: ;
103+
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f var(--tw-gradient-via-position),
104+
var(--tw-gradient-to);
86105
}
87106
.via-secondary {
88-
--tw-gradient-to: #bf554000;
89-
--tw-gradient-stops: var(--tw-gradient-from), #bf5540, var(--tw-gradient-to);
107+
--tw-gradient-via-position: ;
108+
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
109+
--tw-gradient-to-position: ;
110+
--tw-gradient-stops: var(--tw-gradient-from), #bf5540 var(--tw-gradient-via-position),
111+
var(--tw-gradient-to);
90112
}
91113
.to-primary {
92-
--tw-gradient-to: #1f1f1f;
114+
--tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
115+
--tw-gradient-to-position: ;
93116
}
94117
.to-secondary {
95-
--tw-gradient-to: #bf5540;
118+
--tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
119+
--tw-gradient-to-position: ;
96120
}
97121
.text-primary {
98122
color: #1f1f1f;

0 commit comments

Comments
 (0)