Migrate backdrop-blur-* utilities (#15242)

This PR adds missing migrations for the `backdrop-blur-*` utilities. It
uses the same values from your theme as `blur` does.

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
 

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(
         <div>
           <div class="shadow shadow-sm shadow-xs"></div>
           <div class="blur blur-sm"></div>
+          <div class="backdrop-blur backdrop-blur-sm"></div>
           <div class="rounded rounded-sm"></div>
           <div class="ring"></div>
         </div>
@@ -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(
       <div>
         <div class="shadow shadow-sm shadow-xs"></div>
         <div class="blur blur-xs"></div>
+        <div class="backdrop-blur backdrop-blur-xs"></div>
         <div class="rounded rounded-sm"></div>
         <div class="ring"></div>
       </div>

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!'],

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'],
 ])