Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate backdrop-blur-* utilities #15242

Merged
merged 3 commits into from
Nov 29, 2024
+18 −0
Merged

Migrate backdrop-blur-* utilities #15242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94b88ed
migrate `backdrop-blur-*` utilities
RobinMalfait Nov 29, 2024
00270ca
update changelog
RobinMalfait Nov 29, 2024
c69b208
update integration tests
RobinMalfait Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 7 additions & 0 deletions integrations/upgrade/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand All @@ -2340,6 +2344,8 @@ test(

--blur: var(--custom-default-blur);

--backdrop-blur: var(--custom-default-blur);

--radius-sm: var(--custom-rounded-sm);
}

Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!'],
Expand Down
7 changes: 7 additions & 0 deletions packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
])

Expand All @@ -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'],
])
Expand Down