Add radius-* utilities and deprecate rounded-* utilities
#14912
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -72,13 +72,16 @@ | |
| 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 inset-shadow drop-shadow"></div> | ||
|
|
||
| <!-- Migrate to xs --> | ||
| <div class="blur-sm shadow-sm inset-shadow-sm drop-shadow-sm"></div> | ||
|
|
||
| <!-- Migrate to 2xs --> | ||
| <div class="shadow-xs inset-shadow-xs"></div> | ||
|
|
||
| <!-- Migrate to \`radius-*\` --> | ||
| <div class="rounded rounded-sm rounded-xl"></div> | ||
| `, | ||
| 'src/input.css': css` | ||
| @tailwind base; | ||
|
|
@@ -104,14 +107,17 @@ | |
| 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 inset-shadow-sm drop-shadow-sm"></div> | ||
|
|
||
| <!-- Migrate to xs --> | ||
| <div class="blur-xs shadow-xs inset-shadow-xs drop-shadow-xs"></div> | ||
|
|
||
| <!-- Migrate to 2xs --> | ||
| <div class="shadow-2xs inset-shadow-2xs"></div> | ||
|
|
||
| <!-- Migrate to \`radius-*\` --> | ||
| <div class="radius radius-sm radius-xl"></div> | ||
|
|
||
| --- ./src/input.css --- | ||
| @import 'tailwindcss'; | ||
|
|
||
|
|
@@ -196,7 +202,7 @@ | |
| async ({ exec, fs }) => { | ||
| await exec('npx @tailwindcss/upgrade') | ||
|
|
||
| expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(` | ||
|
Check failure on line 205 in integrations/upgrade/index.test.ts
|
||
| " | ||
| --- ./src/index.html --- | ||
| <div | ||
|
|
@@ -414,7 +420,7 @@ | |
| async ({ fs, exec }) => { | ||
| await exec('npx @tailwindcss/upgrade') | ||
|
|
||
| expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(` | ||
|
Check failure on line 423 in integrations/upgrade/index.test.ts
|
||
| " | ||
| --- ./src/index.css --- | ||
| @import 'tailwindcss'; | ||
|
|
@@ -1496,7 +1502,7 @@ | |
| async ({ fs, exec }) => { | ||
| await exec('npx @tailwindcss/upgrade --force') | ||
|
|
||
| expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(` | ||
|
Check failure on line 1505 in integrations/upgrade/index.test.ts
|
||
| " | ||
| --- ./src/index.css --- | ||
| @import 'tailwindcss'; | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { __unstable__loadDesignSystem } from '@tailwindcss/node' | ||
| import { expect, test } from 'vitest' | ||
| import { radius } from './radius' | ||
|
|
||
| test.each([ | ||
| ['hover:rounded', 'hover:radius'], | ||
| ['hover:rounded-sm', 'hover:radius-sm'], | ||
| ['hover:rounded-md', 'hover:radius-md'], | ||
| ['hover:rounded-lg', 'hover:radius-lg'], | ||
| ['hover:rounded-xl', 'hover:radius-xl'], | ||
| ['hover:rounded-2xl', 'hover:radius-2xl'], | ||
| ['hover:rounded-3xl', 'hover:radius-3xl'], | ||
| ['hover:rounded-4xl', 'hover:radius-4xl'], | ||
| ])('%s => %s', async (candidate, result) => { | ||
| let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { | ||
| base: __dirname, | ||
| }) | ||
|
|
||
| expect(radius(designSystem, {}, candidate)).toEqual(result) | ||
| }) |
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,19 @@ | ||
| import type { Config } from 'tailwindcss' | ||
| import type { DesignSystem } from '../../../../tailwindcss/src/design-system' | ||
| import { printCandidate } from '../candidates' | ||
|
|
||
| export function radius( | ||
| designSystem: DesignSystem, | ||
| _userConfig: Config, | ||
| rawCandidate: string, | ||
| ): string { | ||
| for (let candidate of designSystem.parseCandidate(rawCandidate)) { | ||
| if (candidate.kind === 'functional' && candidate.root === 'rounded') { | ||
| return printCandidate(designSystem, { | ||
| ...candidate, | ||
| root: 'radius', | ||
| }) | ||
| } | ||
| } | ||
| return rawCandidate | ||
| } |
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
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
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the change of moving the old scale to be deprecated as it was, I think we can revert this one, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This mostly affects the codemod stuff, I think instead of mapping
roundedtorounded-smetc. we should map it to the newradius-*utilities but leave the values as-is 🤔There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah wait this is more complicated, we can only migrate to
radius-*when we the value is defined in the JS config, the compat layer only worksrounded-*utilitiesThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess also only if the theme is overwritten. 🤔
Consider this configuration:
I expect this to create a
--radius-4xl: 2remvariable (which it does currently) however, the other breakpoints will now be in the--roundednamespace, causing an inconsistency now becauseradius-4xlexists butradius-3xldoesn't.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the v4 equivalent is actually
if custom happens to be
4xl: not much we do here I think, although it would be cool if we can convert it toradius-8but there might be an inherent meaning to the name so that's probably hard to do.