From b29813b1bbc355a198700310d44450707cd9f5aa Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 17 Oct 2024 13:50:25 -0400 Subject: [PATCH 1/5] Support linear gradient angles as bare values --- packages/tailwindcss/src/utilities.ts | 12 +++++++++++- packages/tailwindcss/tests/ui.spec.ts | 8 ++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) 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..030b6fbac6e7 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -41,6 +41,14 @@ 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', + '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%)', From 14dbdeb34090ba392f1b8d9a9ba330983bd51f8e Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 17 Oct 2024 13:57:48 -0400 Subject: [PATCH 2/5] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 From 9531b37204da05424aa735100914daa7bc7982af Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:00:33 -0400 Subject: [PATCH 3/5] Add unit tests --- packages/tailwindcss/src/utilities.test.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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)); From 047b29da14d0219e11420db357df1e778bd0d390 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:13:40 -0400 Subject: [PATCH 4/5] Remove calc --- packages/tailwindcss/tests/ui.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 030b6fbac6e7..8d3a3fdc5b7a 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -47,7 +47,7 @@ for (let [classes, expected] of [ ], [ '-bg-linear-45 from-red to-blue', - 'linear-gradient(calc(-45deg), rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)', + 'linear-gradient(-45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)', ], [ 'bg-linear-to-r via-red to-blue', From df959ebc5e8c9e1fe01481d06535bd33b67af9b6 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:23:20 -0400 Subject: [PATCH 5/5] Make sure UI tests pass in all browsers --- packages/tailwindcss/tests/ui.spec.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 8d3a3fdc5b7a..e4c72b20bb93 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -47,7 +47,12 @@ for (let [classes, expected] of [ ], [ '-bg-linear-45 from-red to-blue', - 'linear-gradient(-45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)', + // 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', @@ -68,7 +73,11 @@ for (let [classes, expected] of [ html`
Hello world
`, ) - 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) + } }) }