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:
parent
e578238da5
commit
7b03aca53f
3 changed files with 5 additions and 4 deletions
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
])
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue