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>
This commit is contained in:
Robin Malfait 2024-11-20 11:39:16 +01:00 committed by GitHub
parent 75deecadca
commit 85dc3db633
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 21 additions and 0 deletions

View File

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

View File

@ -7176,7 +7176,9 @@ exports[`getClassList 1`] = `
"transition",
"transition-all",
"transition-colors",
"transition-discrete",
"transition-none",
"transition-normal",
"transition-opacity",
"transition-shadow",
"transition-transform",

View File

@ -339,6 +339,7 @@ export default [
'backdrop-filter',
'transition-property',
'transition-behavior',
'transition-delay',
'transition-duration',
'transition-timing-function',

View File

@ -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 {

View File

@ -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