diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e5e3d89b2d1..8a4a2570921b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don't scan source files for utilities unless `@tailwind utilities` is present in the CSS in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226)) - Skip reserializing CSS files that don't use Tailwind features in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226)) - _Upgrade (experimental)_: Do not migrate the `overflow-clip` utility ([#15244](https://github.com/tailwindlabs/tailwindcss/pull/15244)) +- _Upgrade (experimental)_: Rename `backdrop-blur` to `backdrop-blur-sm` and `backdrop-blur-sm` to `backdrop-blur-xs` ([#15242](https://github.com/tailwindlabs/tailwindcss/pull/15242)) ## [4.0.0-beta.3] - 2024-11-27 diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index cc8016080d03..42cff58dea40 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -2297,6 +2297,9 @@ test( blur: { DEFAULT: 'var(--custom-default-blur)', }, + backdropBlur: { + DEFAULT: 'var(--custom-default-blur)', + }, // Changes the "after" class definition. 'rounded' -> 'rounded-sm' is // not safe because 'rounded-sm' has a custom value. @@ -2316,6 +2319,7 @@ test(
+
@@ -2340,6 +2344,8 @@ test( --blur: var(--custom-default-blur); + --backdrop-blur: var(--custom-default-blur); + --radius-sm: var(--custom-rounded-sm); } @@ -2365,6 +2371,7 @@ test(
+
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts index 62278a6f8f5f..5d29c1b71b6b 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts @@ -20,6 +20,9 @@ test.each([ ['blur', 'blur-sm'], ['blur-sm', 'blur-xs'], + ['backdrop-blur', 'backdrop-blur-sm'], + ['backdrop-blur-sm', 'backdrop-blur-xs'], + ['ring', 'ring-3'], ['blur!', 'blur-sm!'], diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts index 8d55a9d85fe8..adf31e7f4801 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts @@ -29,6 +29,9 @@ const LEGACY_CLASS_MAP = new Map([ ['blur', 'blur-sm'], ['blur-sm', 'blur-xs'], + ['backdrop-blur', 'backdrop-blur-sm'], + ['backdrop-blur-sm', 'backdrop-blur-xs'], + ['ring', 'ring-3'], ]) @@ -50,6 +53,10 @@ const THEME_KEYS = new Map([ ['blur-sm', '--blur-sm'], ['blur-xs', '--blur-xs'], + ['backdrop-blur', '--backdrop-blur'], + ['backdrop-blur-sm', '--backdrop-blur-sm'], + ['backdrop-blur-xs', '--backdrop-blur-xs'], + ['ring', '--ring-width'], ['ring-3', '--ring-width-3'], ])