From 222a93c0a39518a54bbd16df5335e9b127af76b9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 23 Sep 2024 09:07:54 -0400 Subject: [PATCH] Include gradient color properties in color transitions (#14489) This PR adds our custom gradient color properties (`--tw-gradient-from`, `--tw-gradient-via`, and `--tw-gradient-to`) to the list of color properties we transition in the `transition` and `transition-colors` utilities. As part of this I noticed that we had duplicate `@property` declarations for these custom properties, so I've removed the duplicates. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.test.ts | 26 +++++++++++----------- packages/tailwindcss/src/utilities.ts | 8 +++---- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d494939a5..51425dada 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467)) - Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468)) - Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469)) +- Include gradient color properties in color transitions ([#14489](https://github.com/tailwindlabs/tailwindcss/pull/14489)) ### Fixed diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index bdb5a841d..1a518fc3a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9926,8 +9926,8 @@ test('from', async () => { *, :before, :after, ::backdrop { --tw-gradient-position: initial; --tw-gradient-from: #0000; + --tw-gradient-via: #0000; --tw-gradient-to: #0000; - --tw-gradient-via: transparent; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; @@ -9948,13 +9948,13 @@ test('from', async () => { initial-value: #0000; } - @property --tw-gradient-to { + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; @@ -10171,8 +10171,8 @@ test('via', async () => { *, :before, :after, ::backdrop { --tw-gradient-position: initial; --tw-gradient-from: #0000; + --tw-gradient-via: #0000; --tw-gradient-to: #0000; - --tw-gradient-via: transparent; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; @@ -10193,13 +10193,13 @@ test('via', async () => { initial-value: #0000; } - @property --tw-gradient-to { + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; @@ -10404,8 +10404,8 @@ test('to', async () => { *, :before, :after, ::backdrop { --tw-gradient-position: initial; --tw-gradient-from: #0000; + --tw-gradient-via: #0000; --tw-gradient-to: #0000; - --tw-gradient-via: transparent; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; @@ -10426,13 +10426,13 @@ test('to', async () => { initial-value: #0000; } - @property --tw-gradient-to { + @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } - @property --tw-gradient-via { + @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; @@ -12897,7 +12897,7 @@ test('transition', async () => { } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--default-transition-timing-function, ease); transition-duration: var(--default-transition-duration, .1s); } @@ -12915,7 +12915,7 @@ test('transition', async () => { } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function, ease); transition-duration: var(--default-transition-duration, .1s); } @@ -12964,7 +12964,7 @@ test('transition', async () => { } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: .1s; transition-timing-function: ease; } @@ -12976,7 +12976,7 @@ test('transition', async () => { } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-duration: .1s; transition-timing-function: ease; }" diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index e7cbaef4b..6f0feb35e 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2677,10 +2677,8 @@ export function createUtilities(theme: Theme) { return atRoot([ property('--tw-gradient-position'), property('--tw-gradient-from', '#0000', ''), + property('--tw-gradient-via', '#0000', ''), property('--tw-gradient-to', '#0000', ''), - property('--tw-gradient-from', 'transparent', ''), - property('--tw-gradient-via', 'transparent', ''), - property('--tw-gradient-to', 'transparent', ''), property('--tw-gradient-stops'), property('--tw-gradient-via-stops'), property('--tw-gradient-from-position', '0%', ' | '), @@ -3716,7 +3714,7 @@ export function createUtilities(theme: Theme) { staticUtility('transition-colors', [ [ 'transition-property', - 'color, background-color, border-color, text-decoration-color, fill, stroke', + 'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to', ], ['transition-timing-function', defaultTimingFunction], ['transition-duration', defaultDuration], @@ -3739,7 +3737,7 @@ export function createUtilities(theme: Theme) { functionalUtility('transition', { defaultValue: - 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter', + 'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter', themeKeys: ['--transition-property'], handle: (value) => [ decl('transition-property', value),