From fe2610ed0f1e5542be697a43981f0f231b95a28e Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 20 Sep 2024 10:50:41 -0400
Subject: [PATCH] Add `field-sizing` utilities (#14469)

This PR adds support for the
[`field-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing)
property which can be used to fit a text inputs, file inputs, textareas,
and selects to the size of the text rather than some implicit default
width.

---------

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        |  3 ++-
 packages/tailwindcss/src/utilities.test.ts        | 15 +++++++++++++++
 packages/tailwindcss/src/utilities.ts             |  6 ++++++
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d6d17aac8fc..05ed30e84bfc 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
 - Support `screens` in JS config files ([#14415](https://github.com/tailwindlabs/tailwindcss/pull/14415))
 - Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467))
 - Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468))
+- Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469))
 
 ### Fixed
 
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 1b6fc55c53c4..8ae6e5dcb607 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1914,6 +1914,8 @@ exports[`getClassList 1`] = `
   "end-4",
   "end-auto",
   "end-full",
+  "field-sizing-content",
+  "field-sizing-fixed",
   "fill-current",
   "fill-current/0",
   "fill-current/5",
diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index b45baca1475b..e28eadc73a20 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -42,8 +42,9 @@ export default [
 
   'box-sizing',
   'display',
-  'aspect-ratio',
 
+  'field-sizing',
+  'aspect-ratio',
   'height',
   'max-height',
   'min-height',
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 72defb4c7213..a55d27e17337 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -1873,6 +1873,21 @@ test('display', async () => {
   ).toEqual('')
 })
 
+test('field-sizing', async () => {
+  expect(await run(['field-sizing-content', 'field-sizing-fixed'])).toMatchInlineSnapshot(`
+    ".field-sizing-content {
+      field-sizing: content;
+    }
+
+    .field-sizing-fixed {
+      field-sizing: fixed;
+    }"
+  `)
+  expect(
+    await run(['field-sizing-[other]', '-field-sizing-content', '-field-sizing-fixed']),
+  ).toEqual('')
+})
+
 test('aspect-ratio', async () => {
   expect(await run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(`
     ".aspect-4\\/3 {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index bc2c76ba2337..5b7b2f765e59 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -882,6 +882,12 @@ export function createUtilities(theme: Theme) {
   staticUtility('contents', [['display', 'contents']])
   staticUtility('list-item', [['display', 'list-item']])
 
+  /**
+   * @css `field-sizing`
+   */
+  staticUtility('field-sizing-content', [['field-sizing', 'content']])
+  staticUtility('field-sizing-fixed', [['field-sizing', 'fixed']])
+
   /**
    * @css `aspect-ratio`
    */