diff --git a/CHANGELOG.md b/CHANGELOG.md index cda136124fd5..86205ef4ea0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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)) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 2ae7349444ae..57a00d882219 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -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; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 0ea9954282bf..fa97dbd5273a 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -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'], ])