Add object-{top,bottom}-{left,right} utilities

These match the new mask-* and updated bg-* utilities

Author: thecrypticace

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

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 {

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)],