diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e8dabac1990..b0caa562f515 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Support `@theme reference { … }` for defining theme values without emitting variables ([#13222](https://github.com/tailwindlabs/tailwindcss/pull/13222)) +### Fixed + +- Don't rely on existence of `--default-transition-*` variables in `transition-*` utilities ([#13219](https://github.com/tailwindlabs/tailwindcss/pull/13219)) + ## [4.0.0-alpha.8] - 2024-03-11 ### Fixed diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index e581e4bb5815..de2280a4e174 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -4,7 +4,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` "@layer theme { :root { --default-transition-duration: .15s; - --default-transition-timing-function: var(--transition-timing-function-in-out); + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-family-sans); --default-font-feature-settings: var(--font-family-sans--font-feature-settings); --default-font-variation-settings: var(--font-family-sans--font-variation-settings); @@ -393,7 +393,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --line-height-8: 2rem; --line-height-9: 2.25rem; --line-height-10: 2.5rem; - --transition-timing-function: cubic-bezier(.4, 0, .2, 1); --transition-timing-function-linear: linear; --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1); --transition-timing-function-out: cubic-bezier(0, 0, .2, 1); diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index ccaf12fe76dc..d776eee9efe8 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -3,7 +3,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` ":root { --default-transition-duration: .15s; - --default-transition-timing-function: var(--transition-timing-function-in-out); + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-family-sans); --default-font-feature-settings: var(--font-family-sans--font-feature-settings); --default-font-variation-settings: var(--font-family-sans--font-variation-settings); @@ -392,7 +392,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --line-height-8: 2rem; --line-height-9: 2.25rem; --line-height-10: 2.5rem; - --transition-timing-function: cubic-bezier(.4, 0, .2, 1); --transition-timing-function-linear: linear; --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1); --transition-timing-function-out: cubic-bezier(0, 0, .2, 1); diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 9fcfef4c6773..f7f491f303fe 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -151,6 +151,8 @@ export type ThemeKey = | '--default-border-width' | '--default-ring-color' | '--default-ring-width' + | '--default-transition-timing-function' + | '--default-transition-duration' | '--divide-width' | '--divide-color' | '--drop-shadow' diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0873766a4bf6..581f4adf355c 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9713,6 +9713,8 @@ test('transition', () => { compileCss( css` @theme { + --default-transition-timing-function: ease; + --default-transition-duration: 100ms; --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; --transition-property-opacity: opacity; @@ -9732,56 +9734,74 @@ test('transition', () => { ), ).toMatchInlineSnapshot(` ":root { + --default-transition-timing-function: ease; + --default-transition-duration: .1s; --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; --transition-property-opacity: opacity; } .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-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-\\[--value\\] { transition-property: var(--value); - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-all { transition-property: all; - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-opacity { transition-property: opacity; - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-shadow { transition-property: box-shadow; - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-transform { transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--default-transition-timing-function); - transition-duration: var(--default-transition-duration); + transition-duration: .1s; + transition-timing-function: ease; } .transition-none { transition-property: none; }" `) + + expect( + compileCss( + css` + @tailwind utilities; + `, + ['transition-all'], + ), + ).toMatchInlineSnapshot(` + ".transition-all { + transition-property: all; + transition-duration: 0s; + transition-timing-function: ease; + }" + `) + expect( run([ '-transition', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index d0c1e32ffb9c..f5d16bb1dbbb 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3322,8 +3322,8 @@ export function createUtilities(theme: Theme) { } { - let defaultTimingFunction = 'var(--default-transition-timing-function)' - let defaultDuration = 'var(--default-transition-duration)' + let defaultTimingFunction = theme.get(['--default-transition-timing-function']) ?? 'ease' + let defaultDuration = theme.get(['--default-transition-duration']) ?? '0s' staticUtility('transition-none', [['transition-property', 'none']]) staticUtility('transition-all', [ diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 1c05262c712c..00fe4cc5e8f0 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -1,7 +1,7 @@ @theme { /* Defaults */ --default-transition-duration: 150ms; - --default-transition-timing-function: var(--transition-timing-function-in-out); + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-family-sans); --default-font-feature-settings: var(--font-family-sans--font-feature-settings); --default-font-variation-settings: var(--font-family-sans--font-variation-settings); @@ -422,7 +422,6 @@ --line-height-10: 2.5rem; /* Transition timing functions */ - --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --transition-timing-function-linear: linear; --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1); --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);