From c65a1a2a798446c6916128a7f57958c8d6a7afdf Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 1 Jun 2022 15:25:45 -0400 Subject: [PATCH] Don't inherit gradient "to" from parent (#8489) * Don't inherit gradient "to" from parent * Update changelog --- CHANGELOG.md | 1 + src/corePlugins.js | 6 ++++-- tests/arbitrary-values.test.css | 12 ++++++++---- tests/basic-usage.test.css | 6 ++++-- tests/color-opacity-modifiers.test.js | 3 ++- tests/kitchen-sink.test.css | 3 ++- tests/plugins/gradientColorStops.test.js | 14 ++++++++------ tests/raw-content.test.css | 6 ++++-- 8 files changed, 33 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60a0c664f..6288550c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow returning parallel variants from `addVariant` or `matchVariant` callback functions ([#8455](https://github.com/tailwindlabs/tailwindcss/pull/8455)) - Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270)) - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587)) +- Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489)) ### Changed diff --git a/src/corePlugins.js b/src/corePlugins.js index aaf6fcdb4..053ca1910 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1437,7 +1437,8 @@ export let corePlugins = { return { '--tw-gradient-from': toColorValue(value, 'from'), - '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`, + '--tw-gradient-to': transparentToValue, + '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`, } }, }, @@ -1449,10 +1450,11 @@ export let corePlugins = { let transparentToValue = transparentTo(value) return { + '--tw-gradient-to': transparentToValue, '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue( value, 'via' - )}, var(--tw-gradient-to, ${transparentToValue})`, + )}, var(--tw-gradient-to)`, } }, }, diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index da43300ad..84087b735 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -651,18 +651,22 @@ } .from-\[\#da5b66\] { --tw-gradient-from: #da5b66; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0)); + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[var\(--color\)\] { --tw-gradient-from: var(--color); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-\[\#da5b66\] { - --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to, rgb(218 91 102 / 0)); + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to); } .via-\[var\(--color\)\] { + --tw-gradient-to: rgb(255 255 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--color), - var(--tw-gradient-to, rgb(255 255 255 / 0)); + var(--tw-gradient-to); } .to-\[\#da5b66\] { --tw-gradient-to: #da5b66; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index cd6e1e16e..621075758 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -596,10 +596,12 @@ } .from-red-300 { --tw-gradient-from: #fca5a5; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0)); + --tw-gradient-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0)); + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); } .to-blue-400 { --tw-gradient-to: #60a5fa; diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index 3c3954a35..55e811554 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -167,7 +167,8 @@ test('utilities that support any type are supported', async () => { expect(result.css).toMatchFormattedCss(css` .from-red-500\/50 { --tw-gradient-from: rgb(239 68 68 / 0.5); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); + --tw-gradient-to: rgb(239 68 68 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .fill-red-500\/25 { fill: rgb(239 68 68 / 0.25); diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index ba799314b..dbc6f8ffc 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -261,7 +261,8 @@ div { } .from-foo { --tw-gradient-from: #bada55; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(186 218 85 / 0)); + --tw-gradient-to: rgb(186 218 85 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .text-center { text-align: center; diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 5ad14feb1..a650a6955 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -34,19 +34,21 @@ test('opacity variables are given to colors defined as closures', () => { expect(result.css).toMatchFormattedCss(css` .from-primary { --tw-gradient-from: rgb(31, 31, 31); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0)); + --tw-gradient-to: rgba(31, 31, 31, 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary { --tw-gradient-from: hsl(10, 50%, 50%); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(10 50% 50% / 0)); + --tw-gradient-to: hsl(10 50% 50% / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-primary { - --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), - var(--tw-gradient-to, rgba(31, 31, 31, 0)); + --tw-gradient-to: rgba(31, 31, 31, 0); + --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to); } .via-secondary { - --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), - var(--tw-gradient-to, hsl(10 50% 50% / 0)); + --tw-gradient-to: hsl(10 50% 50% / 0); + --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to); } .to-primary { --tw-gradient-to: rgb(31, 31, 31); diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 4ab5326f6..cbe43c809 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -412,10 +412,12 @@ } .from-red-300 { --tw-gradient-from: #fca5a5; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0)); + --tw-gradient-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0)); + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); } .to-blue-400 { --tw-gradient-to: #60a5fa;