Refactor gradient implementation to work around prettier/prettier#17058…

… (#16072)

This PR fixes an issue where tools like Prettier remove important
trailing commas in CSS variables, making gradients invalid.

We encoded the `,` in the `--tw-gradient-position` to ensure that _if_
the `var(--tw-gradient-position)` is used, that the `,` was there. And
if the variable was _not_ used that we didn't end up with a double `,,`
rendering the gradient invalid.

However, when running Prettier (there might be other tools that do this
as well), the trailing comma in the `--tw-gradient-position` was removed
which made the entire gradient invalid. E.g.:
```diff
  .bg-gradient-to-r {
-   --tw-gradient-position: to right in oklab,;
+   --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
```
Notice how the `,` is removed.

This PR fixes that, by moving the `,` to where the variable is being
used. The only side effect is that we have to guarantee that the
`--tw-gradient-position` is always present. In our testing (and using UI
tests) this should be the case.

Related Prettier issue:
prettier/prettier#17058

Fixes: #16037

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
 - Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
+- Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072))
 
 ## [4.0.1] - 2025-01-29
 

packages/tailwindcss/src/compat/legacy-utilities.test.ts

@@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklab, ;
+      --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklab, ;
+      --tw-gradient-position: to bottom left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklab, ;
+      --tw-gradient-position: to bottom right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklab, ;
+      --tw-gradient-position: to left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklab, ;
+      --tw-gradient-position: to top in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklab, ;
+      --tw-gradient-position: to top left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklab, ;
+      --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)

packages/tailwindcss/src/compat/legacy-utilities.ts

@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     ['tl', 'top left'],
   ]) {
     designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklab,`),
+      decl('--tw-gradient-position', `to ${direction} in oklab`),
       decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
     ])
   }