From 85dc3db63365b5888eb452976cbd5bf2b41880c4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 20 Nov 2024 11:39:16 +0100
Subject: [PATCH] Add new `transition-discrete` and `transition-normal`
 utilities (#15051)

This PR adds two new utilities for the `transition-behavior` property:

| Name | Definition |
| --- | --- |
| `transition-discrete` | `transition-behavior: allow-discrete` |
| `transition-normal` | `transition-behavior: normal` |


# Test plan

Not a lot too test here, but verified in the browser that these
properties generate correct CSS:
<img width="301" alt="image"
src="https://github.com/user-attachments/assets/db314750-e129-47d6-b605-d3b367ae81a4">
<img width="253" alt="image"
src="https://github.com/user-attachments/assets/24da5a6e-0b6a-48aa-a042-5ec19773bc6b">

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
---
 CHANGELOG.md                                       |  1 +
 .../src/__snapshots__/intellisense.test.ts.snap    |  2 ++
 packages/tailwindcss/src/property-order.ts         |  1 +
 packages/tailwindcss/src/utilities.test.ts         | 14 ++++++++++++++
 packages/tailwindcss/src/utilities.ts              |  3 +++
 5 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6453e17616e..776ca885c906 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bundle `@tailwindcss/forms`, `@tailwindcss/typography`, and `@tailwindcss/aspect-ratio` with the standalone CLI ([#15028](https://github.com/tailwindlabs/tailwindcss/pull/15028))
 - Allow `addUtilities()` and `addComponents()` to work with child combinators and other complex selectors ([#15029](https://github.com/tailwindlabs/tailwindcss/pull/15029))
 - Support colors that use `<alpha-value>` in JS configs and plugins ([#15033](https://github.com/tailwindlabs/tailwindcss/pull/15033))
+- Add new `transition-discrete` and `transition-normal` utilities for `transition-behavior` ([#15051](https://github.com/tailwindlabs/tailwindcss/pull/15051))
 - _Upgrade (experimental)_: Migrate `[&>*]` to the `*` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
 - _Upgrade (experimental)_: Migrate `[&_*]` to the `**` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
 - _Upgrade (experimental)_: Warn when trying to migrating a project that is not on Tailwind CSS v3 ([#15015](https://github.com/tailwindlabs/tailwindcss/pull/15015))
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index aa80fc0376e7..13bb9a8789ee 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -7176,7 +7176,9 @@ exports[`getClassList 1`] = `
   "transition",
   "transition-all",
   "transition-colors",
+  "transition-discrete",
   "transition-none",
+  "transition-normal",
   "transition-opacity",
   "transition-shadow",
   "transition-transform",
diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index d8bdb0265270..90290d54c0a3 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -339,6 +339,7 @@ export default [
   'backdrop-filter',
 
   'transition-property',
+  'transition-behavior',
   'transition-delay',
   'transition-duration',
   'transition-timing-function',
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 5483d2085e4a..420377bd08b4 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -14463,6 +14463,20 @@ test('transition', async () => {
   ).toEqual('')
 })
 
+test('transition-behavior', async () => {
+  expect(await run(['transition-discrete', 'transition-normal'])).toMatchInlineSnapshot(`
+    ".transition-discrete {
+      transition-behavior: allow-discrete;
+    }
+
+    .transition-normal {
+      transition-behavior: normal;
+    }"
+  `)
+
+  expect(await run(['-transition-discrete', '-transition-normal'])).toEqual('')
+})
+
 test('delay', async () => {
   expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
     ".delay-123 {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index ee90f9e2e811..c5d9bdf3c6d4 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3552,6 +3552,9 @@ export function createUtilities(theme: Theme) {
       ],
     })
 
+    staticUtility('transition-discrete', [['transition-behavior', 'allow-discrete']])
+    staticUtility('transition-normal', [['transition-behavior', 'normal']])
+
     functionalUtility('delay', {
       handleBareValue: ({ value }) => {
         if (!isPositiveInteger(value)) return null