wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Include gradient color properties in color transitions (#14489)

Browse source 
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>
This commit is contained in:
Adam Wathan 2024-09-23 09:07:54 -04:00 • committed by GitHub
parent edbcf4359a
commit 222a93c0a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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

26
packages/tailwindcss/src/utilities.test.ts
View file

@ -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: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
@property --tw-gradient-to {
syntax: "<color>";
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: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
@property --tw-gradient-to {
syntax: "<color>";
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: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
@property --tw-gradient-to {
syntax: "<color>";
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;
}"

8
packages/tailwindcss/src/utilities.ts
View file

@ -2677,10 +2677,8 @@ export function createUtilities(theme: Theme) {
return atRoot([
property('--tw-gradient-position'),
property('--tw-gradient-from', '#0000', '<color>'),
property('--tw-gradient-via', '#0000', '<color>'),
property('--tw-gradient-to', '#0000', '<color>'),
property('--tw-gradient-from', 'transparent', '<color>'),
property('--tw-gradient-via', 'transparent', '<color>'),
property('--tw-gradient-to', 'transparent', '<color>'),
property('--tw-gradient-stops'),
property('--tw-gradient-via-stops'),
property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
@ -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),