Skip to content

Commit 9f86019

Browse files
matei-sthecrypticace
matei-s
and
thecrypticace
authored
Fix gradient stop positions with transparent colors and/or variants (#11002)
* fixed gradient stop for default transparent * Inherit gradient stop positions when using variants * Update tests * Update changelog --------- Co-authored-by: Jordan Pittman <[email protected]>
1 parent e3a9d5f commit 9f86019

17 files changed

+154
-213
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Don’t move unknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962))
13+
- Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
14+
- Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
1315

1416
## [3.3.1] - 2023-03-30
1517

‎src/corePlugins.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -1750,7 +1750,13 @@ export let corePlugins = {
17501750
return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
17511751
}
17521752

1753-
return function ({ matchUtilities, theme }) {
1753+
return function ({ matchUtilities, theme, addDefaults }) {
1754+
addDefaults('gradient-color-stops', {
1755+
'--tw-gradient-from-position': ' ',
1756+
'--tw-gradient-via-position': ' ',
1757+
'--tw-gradient-to-position': ' ',
1758+
})
1759+
17541760
let options = {
17551761
values: flattenColorPalette(theme('gradientColorStops')),
17561762
type: ['color', 'any'],
@@ -1767,13 +1773,9 @@ export let corePlugins = {
17671773
let transparentToValue = transparentTo(value)
17681774

17691775
return {
1770-
'--tw-gradient-from': `${toColorValue(
1771-
value,
1772-
'from'
1773-
)} var(--tw-gradient-from-position)`,
1774-
'--tw-gradient-from-position': ' ',
1775-
'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-from-position)`,
1776-
'--tw-gradient-to-position': ' ',
1776+
'@defaults gradient-color-stops': {},
1777+
'--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
1778+
'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
17771779
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
17781780
}
17791781
},
@@ -1798,12 +1800,10 @@ export let corePlugins = {
17981800
let transparentToValue = transparentTo(value)
17991801

18001802
return {
1801-
'--tw-gradient-via-position': ' ',
1803+
'@defaults gradient-color-stops': {},
18021804
'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
1803-
'--tw-gradient-to-position': ' ',
18041805
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
1805-
value,
1806-
'via'
1806+
value
18071807
)} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
18081808
}
18091809
},
@@ -1825,8 +1825,8 @@ export let corePlugins = {
18251825
matchUtilities(
18261826
{
18271827
to: (value) => ({
1828-
'--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
1829-
'--tw-gradient-to-position': ' ',
1828+
'@defaults gradient-color-stops': {},
1829+
'--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
18301830
}),
18311831
},
18321832
options

‎tests/any-type.test.js

+2-12
Original file line numberDiff line numberDiff line change
@@ -500,21 +500,16 @@ crosscheck(({ stable, oxide }) => {
500500
}
501501
.from-\[var\(--any-value\)\] {
502502
--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: ;
503+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
506504
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
507505
}
508506
.via-\[var\(--any-value\)\] {
509-
--tw-gradient-via-position: ;
510507
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
511-
--tw-gradient-to-position: ;
512508
--tw-gradient-stops: var(--tw-gradient-from),
513509
var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
514510
}
515511
.to-\[var\(--any-value\)\] {
516512
--tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
517-
--tw-gradient-to-position: ;
518513
}
519514
.fill-\[var\(--any-value\)\] {
520515
fill: var(--any-value);
@@ -1063,21 +1058,16 @@ crosscheck(({ stable, oxide }) => {
10631058
}
10641059
.from-\[var\(--any-value\)\] {
10651060
--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: ;
1061+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
10691062
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
10701063
}
10711064
.via-\[var\(--any-value\)\] {
1072-
--tw-gradient-via-position: ;
10731065
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
1074-
--tw-gradient-to-position: ;
10751066
--tw-gradient-stops: var(--tw-gradient-from),
10761067
var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
10771068
}
10781069
.to-\[var\(--any-value\)\] {
10791070
--tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
1080-
--tw-gradient-to-position: ;
10811071
}
10821072
.fill-\[var\(--any-value\)\] {
10831073
fill: var(--any-value);

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

+16-27
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,13 @@
134134
min-height: var(--height);
135135
}
136136
.w-\[\'\)\(\)\'\] {
137-
width: ")()";
137+
width: ')()';
138138
}
139139
.w-\[\'\]\[\]\'\] {
140-
width: "][]";
140+
width: '][]';
141141
}
142142
.w-\[\'\}\{\}\'\] {
143-
width: "}{}";
143+
width: '}{}';
144144
}
145145
.w-\[\(\(\)\)\] {
146146
width: (());
@@ -176,7 +176,7 @@
176176
width: var(--width, calc(100% + 1rem));
177177
}
178178
.w-\[\{\{\}\}\] {
179-
width: {{} }
179+
width: {{}}
180180
}
181181
.w-\[\{\}\] {
182182
width: {}
@@ -345,10 +345,10 @@
345345
cursor: pointer;
346346
}
347347
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
348-
cursor: url("./path_to_hand.cur") 2 2, pointer;
348+
cursor: url('./path_to_hand.cur') 2 2, pointer;
349349
}
350350
.cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
351-
cursor: url("hand.cur") 2 2, pointer;
351+
cursor: url('hand.cur') 2 2, pointer;
352352
}
353353
.cursor-\[var\(--value\)\] {
354354
cursor: var(--value);
@@ -406,13 +406,13 @@
406406
scroll-padding-top: var(--scroll-padding);
407407
}
408408
.list-\[\'\\1f44d\'\] {
409-
list-style-type: "👍";
409+
list-style-type: '👍';
410410
}
411411
.list-\[var\(--value\)\] {
412412
list-style-type: var(--value);
413413
}
414414
.list-image-\[url\(\.\/my-image\.png\)\] {
415-
list-style-image: url("./my-image.png");
415+
list-style-image: url('./my-image.png');
416416
}
417417
.list-image-\[var\(--value\)\] {
418418
list-style-image: var(--value);
@@ -653,46 +653,36 @@
653653
background-image: linear-gradient(to left, rgb(var(--green)), blue);
654654
}
655655
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
656-
background-image: url("/path-to-image.png");
656+
background-image: url('/path-to-image.png');
657657
}
658658
.bg-\[url\:var\(--url\)\] {
659659
background-image: var(--url);
660660
}
661661
.from-\[\#da5b66\] {
662662
--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: ;
663+
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
666664
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
667665
}
668666
.from-\[var\(--color\)\] {
669667
--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: ;
668+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
673669
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
674670
}
675671
.via-\[\#da5b66\] {
676-
--tw-gradient-via-position: ;
677672
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
678-
--tw-gradient-to-position: ;
679673
--tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
680674
var(--tw-gradient-to);
681675
}
682676
.via-\[var\(--color\)\] {
683-
--tw-gradient-via-position: ;
684677
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
685-
--tw-gradient-to-position: ;
686678
--tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
687679
var(--tw-gradient-to);
688680
}
689681
.to-\[\#da5b66\] {
690682
--tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
691-
--tw-gradient-to-position: ;
692683
}
693684
.to-\[var\(--color\)\] {
694685
--tw-gradient-to: var(--color) var(--tw-gradient-to-position);
695-
--tw-gradient-to-position: ;
696686
}
697687
.bg-\[length\:200px_100px\] {
698688
background-size: 200px 100px;
@@ -713,7 +703,7 @@
713703
fill: #da5b66;
714704
}
715705
.fill-\[url\(\#icon-gradient\)\] {
716-
fill: url("#icon-gradient");
706+
fill: url('#icon-gradient');
717707
}
718708
.fill-\[var\(--value\)\] {
719709
fill: var(--value);
@@ -725,7 +715,7 @@
725715
stroke: var(--value);
726716
}
727717
.stroke-\[url\(\#icon-gradient\)\] {
728-
stroke: url("#icon-gradient");
718+
stroke: url('#icon-gradient');
729719
}
730720
.stroke-\[20px\] {
731721
stroke-width: 20px;
@@ -787,7 +777,7 @@
787777
font-family: Some Font, sans-serif;
788778
}
789779
.font-\[\'Some_Font\'\,var\(--other-font\)\] {
790-
font-family: "Some Font", var(--other-font);
780+
font-family: 'Some Font', var(--other-font);
791781
}
792782
.font-\[Georgia\,serif\] {
793783
font-family: Georgia, serif;
@@ -1062,11 +1052,11 @@
10621052
will-change: var(--will-change);
10631053
}
10641054
.content-\[\'\>\'\] {
1065-
--tw-content: ">";
1055+
--tw-content: '>';
10661056
content: var(--tw-content);
10671057
}
10681058
.content-\[\'hello\'\] {
1069-
--tw-content: "hello";
1059+
--tw-content: 'hello';
10701060
content: var(--tw-content);
10711061
}
10721062
.content-\[attr\(content-before\)\] {
@@ -1078,4 +1068,3 @@
10781068
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
10791069
}
10801070
}
1081-

‎tests/arbitrary-values.test.css

+4-14
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176
width: var(--width, calc(100% + 1rem));
177177
}
178178
.w-\[\{\{\}\}\] {
179-
width: {{} }
179+
width: {{}}
180180
}
181181
.w-\[\{\}\] {
182182
width: {}
@@ -412,7 +412,7 @@
412412
list-style-type: var(--value);
413413
}
414414
.list-image-\[url\(\.\/my-image\.png\)\] {
415-
list-style-image: url("./my-image.png");
415+
list-style-image: url('./my-image.png');
416416
}
417417
.list-image-\[var\(--value\)\] {
418418
list-style-image: var(--value);
@@ -689,39 +689,29 @@
689689
}
690690
.from-\[\#da5b66\] {
691691
--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: ;
692+
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
695693
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
696694
}
697695
.from-\[var\(--color\)\] {
698696
--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: ;
697+
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
702698
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
703699
}
704700
.via-\[\#da5b66\] {
705-
--tw-gradient-via-position: ;
706701
--tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
707-
--tw-gradient-to-position: ;
708702
--tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
709703
var(--tw-gradient-to);
710704
}
711705
.via-\[var\(--color\)\] {
712-
--tw-gradient-via-position: ;
713706
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
714-
--tw-gradient-to-position: ;
715707
--tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
716708
var(--tw-gradient-to);
717709
}
718710
.to-\[\#da5b66\] {
719711
--tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
720-
--tw-gradient-to-position: ;
721712
}
722713
.to-\[var\(--color\)\] {
723714
--tw-gradient-to: var(--color) var(--tw-gradient-to-position);
724-
--tw-gradient-to-position: ;
725715
}
726716
.bg-\[length\:200px_100px\] {
727717
background-size: 200px 100px;

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
--tw-pan-y: ;
1616
--tw-pinch-zoom: ;
1717
--tw-scroll-snap-strictness: proximity;
18+
--tw-gradient-from-position: ;
19+
--tw-gradient-via-position: ;
20+
--tw-gradient-to-position: ;
1821
--tw-ordinal: ;
1922
--tw-slashed-zero: ;
2023
--tw-numeric-figure: ;
@@ -608,21 +611,16 @@
608611
}
609612
.from-red-300 {
610613
--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: ;
614+
--tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
614615
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
615616
}
616617
.via-purple-200 {
617-
--tw-gradient-via-position: ;
618618
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
619-
--tw-gradient-to-position: ;
620619
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
621620
var(--tw-gradient-to);
622621
}
623622
.to-blue-400 {
624623
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
625-
--tw-gradient-to-position: ;
626624
}
627625
.decoration-slice {
628626
-webkit-box-decoration-break: slice;
@@ -1028,4 +1026,3 @@
10281026
--tw-content: none;
10291027
content: var(--tw-content);
10301028
}
1031-

‎tests/basic-usage.test.css

+4-6
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
--tw-pan-y: ;
1616
--tw-pinch-zoom: ;
1717
--tw-scroll-snap-strictness: proximity;
18+
--tw-gradient-from-position: ;
19+
--tw-gradient-via-position: ;
20+
--tw-gradient-to-position: ;
1821
--tw-ordinal: ;
1922
--tw-slashed-zero: ;
2023
--tw-numeric-figure: ;
@@ -626,21 +629,16 @@
626629
}
627630
.from-red-300 {
628631
--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: ;
632+
--tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
632633
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
633634
}
634635
.via-purple-200 {
635-
--tw-gradient-via-position: ;
636636
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
637-
--tw-gradient-to-position: ;
638637
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
639638
var(--tw-gradient-to);
640639
}
641640
.to-blue-400 {
642641
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
643-
--tw-gradient-to-position: ;
644642
}
645643
.decoration-slice {
646644
-webkit-box-decoration-break: slice;

0 commit comments

Comments
 (0)