archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add object-{top,bottom}-{left,right} utilities (#17437)

Browse Source 
These match the new `mask-*` and updated `bg-*` utilities.

This is the same as #17378 but for `object-position`.

| Deprecated utility    | New utility           |
| --------------------- | --------------------- |
| `object-left-top`     | `object-top-left`     |
| `object-right-top`    | `object-top-right`    |
| `object-left-bottom`  | `object-bottom-left`  |
| `object-right-bottom` | `object-bottom-right` |
This commit is contained in:
Jordan Pittman 2025-03-28 15:58:17 -04:00 committed by GitHub
parent f77226652a
commit c32b6082a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

8
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View File

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

10
packages/tailwindcss/src/compat/legacy-utilities.ts
View File

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

28
packages/tailwindcss/src/utilities.test.ts
View File

@ -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 {
@ -17745,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;
}
@ -17775,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(

16
packages/tailwindcss/src/utilities.ts
View File

@ -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-bottom', [['object-position', 'bottom']])
staticUtility('object-center', [['object-position', 'center']])
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-top-left', [['object-position', 'left top']])
staticUtility('object-top-right', [['object-position', 'right top']])
staticUtility('object-bottom', [['object-position', 'bottom']])
staticUtility('object-bottom-left', [['object-position', 'left bottom']])
staticUtility('object-bottom-right', [['object-position', 'right bottom']])
staticUtility('object-left', [['object-position', 'left']])
staticUtility('object-right', [['object-position', 'right']])
staticUtility('object-center', [['object-position', 'center']])
functionalUtility('object', {
themeKeys: ['--object-position'],
handle: (value) => [decl('object-position', value)],