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

Don't inherit gradient "to" from parent (#8489)

Browse source 
* Don't inherit gradient "to" from parent

* Update changelog
This commit is contained in:
Adam Wathan 2022-06-01 15:25:45 -04:00 • committed by GitHub
parent fca70850b2
commit c65a1a2a79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 33 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

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

6
src/corePlugins.js
View file

@ -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)`,
}
},
},

12
tests/arbitrary-values.test.css
View file

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

6
tests/basic-usage.test.css
View file

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

3
tests/color-opacity-modifiers.test.js
View file

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

3
tests/kitchen-sink.test.css
View file

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

14
tests/plugins/gradientColorStops.test.js
View file

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

6
tests/raw-content.test.css
View file

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