Replace deprecated clip with clip-path in sr-only (#18769)

## Summary

This PR replaces the deprecated `clip` property used in the `sr-only`
utility with `clip-path`, and updates the corresponding reset in
`not-sr-only`.

- Closes
[tailwindlabs/tailwindcss#18768](https://github.com/tailwindlabs/tailwindcss/issues/18768)
- Replaces `clip: rect(0, 0, 0, 0);` with `clip-path: inset(50%);` in
`sr-only`
- Replaces `clip: auto;` with `clip-path: none;` in `not-sr-only`
- Updates unit test snapshots to reflect the new CSS output

Rationale:

- `clip` is deprecated and flagged by modern linters; `clip-path` is the
recommended modern alternative while preserving the intended
visually-hidden behavior.

Before:

```css
.sr-only {
  clip: rect(0, 0, 0, 0);
}

.not-sr-only {
  clip: auto;
}
```

After:

```css
.sr-only {
  clip-path: inset(50%);
}

.not-sr-only {
  clip-path: none;
}
```

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This commit is contained in:
Mateusz Bronis 2025-08-28 17:05:38 +02:00 • committed by GitHub
parent e578238da5
commit 7b03aca53f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 5 additions and 4 deletions

View file

@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Discard matched variants with unknown named values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799))
- Discard matched variants with non-string values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799))
- Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798))
- Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](https://github.com/tailwindlabs/tailwindcss/pull/18769))
- Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](https://github.com/tailwindlabs/tailwindcss/pull/18815))
- Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](https://github.com/tailwindlabs/tailwindcss/pull/18816))
- Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](https://github.com/tailwindlabs/tailwindcss/pull/18817))

View file

@ -7,7 +7,7 @@ const css = String.raw
test('sr-only', async () => {
expect(await run(['sr-only'])).toMatchInlineSnapshot(`
".sr-only {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
width: 1px;
@ -24,7 +24,7 @@ test('sr-only', async () => {
test('not-sr-only', async () => {
expect(await run(['not-sr-only'])).toMatchInlineSnapshot(`
".not-sr-only {
clip: auto;
clip-path: none;
white-space: normal;
width: auto;
height: auto;

View file

@ -556,7 +556,7 @@ export function createUtilities(theme: Theme) {
['padding', '0'],
['margin', '-1px'],
['overflow', 'hidden'],
['clip', 'rect(0, 0, 0, 0)'],
['clip-path', 'inset(50%)'],
['white-space', 'nowrap'],
['border-width', '0'],
])
@ -567,7 +567,7 @@ export function createUtilities(theme: Theme) {
['padding', '0'],
['margin', '0'],
['overflow', 'visible'],
['clip', 'auto'],
['clip-path', 'none'],
['white-space', 'normal'],
])