mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Remove invalid gradient fallbacks (#14705)
Prior to this PR we were providing fallback values for certain CSS
variables in our gradient utilities that just weren't necessary and
didn't do anything.
For example `bg-linear-to-r` was generating this:
```css
.bg-linear-to-r {
--tw-gradient-position: to right;
background-image: linear-gradient(
var(--tw-gradient-stops, to right)
);
}
```
…but `background-image: linear-gradient(to right)` is not valid CSS and
is thrown out by the browser.
This PR removes these fallback values entirely since there is nothing
sensible to fall back to anyways — you need to combine these utilities
with the `from-*`/`to-*` utilities or provide the complete gradient as
an arbitrary value for things to make sense.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan
GitHub
parent
ec24b7af47
commit
feeb9f1b77
@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
### Fixed
|
||||
|
||||
- Ensure `theme` values defined outside of `extend` in JS configuration files overwrite all existing values for that namespace ([#14672](https://github.com/tailwindlabs/tailwindcss/pull/14672))
|
||||
- Remove unnecessary variable fallbacks in gradient utilities ([#14705](https://github.com/tailwindlabs/tailwindcss/pull/14705))
|
||||
- _Upgrade (experimental)_: Speed up template migrations ([#14679](https://github.com/tailwindlabs/tailwindcss/pull/14679))
|
||||
- _Upgrade (experimental)_: Don't generate invalid CSS when migrating a complex `screens` config ([#14691](https://github.com/tailwindlabs/tailwindcss/pull/14691))
|
||||
|
||||
|
||||
@ -9566,42 +9566,42 @@ test('bg', async () => {
|
||||
|
||||
.bg-gradient-to-b {
|
||||
--tw-gradient-position: to bottom, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-bl {
|
||||
--tw-gradient-position: to bottom left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-br {
|
||||
--tw-gradient-position: to bottom right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-l {
|
||||
--tw-gradient-position: to left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
--tw-gradient-position: to right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-t {
|
||||
--tw-gradient-position: to top, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-tl {
|
||||
--tw-gradient-position: to top left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-tr {
|
||||
--tw-gradient-position: to top right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-\\[1\\.3rad\\] {
|
||||
@ -9614,44 +9614,49 @@ test('bg', async () => {
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
|
||||
}
|
||||
|
||||
.bg-linear-\\[to_bottom\\], .bg-linear-to-b {
|
||||
.bg-linear-\\[to_bottom\\] {
|
||||
--tw-gradient-position: to bottom, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
|
||||
}
|
||||
|
||||
.bg-linear-to-b {
|
||||
--tw-gradient-position: to bottom, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-bl {
|
||||
--tw-gradient-position: to bottom left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-br {
|
||||
--tw-gradient-position: to bottom right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-l {
|
||||
--tw-gradient-position: to left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-r {
|
||||
--tw-gradient-position: to right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-t {
|
||||
--tw-gradient-position: to top, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-tl {
|
||||
--tw-gradient-position: to top left, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top left));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-linear-to-tr {
|
||||
--tw-gradient-position: to top right, ;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops, to top right));
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-\\[image\\:var\\(--my-gradient\\)\\] {
|
||||
|
||||
@ -2517,12 +2517,12 @@ export function createUtilities(theme: Theme) {
|
||||
]) {
|
||||
staticUtility(`bg-gradient-to-${value}`, [
|
||||
['--tw-gradient-position', `to ${direction},`],
|
||||
['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
|
||||
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
|
||||
])
|
||||
|
||||
staticUtility(`bg-linear-to-${value}`, [
|
||||
['--tw-gradient-position', `to ${direction},`],
|
||||
['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
|
||||
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
|
||||
])
|
||||
}
|
||||
|
||||
@ -2578,7 +2578,7 @@ export function createUtilities(theme: Theme) {
|
||||
|
||||
return [
|
||||
decl('--tw-gradient-position', `from ${value},`),
|
||||
decl('background-image', `conic-gradient(var(--tw-gradient-stops,from ${value}))`),
|
||||
decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user