From cc9e4b833a54cdf94eb9e135c972d9d82c788e72 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:57:31 -0500
Subject: [PATCH] Rename transition-timing-function variables to `--ease-*`

---
 .../src/__snapshots__/index.test.ts.snap         |  6 +++---
 .../src/__snapshots__/index.test.ts.snap         |  6 +++---
 .../src/compat/apply-config-to-theme.test.ts     |  5 +++++
 .../src/compat/apply-config-to-theme.ts          |  1 +
 packages/tailwindcss/src/css-functions.test.ts   |  3 +--
 packages/tailwindcss/src/utilities.test.ts       | 16 ++++++++--------
 packages/tailwindcss/src/utilities.ts            |  2 +-
 packages/tailwindcss/theme.css                   |  6 +++---
 8 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index a48e7a689835..4d1bdbee008a 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -366,9 +366,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --perspective-normal: 500px;
     --perspective-midrange: 800px;
     --perspective-distant: 1200px;
-    --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-    --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
-    --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
+    --ease-in: cubic-bezier(.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
   }
 }
 
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 384e698627ed..c32a8be81354 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -365,9 +365,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --perspective-normal: 500px;
   --perspective-midrange: 800px;
   --perspective-distant: 1200px;
-  --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-  --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
-  --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
+  --ease-in: cubic-bezier(.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, .2, 1);
+  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
 }
 
 .w-4 {
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
index 9cb5782f4423..14a4dcb291fc 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -56,6 +56,10 @@ test('config values can be merged into the theme', () => {
             '0.5': '60%',
             '100%': '100%',
           },
+
+          transitionTimingFunction: {
+            fast: 'cubic-bezier(0, 0.55, 0.45, 1)',
+          },
         },
       },
       base: '/root',
@@ -83,6 +87,7 @@ test('config values can be merged into the theme', () => {
   expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
   expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
   expect(theme.resolve('100%', ['--width'])).toEqual('100%')
+  expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)')
 })
 
 test('will reset default theme values with overwriting theme values', () => {
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index 2194f0ae18b0..cb97bc1ce52d 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -133,6 +133,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'borderRadius') path[0] = 'radius'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'animation') path[0] = 'animate'
+  if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
 
   for (let part of path) {
     if (!IS_VALID_KEY.test(part)) return null
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index cd7820b49aae..40f1d797fb92 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -618,11 +618,10 @@ describe('theme function', () => {
           'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
         ],
         ['width.xs', '20rem'],
-        ['transition.timing.function.in.out', 'cubic-bezier(.4, 0, .2, 1)'],
+        ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
         ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
       ])('theme(%s) → %s', async (value, result) => {
         let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
-
         let compiled = await compileCss(css`
           ${defaultTheme}
           .custom {
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 6d94aa8348d2..19f1434529a7 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -13811,8 +13811,8 @@ test('ease', async () => {
     await compileCss(
       css`
         @theme {
-          --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-          --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+          --ease-in: cubic-bezier(0.4, 0, 1, 1);
+          --ease-out: cubic-bezier(0, 0, 0.2, 1);
         }
         @tailwind utilities;
       `,
@@ -13820,8 +13820,8 @@ test('ease', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-      --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
+      --ease-in: cubic-bezier(.4, 0, 1, 1);
+      --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
     .ease-\\[var\\(--value\\)\\] {
@@ -13830,13 +13830,13 @@ test('ease', async () => {
     }
 
     .ease-in {
-      --tw-ease: var(--transition-timing-function-in);
-      transition-timing-function: var(--transition-timing-function-in);
+      --tw-ease: var(--ease-in);
+      transition-timing-function: var(--ease-in);
     }
 
     .ease-out {
-      --tw-ease: var(--transition-timing-function-out);
-      transition-timing-function: var(--transition-timing-function-out);
+      --tw-ease: var(--ease-out);
+      transition-timing-function: var(--ease-out);
     }
 
     @supports (-moz-orient: inline) {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index aa8a9a620ee0..c9a01db7423d 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3538,7 +3538,7 @@ export function createUtilities(theme: Theme) {
       ['transition-timing-function', 'linear'],
     ])
     functionalUtility('ease', {
-      themeKeys: ['--transition-timing-function'],
+      themeKeys: ['--ease'],
       handle: (value) => [
         transitionTimingFunctionProperty(),
         decl('--tw-ease', value),
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 3d19c44771ef..48bce31132e5 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -421,9 +421,9 @@
   --perspective-distant: 1200px;
 
   /* Transition timing functions */
-  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
-  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
   @keyframes spin {
     to {