From 0daaaebc5e79ad1da5425a1161a52811a39ce02d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 20 Sep 2024 12:40:44 -0400 Subject: [PATCH] Include `--default-transition-*` variables in `transition-*` utility output (#14482) Fixes #14479. Back in March we made a change to the `transition-*` utilities that inlined the values of the `--default-transition-*` variables to fix a bug where things would break if those variables didn't exist in your CSS. At the time though we weren't outputting CSS variables as part of the values of any utilities, for example `bg-red-500` didn't actually reference the `--color-red-500` variable. We later changed that but missed this situation, so these variables were still inlined even though nothing else was. This PR fixes that and makes things more consistent, so these variables will be used as expected unless using the `@theme inline` option, like with everything else. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.test.ts | 90 +++++++++++++++------- packages/tailwindcss/src/utilities.ts | 5 +- 3 files changed, 67 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ed30e84..d494939a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow `anchor-size(…)` in arbitrary values ([#14394](https://github.com/tailwindlabs/tailwindcss/pull/14394)) - Skip candidates with invalid `theme()` calls ([#14437](https://github.com/tailwindlabs/tailwindcss/pull/14437)) - Don't generate `inset-*` utilities for `--inset-shadow-*` and `--inset-ring-*` theme values ([#14447](https://github.com/tailwindlabs/tailwindcss/pull/14447)) +- Include `--default-transition-*` variables in `transition-*` utility output ([#14482](https://github.com/tailwindlabs/tailwindcss/pull/14482)) ### Changed diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index a55d27e17..bdb5a841d 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -12898,12 +12898,73 @@ test('transition', async () => { .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; - transition-duration: .1s; - transition-timing-function: ease; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); } .transition-\\[--value\\] { transition-property: var(--value); + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-all { + transition-property: all; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + transition-property: var(--transition-property-opacity, opacity); + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-shadow { + transition-property: box-shadow; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--default-transition-timing-function, ease); + transition-duration: var(--default-transition-duration, .1s); + } + + .transition-none { + transition-property: none; + }" + `) + + expect( + await compileCss( + css` + @theme inline { + --default-transition-timing-function: ease; + --default-transition-duration: 100ms; + } + @tailwind utilities; + `, + ['transition', 'transition-all', 'transition-colors'], + ), + ).toMatchInlineSnapshot(` + ":root { + --default-transition-timing-function: ease; + --default-transition-duration: .1s; + } + + .transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: .1s; transition-timing-function: ease; } @@ -12918,31 +12979,6 @@ test('transition', async () => { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: .1s; transition-timing-function: ease; - } - - .transition-opacity { - transition-property: opacity; - transition-duration: .1s; - transition-timing-function: ease; - transition-property: var(--transition-property-opacity, opacity); - transition-duration: .1s; - transition-timing-function: ease; - } - - .transition-shadow { - transition-property: box-shadow; - transition-duration: .1s; - transition-timing-function: ease; - } - - .transition-transform { - transition-property: transform, translate, scale, rotate; - transition-duration: .1s; - transition-timing-function: ease; - } - - .transition-none { - transition-property: none; }" `) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 5b7b2f765..e7cbaef4b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3703,8 +3703,9 @@ export function createUtilities(theme: Theme) { } { - let defaultTimingFunction = theme.get(['--default-transition-timing-function']) ?? 'ease' - let defaultDuration = theme.get(['--default-transition-duration']) ?? '0s' + let defaultTimingFunction = + theme.resolve(null, ['--default-transition-timing-function']) ?? 'ease' + let defaultDuration = theme.resolve(null, ['--default-transition-duration']) ?? '0s' staticUtility('transition-none', [['transition-property', 'none']]) staticUtility('transition-all', [