Fix gradient stop positions with transparent colors and/or variants (#…

…11002) * fixed gradient stop for default transparent * Inherit gradient stop positions when using variants * Update tests * Update changelog --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me>
tailwindlabs · Apr 13, 2023 · 9f86019 · 9f86019
1 parent e3a9d5f
commit 9f86019
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 213 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Don’t move unknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962))
+- Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
+- Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
 
 ## [3.3.1] - 2023-03-30
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1750,7 +1750,13 @@ export let corePlugins = {
       return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
     }
 
-    return function ({ matchUtilities, theme }) {
+    return function ({ matchUtilities, theme, addDefaults }) {
+      addDefaults('gradient-color-stops', {
+        '--tw-gradient-from-position': ' ',
+        '--tw-gradient-via-position': ' ',
+        '--tw-gradient-to-position': ' ',
+      })
+
       let options = {
         values: flattenColorPalette(theme('gradientColorStops')),
         type: ['color', 'any'],
@@ -1767,13 +1773,9 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': `${toColorValue(
-                value,
-                'from'
-              )} var(--tw-gradient-from-position)`,
-              '--tw-gradient-from-position': ' ',
-              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-from-position)`,
-              '--tw-gradient-to-position': ' ',
+              '@defaults gradient-color-stops': {},
+              '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
+              '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
               '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
@@ -1798,12 +1800,10 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-via-position': ' ',
+              '@defaults gradient-color-stops': {},
               '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
-              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
-                value,
-                'via'
+                value
               )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
@@ -1825,8 +1825,8 @@ export let corePlugins = {
       matchUtilities(
         {
           to: (value) => ({
-            '--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
-            '--tw-gradient-to-position': ' ',
+            '@defaults gradient-color-stops': {},
+            '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
           }),
         },
         options

diff --git a/tests/any-type.test.js b/tests/any-type.test.js
@@ -500,21 +500,16 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-\[var\(--any-value\)\] {
           --tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-\[var\(--any-value\)\] {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from),
             var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
         }
         .to-\[var\(--any-value\)\] {
           --tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .fill-\[var\(--any-value\)\] {
           fill: var(--any-value);
@@ -1063,21 +1058,16 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-\[var\(--any-value\)\] {
           --tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-\[var\(--any-value\)\] {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from),
             var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
         }
         .to-\[var\(--any-value\)\] {
           --tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .fill-\[var\(--any-value\)\] {
           fill: var(--any-value);

diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
@@ -134,13 +134,13 @@
   min-height: var(--height);
 }
 .w-\[\'\)\(\)\'\] {
-  width: ")()";
+  width: ')()';
 }
 .w-\[\'\]\[\]\'\] {
-  width: "][]";
+  width: '][]';
 }
 .w-\[\'\}\{\}\'\] {
-  width: "}{}";
+  width: '}{}';
 }
 .w-\[\(\(\)\)\] {
   width: (());
@@ -176,7 +176,7 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}}
 }
 .w-\[\{\}\] {
   width: {}
@@ -345,10 +345,10 @@
   cursor: pointer;
 }
 .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
-  cursor: url("./path_to_hand.cur") 2 2, pointer;
+  cursor: url('./path_to_hand.cur') 2 2, pointer;
 }
 .cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
-  cursor: url("hand.cur") 2 2, pointer;
+  cursor: url('hand.cur') 2 2, pointer;
 }
 .cursor-\[var\(--value\)\] {
   cursor: var(--value);
@@ -406,13 +406,13 @@
   scroll-padding-top: var(--scroll-padding);
 }
 .list-\[\'\\1f44d\'\] {
-  list-style-type: "👍";
+  list-style-type: '👍';
 }
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
@@ -653,46 +653,36 @@
   background-image: linear-gradient(to left, rgb(var(--green)), blue);
 }
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
-  background-image: url("/path-to-image.png");
+  background-image: url('/path-to-image.png');
 }
 .bg-\[url\:var\(--url\)\] {
   background-image: var(--url);
 }
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-\[var\(--color\)\] {
   --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-\[\#da5b66\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .via-\[var\(--color\)\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-\[\#da5b66\] {
   --tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .to-\[var\(--color\)\] {
   --tw-gradient-to: var(--color) var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .bg-\[length\:200px_100px\] {
   background-size: 200px 100px;
@@ -713,7 +703,7 @@
   fill: #da5b66;
 }
 .fill-\[url\(\#icon-gradient\)\] {
-  fill: url("#icon-gradient");
+  fill: url('#icon-gradient');
 }
 .fill-\[var\(--value\)\] {
   fill: var(--value);
@@ -725,7 +715,7 @@
   stroke: var(--value);
 }
 .stroke-\[url\(\#icon-gradient\)\] {
-  stroke: url("#icon-gradient");
+  stroke: url('#icon-gradient');
 }
 .stroke-\[20px\] {
   stroke-width: 20px;
@@ -787,7 +777,7 @@
   font-family: Some Font, sans-serif;
 }
 .font-\[\'Some_Font\'\,var\(--other-font\)\] {
-  font-family: "Some Font", var(--other-font);
+  font-family: 'Some Font', var(--other-font);
 }
 .font-\[Georgia\,serif\] {
   font-family: Georgia, serif;
@@ -1062,11 +1052,11 @@
   will-change: var(--will-change);
 }
 .content-\[\'\>\'\] {
-  --tw-content: ">";
+  --tw-content: '>';
   content: var(--tw-content);
 }
 .content-\[\'hello\'\] {
-  --tw-content: "hello";
+  --tw-content: 'hello';
   content: var(--tw-content);
 }
 .content-\[attr\(content-before\)\] {
@@ -1078,4 +1068,3 @@
     grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
   }
 }
-
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
@@ -176,7 +176,7 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}}
 }
 .w-\[\{\}\] {
   width: {}
@@ -412,7 +412,7 @@
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
@@ -689,39 +689,29 @@
 }
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-\[var\(--color\)\] {
   --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-\[\#da5b66\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .via-\[var\(--color\)\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-\[\#da5b66\] {
   --tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .to-\[var\(--color\)\] {
   --tw-gradient-to: var(--color) var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .bg-\[length\:200px_100px\] {
   background-size: 200px 100px;

diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -608,21 +611,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;
@@ -1028,4 +1026,3 @@
   --tw-content: none;
   content: var(--tw-content);
 }
-
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -626,21 +629,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;