From 4c158db854dc76c19385f88badd5a14e2309436d Mon Sep 17 00:00:00 2001 From: bronisMateusz Date: Wed, 20 Aug 2025 09:51:13 +0200 Subject: [PATCH 1/3] fix(sr-only): replace deprecated clip with clip-path inset(50%) (#18768) --- packages/tailwindcss/src/utilities.test.ts | 6 ++--- packages/tailwindcss/src/utilities.ts | 26 +++++++++++----------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 4feac35b762b..44b98206ddb0 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; @@ -26936,7 +26936,7 @@ describe('custom utilities', () => { }) test('bare values with unsupported data types should result in a warning', async () => { - let spy = vi.spyOn(console, 'warn').mockImplementation(() => {}) + let spy = vi.spyOn(console, 'warn').mockImplementation(() => { }) let input = css` @utility paint-* { paint: --value([color], color); diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 52088e242f13..1bbedd77f3f2 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -79,14 +79,14 @@ interface SuggestionGroup { type SuggestionDefinition = | string | { - supportsNegative?: boolean - supportsFractions?: boolean - values?: string[] - modifiers?: string[] - valueThemeKeys?: ThemeKey[] - modifierThemeKeys?: ThemeKey[] - hasDefaultValue?: boolean - } + supportsNegative?: boolean + supportsFractions?: boolean + values?: string[] + modifiers?: string[] + valueThemeKeys?: ThemeKey[] + modifierThemeKeys?: ThemeKey[] + hasDefaultValue?: boolean + } export type UtilityOptions = { types: string[] @@ -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'], ]) @@ -6326,9 +6326,9 @@ function alphaReplacedDropShadowProperties( decl( property, prefix + - segment(value, ',') - .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`) - .join(' '), + segment(value, ',') + .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`) + .join(' '), ), rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]), ] From 6fce974894d2587781e347964f933d646a71fa57 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 28 Aug 2025 10:46:50 -0400 Subject: [PATCH 2/3] fix formatting --- packages/tailwindcss/src/utilities.test.ts | 2 +- packages/tailwindcss/src/utilities.ts | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 44b98206ddb0..02f463eae283 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26936,7 +26936,7 @@ describe('custom utilities', () => { }) test('bare values with unsupported data types should result in a warning', async () => { - let spy = vi.spyOn(console, 'warn').mockImplementation(() => { }) + let spy = vi.spyOn(console, 'warn').mockImplementation(() => {}) let input = css` @utility paint-* { paint: --value([color], color); diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 1bbedd77f3f2..308ccba26812 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -79,14 +79,14 @@ interface SuggestionGroup { type SuggestionDefinition = | string | { - supportsNegative?: boolean - supportsFractions?: boolean - values?: string[] - modifiers?: string[] - valueThemeKeys?: ThemeKey[] - modifierThemeKeys?: ThemeKey[] - hasDefaultValue?: boolean - } + supportsNegative?: boolean + supportsFractions?: boolean + values?: string[] + modifiers?: string[] + valueThemeKeys?: ThemeKey[] + modifierThemeKeys?: ThemeKey[] + hasDefaultValue?: boolean + } export type UtilityOptions = { types: string[] @@ -6326,9 +6326,9 @@ function alphaReplacedDropShadowProperties( decl( property, prefix + - segment(value, ',') - .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`) - .join(' '), + segment(value, ',') + .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`) + .join(' '), ), rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]), ] From 4b70b129270150c589592fa2aa3d2776f973bd09 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 28 Aug 2025 10:49:45 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3801ae9d3972..607a9490e333 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798)) - Migrate `aria` theme keys to `@custom-variant` ([#18815](https://github.com/tailwindlabs/tailwindcss/pull/18815)) - Migrate `data` theme keys to `@custom-variant` ([#18816](https://github.com/tailwindlabs/tailwindcss/pull/18816)) +- Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](https://github.com/tailwindlabs/tailwindcss/pull/18769)) ## [4.1.12] - 2025-08-13