From 72c30d422a89fd09437b6c91fa7d2142d61d6b77 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 17 Oct 2024 14:29:32 -0400
Subject: [PATCH] Support linear gradient angles as bare values (#14707)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds support for linear gradient angles as bare values, like
this:

```
bg-linear-45 => linear-gradient(45deg, …)
```

We already support this for [conic
gradients](https://github.com/tailwindlabs/tailwindcss/pull/14467), so
this makes these utilities more consistent.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                               |  1 +
 packages/tailwindcss/src/utilities.test.ts | 12 ++++++++++++
 packages/tailwindcss/src/utilities.ts      | 12 +++++++++++-
 packages/tailwindcss/tests/ui.spec.ts      | 19 ++++++++++++++++++-
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38fe91eecdf8..59f8137db09d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add first draft of new wide-gamut color palette ([#14693](https://github.com/tailwindlabs/tailwindcss/pull/14693))
+- Support linear gradient angles as bare values ([#14707](https://github.com/tailwindlabs/tailwindcss/pull/14707))
 - _Upgrade (experimental)_: Migrate `theme(…)` calls to `var(…)` or to the modern `theme(…)` syntax ([#14664](https://github.com/tailwindlabs/tailwindcss/pull/14664), [#14695](https://github.com/tailwindlabs/tailwindcss/pull/14695))
 
 ### Fixed
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index d37bf98d007a..d80530640c92 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -9448,6 +9448,8 @@ test('bg', async () => {
         'bg-linear-to-bl',
         'bg-linear-to-l',
         'bg-linear-to-tl',
+        'bg-linear-45',
+        '-bg-linear-45',
 
         'bg-[url(/image.png)]',
         'bg-[url:var(--my-url)]',
@@ -9554,6 +9556,11 @@ test('bg', async () => {
       background-color: #0000;
     }
 
+    .-bg-linear-45 {
+      --tw-gradient-position: calc(45deg * -1), ;
+      background-image: linear-gradient(var(--tw-gradient-stops, calc(45deg * -1)));
+    }
+
     .-bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: calc(74.4845deg * -1), ;
       background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
@@ -9604,6 +9611,11 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-linear-45 {
+      --tw-gradient-position: 45deg, ;
+      background-image: linear-gradient(var(--tw-gradient-stops, 45deg));
+    }
+
     .bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: 74.4845deg, ;
       background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 4df51fdc5c7e..8125252d32fa 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2529,8 +2529,9 @@ export function createUtilities(theme: Theme) {
   utilities.functional('bg-linear', (candidate) => {
     if (!candidate.value || candidate.modifier) return
 
+    let value = candidate.value.value
+
     if (candidate.value.kind === 'arbitrary') {
-      let value: string | null = candidate.value.value
       let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
       switch (type) {
@@ -2551,6 +2552,15 @@ export function createUtilities(theme: Theme) {
           ]
         }
       }
+    } else {
+      if (!isPositiveInteger(value)) return
+
+      value = withNegative(`${value}deg`, candidate)
+
+      return [
+        decl('--tw-gradient-position', `${value},`),
+        decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+      ]
     }
   })
 
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index e9da9f555ef2..e4c72b20bb93 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -41,6 +41,19 @@ for (let [classes, expected] of [
     'bg-linear-to-r from-red to-blue',
     'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   ],
+  [
+    'bg-linear-45 from-red to-blue',
+    'linear-gradient(45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+  ],
+  [
+    '-bg-linear-45 from-red to-blue',
+    // Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
+    // for both options.
+    [
+      'linear-gradient(-45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+      'linear-gradient(calc(-45deg), rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    ],
+  ],
   [
     'bg-linear-to-r via-red to-blue',
     'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
@@ -60,7 +73,11 @@ for (let [classes, expected] of [
       html`<div id="x" class="${classes}">Hello world</div>`,
     )
 
-    expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'background-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
+    }
   })
 }