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

adamwathan · web-flow · commit c65a1a2a7984 · 2022-06-01T15:25:45.000-04:00
* Don't inherit gradient "to" from parent

* Update changelog
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;

Original file line number	Diff line number	Diff line change
`@@ -651,18 +651,22 @@`
`651`	`651`	`}`
`652`	`652`	`.from-\[\#da5b66\] {`
`653`	`653`	`--tw-gradient-from: #da5b66;`
`654`		`- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0));`
	`654`	`+ --tw-gradient-to: rgb(218 91 102 / 0);`
	`655`	`+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`
`655`	`656`	`}`
`656`	`657`	`.from-\[var\(--color\)\] {`
`657`	`658`	`--tw-gradient-from: var(--color);`
`658`		`- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0));`
	`659`	`+ --tw-gradient-to: rgb(255 255 255 / 0);`
	`660`	`+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`
`659`	`661`	`}`
`660`	`662`	`.via-\[\#da5b66\] {`
`661`		`- --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to, rgb(218 91 102 / 0));`
	`663`	`+ --tw-gradient-to: rgb(218 91 102 / 0);`
	`664`	`+ --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);`
`662`	`665`	`}`
`663`	`666`	`.via-\[var\(--color\)\] {`
	`667`	`+ --tw-gradient-to: rgb(255 255 255 / 0);`
`664`	`668`	`--tw-gradient-stops: var(--tw-gradient-from), var(--color),`
`665`		`- var(--tw-gradient-to, rgb(255 255 255 / 0));`
	`669`	`+ var(--tw-gradient-to);`
`666`	`670`	`}`
`667`	`671`	`.to-\[\#da5b66\] {`
`668`	`672`	`--tw-gradient-to: #da5b66;`
Original file line number	Diff line number	Diff line change
`@@ -596,10 +596,12 @@`
`596`	`596`	`}`
`597`	`597`	`.from-red-300 {`
`598`	`598`	`--tw-gradient-from: #fca5a5;`
`599`		`- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));`
	`599`	`+ --tw-gradient-to: rgb(252 165 165 / 0);`
	`600`	`+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`
`600`	`601`	`}`
`601`	`602`	`.via-purple-200 {`
`602`		`- --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));`
	`603`	`+ --tw-gradient-to: rgb(233 213 255 / 0);`
	`604`	`+ --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);`
`603`	`605`	`}`
`604`	`606`	`.to-blue-400 {`
`605`	`607`	`--tw-gradient-to: #60a5fa;`
Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,8 @@ div {`
`261`	`261`	`}`
`262`	`262`	`.from-foo {`
`263`	`263`	`--tw-gradient-from: #bada55;`
`264`		`- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(186 218 85 / 0));`
	`264`	`+ --tw-gradient-to: rgb(186 218 85 / 0);`
	`265`	`+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`
`265`	`266`	`}`
`266`	`267`	`.text-center {`
`267`	`268`	`text-align: center;`
Original file line number	Diff line number	Diff line change
`@@ -412,10 +412,12 @@`
`412`	`412`	`}`
`413`	`413`	`.from-red-300 {`
`414`	`414`	`--tw-gradient-from: #fca5a5;`
`415`		`- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));`
	`415`	`+ --tw-gradient-to: rgb(252 165 165 / 0);`
	`416`	`+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`
`416`	`417`	`}`
`417`	`418`	`.via-purple-200 {`
`418`		`- --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));`
	`419`	`+ --tw-gradient-to: rgb(233 213 255 / 0);`
	`420`	`+ --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);`
`419`	`421`	`}`
`420`	`422`	`.to-blue-400 {`
`421`	`423`	`--tw-gradient-to: #60a5fa;`