Skip to content

Commit c65a1a2

Browse files
adamwathanadamwathan
authored
Don't inherit gradient "to" from parent (#8489)
* Don't inherit gradient "to" from parent * Update changelog
1 parent fca7085 commit c65a1a2

8 files changed

+33
-18
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2828
- Allow returning parallel variants from `addVariant` or `matchVariant` callback functions ([#8455](https://github.com/tailwindlabs/tailwindcss/pull/8455))
2929
- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
3030
- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
31+
- Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489))
3132

3233
### Changed
3334

‎src/corePlugins.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1437,7 +1437,8 @@ export let corePlugins = {
14371437

14381438
return {
14391439
'--tw-gradient-from': toColorValue(value, 'from'),
1440-
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
1440+
'--tw-gradient-to': transparentToValue,
1441+
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
14411442
}
14421443
},
14431444
},
@@ -1449,10 +1450,11 @@ export let corePlugins = {
14491450
let transparentToValue = transparentTo(value)
14501451

14511452
return {
1453+
'--tw-gradient-to': transparentToValue,
14521454
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
14531455
value,
14541456
'via'
1455-
)}, var(--tw-gradient-to, ${transparentToValue})`,
1457+
)}, var(--tw-gradient-to)`,
14561458
}
14571459
},
14581460
},

‎tests/arbitrary-values.test.css

+8-4
Original file line numberDiff line numberDiff line change
@@ -651,18 +651,22 @@
651651
}
652652
.from-\[\#da5b66\] {
653653
--tw-gradient-from: #da5b66;
654-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0));
654+
--tw-gradient-to: rgb(218 91 102 / 0);
655+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
655656
}
656657
.from-\[var\(--color\)\] {
657658
--tw-gradient-from: var(--color);
658-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0));
659+
--tw-gradient-to: rgb(255 255 255 / 0);
660+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
659661
}
660662
.via-\[\#da5b66\] {
661-
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to, rgb(218 91 102 / 0));
663+
--tw-gradient-to: rgb(218 91 102 / 0);
664+
--tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
662665
}
663666
.via-\[var\(--color\)\] {
667+
--tw-gradient-to: rgb(255 255 255 / 0);
664668
--tw-gradient-stops: var(--tw-gradient-from), var(--color),
665-
var(--tw-gradient-to, rgb(255 255 255 / 0));
669+
var(--tw-gradient-to);
666670
}
667671
.to-\[\#da5b66\] {
668672
--tw-gradient-to: #da5b66;

‎tests/basic-usage.test.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -596,10 +596,12 @@
596596
}
597597
.from-red-300 {
598598
--tw-gradient-from: #fca5a5;
599-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
599+
--tw-gradient-to: rgb(252 165 165 / 0);
600+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
600601
}
601602
.via-purple-200 {
602-
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
603+
--tw-gradient-to: rgb(233 213 255 / 0);
604+
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
603605
}
604606
.to-blue-400 {
605607
--tw-gradient-to: #60a5fa;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@ test('utilities that support any type are supported', async () => {
167167
expect(result.css).toMatchFormattedCss(css`
168168
.from-red-500\/50 {
169169
--tw-gradient-from: rgb(239 68 68 / 0.5);
170-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0));
170+
--tw-gradient-to: rgb(239 68 68 / 0);
171+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
171172
}
172173
.fill-red-500\/25 {
173174
fill: rgb(239 68 68 / 0.25);

‎tests/kitchen-sink.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,8 @@ div {
261261
}
262262
.from-foo {
263263
--tw-gradient-from: #bada55;
264-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(186 218 85 / 0));
264+
--tw-gradient-to: rgb(186 218 85 / 0);
265+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
265266
}
266267
.text-center {
267268
text-align: center;

‎tests/plugins/gradientColorStops.test.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,21 @@ test('opacity variables are given to colors defined as closures', () => {
3434
expect(result.css).toMatchFormattedCss(css`
3535
.from-primary {
3636
--tw-gradient-from: rgb(31, 31, 31);
37-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
37+
--tw-gradient-to: rgba(31, 31, 31, 0);
38+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
3839
}
3940
.from-secondary {
4041
--tw-gradient-from: hsl(10, 50%, 50%);
41-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(10 50% 50% / 0));
42+
--tw-gradient-to: hsl(10 50% 50% / 0);
43+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
4244
}
4345
.via-primary {
44-
--tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
45-
var(--tw-gradient-to, rgba(31, 31, 31, 0));
46+
--tw-gradient-to: rgba(31, 31, 31, 0);
47+
--tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to);
4648
}
4749
.via-secondary {
48-
--tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
49-
var(--tw-gradient-to, hsl(10 50% 50% / 0));
50+
--tw-gradient-to: hsl(10 50% 50% / 0);
51+
--tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to);
5052
}
5153
.to-primary {
5254
--tw-gradient-to: rgb(31, 31, 31);

‎tests/raw-content.test.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -412,10 +412,12 @@
412412
}
413413
.from-red-300 {
414414
--tw-gradient-from: #fca5a5;
415-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
415+
--tw-gradient-to: rgb(252 165 165 / 0);
416+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
416417
}
417418
.via-purple-200 {
418-
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
419+
--tw-gradient-to: rgb(233 213 255 / 0);
420+
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
419421
}
420422
.to-blue-400 {
421423
--tw-gradient-to: #60a5fa;

0 commit comments

Comments
 (0)