-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bring back
max-w-screen-* utilities (#15013)
This PR brings back the `max-w-screen-*` utilities from v3 that read from the `--breakpoint` namespace. Since these utilities are only added back for compatibility reasons, it's put into the compatibility layer. Note that this does not do Intellisense recommendations for the functional utility. ## Test Plan Unit tests are upgraded including some from the compat test that extends the `--breakpoint` namespace from `screen` keys. Also tested this in the Vite playground. --------- Co-authored-by: Adam Wathan <[email protected]> Co-authored-by: Adam Wathan <[email protected]>
- Loading branch information
3 people
authored
Nov 16, 2024
1 parent
b0a539a
commit 5a974cd
Showing
8 changed files
with
172 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
packages/tailwindcss/src/compat/legacy-utilities.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import { expect, test } from 'vitest' | ||
| import { compileCss, run } from '../test-utils/run' | ||
|
|
||
| const css = String.raw | ||
|
|
||
| test('bg-gradient-*', async () => { | ||
| expect( | ||
| await compileCss( | ||
| css` | ||
| @tailwind utilities; | ||
| `, | ||
| [ | ||
| 'bg-gradient-to-t', | ||
| 'bg-gradient-to-tr', | ||
| 'bg-gradient-to-r', | ||
| 'bg-gradient-to-br', | ||
| 'bg-gradient-to-b', | ||
| 'bg-gradient-to-bl', | ||
| 'bg-gradient-to-l', | ||
| 'bg-gradient-to-tl', | ||
| ], | ||
| ), | ||
| ).toMatchInlineSnapshot(` | ||
| ".bg-gradient-to-b { | ||
| --tw-gradient-position: to bottom in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-bl { | ||
| --tw-gradient-position: to bottom left in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-br { | ||
| --tw-gradient-position: to bottom right in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-l { | ||
| --tw-gradient-position: to left in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-r { | ||
| --tw-gradient-position: to right in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-t { | ||
| --tw-gradient-position: to top in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-tl { | ||
| --tw-gradient-position: to top left in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| } | ||
| .bg-gradient-to-tr { | ||
| --tw-gradient-position: to top right in oklch, ; | ||
| background-image: linear-gradient(var(--tw-gradient-stops)); | ||
| }" | ||
| `) | ||
| }) | ||
|
|
||
| test('max-w-screen', async () => { | ||
| expect( | ||
| await compileCss( | ||
| css` | ||
| @theme { | ||
| --breakpoint-sm: 40rem; | ||
| --breakpoint-md: 48rem; | ||
| --breakpoint-lg: 64rem; | ||
| --breakpoint-xl: 80rem; | ||
| --breakpoint-2xl: 96rem; | ||
| } | ||
| @tailwind utilities; | ||
| `, | ||
| [ | ||
| 'max-w-screen-sm', | ||
| 'max-w-screen-md', | ||
| 'max-w-screen-lg', | ||
| 'max-w-screen-xl', | ||
| 'max-w-screen-2xl', | ||
| ], | ||
| ), | ||
| ).toMatchInlineSnapshot(` | ||
| ":root { | ||
| --breakpoint-sm: 40rem; | ||
| --breakpoint-md: 48rem; | ||
| --breakpoint-lg: 64rem; | ||
| --breakpoint-xl: 80rem; | ||
| --breakpoint-2xl: 96rem; | ||
| } | ||
| .max-w-screen-2xl { | ||
| max-width: var(--breakpoint-2xl); | ||
| } | ||
| .max-w-screen-lg { | ||
| max-width: var(--breakpoint-lg); | ||
| } | ||
| .max-w-screen-md { | ||
| max-width: var(--breakpoint-md); | ||
| } | ||
| .max-w-screen-sm { | ||
| max-width: var(--breakpoint-sm); | ||
| } | ||
| .max-w-screen-xl { | ||
| max-width: var(--breakpoint-xl); | ||
| }" | ||
| `) | ||
| expect( | ||
| await run([ | ||
| 'max-w-screen-oh', | ||
| 'max-w-screen-4', | ||
| 'max-w-screen-[4px]', | ||
| '-max-w-screen-sm', | ||
| '-max-w-screen-[4px]', | ||
| 'max-w-screen-none/foo', | ||
| 'max-w-screen-full/foo', | ||
| 'max-w-screen-max/foo', | ||
| 'max-w-screen-max/foo', | ||
| 'max-w-screen-fit/foo', | ||
| 'max-w-screen-4/foo', | ||
| 'max-w-screen-xl/foo', | ||
| 'max-w-screen-[4px]/foo', | ||
| ]), | ||
| ).toEqual('') | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { decl } from '../ast' | ||
| import type { DesignSystem } from '../design-system' | ||
|
|
||
| export function registerLegacyUtilities(designSystem: DesignSystem) { | ||
| for (let [value, direction] of [ | ||
| ['t', 'top'], | ||
| ['tr', 'top right'], | ||
| ['r', 'right'], | ||
| ['br', 'bottom right'], | ||
| ['b', 'bottom'], | ||
| ['bl', 'bottom left'], | ||
| ['l', 'left'], | ||
| ['tl', 'top left'], | ||
| ]) { | ||
| designSystem.utilities.static(`bg-gradient-to-${value}`, () => [ | ||
| decl('--tw-gradient-position', `to ${direction} in oklch,`), | ||
| decl('background-image', `linear-gradient(var(--tw-gradient-stops))`), | ||
| ]) | ||
| } | ||
|
|
||
| designSystem.utilities.functional('max-w-screen', (candidate) => { | ||
| if (!candidate.value) return | ||
| if (candidate.value.kind === 'arbitrary') return | ||
| let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint']) | ||
| if (!value) return | ||
| return [decl('max-width', value)] | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters