archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Migrate default utilities to have a value suffix (#14875)

Browse Source 
This PR adds a migration for migrating the changes we implemented in
https://github.com/tailwindlabs/tailwindcss/pull/14849

This is the migration we perform:

| Old               | New                |
| ----------------- | ------------------ |
| `shadow`          | `shadow-sm`        |
| `shadow-sm`       | `shadow-xs`        |
| `shadow-xs`       | `shadow-2xs`       |
| `inset-shadow`    | `inset-shadow-sm`  |
| `inset-shadow-sm` | `inset-shadow-xs`  |
| `inset-shadow-xs` | `inset-shadow-2xs` |
| `drop-shadow`     | `drop-shadow-sm`   |
| `drop-shadow-sm`  | `drop-shadow-xs`   |
| `rounded`         | `rounded-sm`       |
| `rounded-sm`      | `rounded-xs`       |
| `blur`            | `blur-sm`          |
| `blur-sm`         | `blur-xs`          |

Also added an integration test to ensure that `shadow` is properly
migrated to `shadow-sm`, and doesn't get migrated to `shadow-xs`
(because `shadow-sm` is migrated to `shadow-xs`).
This commit is contained in:
Robin Malfait 2024-11-06 12:28:38 +01:00 committed by GitHub
parent 4e164107dd
commit d099f8bda6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -13,6 +13,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
- _Upgrade (experimental)_: Migrate `grid-cols-[subgrid]` and `grid-rows-[subgrid]` to `grid-cols-subgrid` and `grid-rows-subgrid` ([#14840](https://github.com/tailwindlabs/tailwindcss/pull/14840))
- _Upgrade (experimental)_: Support migrating projects with multiple config files ([#14863](https://github.com/tailwindlabs/tailwindcss/pull/14863))
- _Upgrade (experimental)_: Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
- _Upgrade (experimental)_: Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
- _Upgrade (experimental)_: Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
- _Upgrade (experimental)_: Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
- _Upgrade (experimental)_: Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
### Fixed

16
integrations/upgrade/index.test.ts
View File

@ -71,6 +71,14 @@ test(
<div
class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(screens.md)]"
></div>
<!-- Migrate to sm -->
<div class="blur shadow rounded inset-shadow drop-shadow"></div>
<!-- Migrate to xs -->
<div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
<!-- Migrate to 2xs -->
<div class="shadow-xs inset-shadow-xs"></div>
`,
'src/input.css': css`
@tailwind base;
@ -95,6 +103,14 @@ test(
<div
class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)] ml-[var(--breakpoint-md)]"
></div>
<!-- Migrate to sm -->
<div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
<!-- Migrate to xs -->
<div class="blur-xs shadow-xs rounded-xs inset-shadow-xs drop-shadow-xs"></div>
<!-- Migrate to 2xs -->
<div class="shadow-2xs inset-shadow-2xs"></div>
--- ./src/input.css ---
@import 'tailwindcss';

17
packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts
View File

@ -15,6 +15,23 @@ test.each([
['max-lg:hover:decoration-slice', 'max-lg:hover:box-decoration-slice'],
['max-lg:hover:decoration-slice!', 'max-lg:hover:box-decoration-slice!'],
['max-lg:hover:!decoration-slice', 'max-lg:hover:box-decoration-slice!'],
['shadow', 'shadow-sm'],
['shadow-sm', 'shadow-xs'],
['shadow-xs', 'shadow-2xs'],
['inset-shadow', 'inset-shadow-sm'],
['inset-shadow-sm', 'inset-shadow-xs'],
['inset-shadow-xs', 'inset-shadow-2xs'],
['drop-shadow', 'drop-shadow-sm'],
['drop-shadow-sm', 'drop-shadow-xs'],
['rounded', 'rounded-sm'],
['rounded-sm', 'rounded-xs'],
['blur', 'blur-sm'],
['blur-sm', 'blur-xs'],
])('%s => %s', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
base: __dirname,

17
packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts
View File

@ -13,6 +13,23 @@ const LEGACY_CLASS_MAP = {
'flex-shrink-0': 'shrink-0',
'decoration-clone': 'box-decoration-clone',
'decoration-slice': 'box-decoration-slice',
shadow: 'shadow-sm',
'shadow-sm': 'shadow-xs',
'shadow-xs': 'shadow-2xs',
'inset-shadow': 'inset-shadow-sm',
'inset-shadow-sm': 'inset-shadow-xs',
'inset-shadow-xs': 'inset-shadow-2xs',
'drop-shadow': 'drop-shadow-sm',
'drop-shadow-sm': 'drop-shadow-xs',
rounded: 'rounded-sm',
'rounded-sm': 'rounded-xs',
blur: 'blur-sm',
'blur-sm': 'blur-xs',
}
const SEEDED = new WeakSet<DesignSystem>()