Bring back some deprecated utilities (#15069)

These utilities are deprecated (and were removed) but we're brining them
back so they keep working:

- `flex-grow-*`
- `flex-shrink-*`
- `decoration-slice`
- `decoration-clone`
- `overflow-ellipsis`

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `opacity` theme values configured as decimal numbers via JS config files work with color utilities ([#15067](https://github.com/tailwindlabs/tailwindcss/pull/15067))
+- Bring back support for `decoration-clone`, `decoration-slice`, `overflow-ellipsis`, `flex-grow-*`, and `flex-shrink-*` ([#15069](https://github.com/tailwindlabs/tailwindcss/pull/15069))
 - _Upgrade (experimental)_: Include `color` in the form reset snippet ([#15064](https://github.com/tailwindlabs/tailwindcss/pull/15064))
 
 ## [4.0.0-alpha.36] - 2024-11-21

packages/tailwindcss/src/compat/legacy-utilities.test.ts

@@ -131,3 +131,83 @@ test('max-w-screen', async () => {
     ]),
   ).toEqual('')
 })
+
+test('box-decoration', async () => {
+  expect(await run(['decoration-slice', 'decoration-clone'])).toMatchInlineSnapshot(`
+    ".decoration-clone {
+      -webkit-box-decoration-break: clone;
+      box-decoration-break: clone;
+    }
+
+    .decoration-slice {
+      -webkit-box-decoration-break: slice;
+      box-decoration-break: slice;
+    }"
+  `)
+})
+
+test('overflow-ellipsis', async () => {
+  expect(await run(['overflow-ellipsis'])).toMatchInlineSnapshot(`
+    ".overflow-ellipsis {
+      text-overflow: ellipsis;
+    }"
+  `)
+})
+
+test('flex-grow', async () => {
+  expect(await run(['flex-grow', 'flex-grow-0', 'flex-grow-[123]'])).toMatchInlineSnapshot(`
+    ".flex-grow {
+      flex-grow: 1;
+    }
+
+    .flex-grow-0 {
+      flex-grow: 0;
+    }
+
+    .flex-grow-\\[123\\] {
+      flex-grow: 123;
+    }"
+  `)
+  expect(
+    await run([
+      '-flex-grow',
+      'flex-grow--1',
+      'flex-grow-1.5',
+      '-flex-grow-0',
+      '-flex-grow-[123]',
+      'flex-grow-unknown',
+      'flex-grow/foo',
+      'flex-grow-0/foo',
+      'flex-grow-[123]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('flex-shrink', async () => {
+  expect(await run(['flex-shrink', 'flex-shrink-0', 'flex-shrink-[123]'])).toMatchInlineSnapshot(`
+    ".flex-shrink {
+      flex-shrink: 1;
+    }
+
+    .flex-shrink-0 {
+      flex-shrink: 0;
+    }
+
+    .flex-shrink-\\[123\\] {
+      flex-shrink: 123;
+    }"
+  `)
+  expect(
+    await run([
+      '-flex-shrink',
+      'flex-shrink--1',
+      'flex-shrink-1.5',
+      '-flex-shrink-0',
+      '-flex-shrink-[123]',
+      'flex-shrink-unknown',
+      'flex-shrink/foo',
+      'flex-shrink-0/foo',
+      'flex-shrink-[123]/foo',
+    ]),
+  ).toEqual('')
+})

packages/tailwindcss/src/compat/legacy-utilities.ts

@@ -1,5 +1,6 @@
 import { decl } from '../ast'
 import type { DesignSystem } from '../design-system'
+import { isPositiveInteger } from '../utils/infer-data-type'
 
 export function registerLegacyUtilities(designSystem: DesignSystem) {
   for (let [value, direction] of [
@@ -25,4 +26,48 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     if (!value) return
     return [decl('max-width', value)]
   })
+
+  designSystem.utilities.static(`overflow-ellipsis`, () => [decl('text-overflow', `ellipsis`)])
+
+  designSystem.utilities.static(`decoration-slice`, () => [
+    decl('-webkit-box-decoration-break', `slice`),
+    decl('box-decoration-break', `slice`),
+  ])
+
+  designSystem.utilities.static(`decoration-clone`, () => [
+    decl('-webkit-box-decoration-break', `clone`),
+    decl('box-decoration-break', `clone`),
+  ])
+
+  designSystem.utilities.functional('flex-shrink', (candidate) => {
+    if (candidate.modifier) return
+
+    if (!candidate.value) {
+      return [decl('flex-shrink', '1')]
+    }
+
+    if (candidate.value.kind === 'arbitrary') {
+      return [decl('flex-shrink', candidate.value.value)]
+    }
+
+    if (isPositiveInteger(candidate.value.value)) {
+      return [decl('flex-shrink', candidate.value.value)]
+    }
+  })
+
+  designSystem.utilities.functional('flex-grow', (candidate) => {
+    if (candidate.modifier) return
+
+    if (!candidate.value) {
+      return [decl('flex-grow', '1')]
+    }
+
+    if (candidate.value.kind === 'arbitrary') {
+      return [decl('flex-grow', candidate.value.value)]
+    }
+
+    if (isPositiveInteger(candidate.value.value)) {
+      return [decl('flex-grow', candidate.value.value)]
+    }
+  })
 }