From 325217b72afce4c6ceac3817c40554f5fd916ab8 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 28 Mar 2025 15:46:51 -0400 Subject: [PATCH 1/3] Add `object-{top,bottom}-{left,right}` utilities These match the new mask-* and updated bg-* utilities --- packages/tailwindcss/src/compat/legacy-utilities.ts | 10 ++++++++++ packages/tailwindcss/src/utilities.test.ts | 12 +++++++++--- packages/tailwindcss/src/utilities.ts | 12 ++++++------ 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts index aee871d49886..e3f9436d1c85 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.ts +++ b/packages/tailwindcss/src/compat/legacy-utilities.ts @@ -29,6 +29,16 @@ export function registerLegacyUtilities(designSystem: DesignSystem) { decl('background-position', 'right bottom'), ]) + // Legacy `object-position` utilities for compatibility with v4.0 and earlier + designSystem.utilities.static('object-left-top', () => [decl('object-position', 'left top')]) + designSystem.utilities.static('object-right-top', () => [decl('object-position', 'right top')]) + designSystem.utilities.static('object-left-bottom', () => [ + decl('object-position', 'left bottom'), + ]) + designSystem.utilities.static('object-right-bottom', () => [ + decl('object-position', 'right bottom'), + ]) + designSystem.utilities.functional('max-w-screen', (candidate) => { if (!candidate.value) return if (candidate.value.kind === 'arbitrary') return diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index ba4c29ee86e3..7e91d968e40f 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -17706,15 +17706,21 @@ test('object', async () => { // object-position 'object-[var(--value)]', + 'object-top', + 'object-top-left', + 'object-top-right', 'object-bottom', - 'object-center', + 'object-bottom-left', + 'object-bottom-right', 'object-left', + 'object-right', + 'object-center', + + // Legacy versions in v4.0 and earlier 'object-left-bottom', 'object-left-top', - 'object-right', 'object-right-bottom', 'object-right-top', - 'object-top', ]), ).toMatchInlineSnapshot(` ".object-contain { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2178f5d80cc3..52f958c4af89 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3639,15 +3639,15 @@ export function createUtilities(theme: Theme) { staticUtility('object-none', [['object-fit', 'none']]) staticUtility('object-scale-down', [['object-fit', 'scale-down']]) + staticUtility('object-top', [['object-position', 'top']]) + staticUtility('object-top-left', [['object-position', 'left top']]) + staticUtility('object-top-right', [['object-position', 'right top']]) staticUtility('object-bottom', [['object-position', 'bottom']]) - staticUtility('object-center', [['object-position', 'center']]) + staticUtility('object-bottom-left', [['object-position', 'left bottom']]) + staticUtility('object-bottom-right', [['object-position', 'right bottom']]) staticUtility('object-left', [['object-position', 'left']]) - staticUtility('object-left-bottom', [['object-position', 'left bottom']]) - staticUtility('object-left-top', [['object-position', 'left top']]) staticUtility('object-right', [['object-position', 'right']]) - staticUtility('object-right-bottom', [['object-position', 'right bottom']]) - staticUtility('object-right-top', [['object-position', 'right top']]) - staticUtility('object-top', [['object-position', 'top']]) + staticUtility('object-center', [['object-position', 'center']]) functionalUtility('object', { themeKeys: ['--object-position'], handle: (value) => [decl('object-position', value)], From 77241a5e690f32b4796332ff3e8ddeb7578bce85 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 28 Mar 2025 15:48:10 -0400 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62c3c79bffb3..4478ae7f30c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added new `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378)) - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432)) - Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398)) +- Added new `object-{top,bottom}-{left,right}` utilities ([#17437](https://github.com/tailwindlabs/tailwindcss/pull/17437)) ### Fixed From 99b50899f7b40c34b219b54f9fa1741b08d03cf8 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 28 Mar 2025 15:48:38 -0400 Subject: [PATCH 3/3] Update tests --- .../src/__snapshots__/intellisense.test.ts.snap | 8 ++++---- packages/tailwindcss/src/utilities.test.ts | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index b44c9144dc9c..18fb9a95ceb3 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -7982,19 +7982,19 @@ exports[`getClassList 1`] = ` "not-italic", "not-sr-only", "object-bottom", + "object-bottom-left", + "object-bottom-right", "object-center", "object-contain", "object-cover", "object-fill", "object-left", - "object-left-bottom", - "object-left-top", "object-none", "object-right", - "object-right-bottom", - "object-right-top", "object-scale-down", "object-top", + "object-top-left", + "object-top-right", "oldstyle-nums", "opacity-0", "opacity-5", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7e91d968e40f..25dc020d6b07 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -17751,6 +17751,14 @@ test('object', async () => { object-position: bottom; } + .object-bottom-left { + object-position: left bottom; + } + + .object-bottom-right { + object-position: right bottom; + } + .object-center { object-position: center; } @@ -17781,6 +17789,14 @@ test('object', async () => { .object-top { object-position: top; + } + + .object-top-left { + object-position: left top; + } + + .object-top-right { + object-position: right top; }" `) expect(