Don't rely on existence of --default-transition-* variables in transition utilities (#13219)

* Don't rely on existence of --default-transition-* variables in transition utilities

* Update changelog

* Add test with no default transition values defined

* Inline value for --default-transition-timing-function

This is more consistent with how things worked in v3 and ensures things will still work if the user suppresses the output of all CSS variables.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -15,6 +15,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

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);

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);

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'

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',

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', [

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);