From fed942b0c2772e4a561e92d353768390ea0f419c Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 7 Nov 2024 16:24:37 -0500 Subject: [PATCH 1/3] Add radius utilities and deprecated rounded utilities --- .../src/__snapshots__/index.test.ts.snap | 8 - .../src/__snapshots__/index.test.ts.snap | 8 - .../__snapshots__/intellisense.test.ts.snap | 540 ++++++++++++++++++ packages/tailwindcss/src/utilities.ts | 35 +- packages/tailwindcss/theme.css | 20 +- playgrounds/vite/src/app.tsx | 3 + 6 files changed, 584 insertions(+), 30 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 83624ee4fff0..5ebd2b1f9ae5 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -271,14 +271,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 4c4150925a86..115b278ababf 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -270,14 +270,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index ac0a70fa693d..09a74146bd35 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -5053,6 +5053,546 @@ exports[`getClassList 1`] = ` "py-9", "py-96", "py-px", + "radius-0", + "radius-0.5", + "radius-1", + "radius-1.5", + "radius-10", + "radius-11", + "radius-12", + "radius-14", + "radius-16", + "radius-2", + "radius-2.5", + "radius-20", + "radius-24", + "radius-28", + "radius-3", + "radius-3.5", + "radius-32", + "radius-36", + "radius-4", + "radius-40", + "radius-44", + "radius-48", + "radius-5", + "radius-52", + "radius-56", + "radius-6", + "radius-60", + "radius-64", + "radius-7", + "radius-72", + "radius-8", + "radius-80", + "radius-9", + "radius-96", + "radius-b-0", + "radius-b-0.5", + "radius-b-1", + "radius-b-1.5", + "radius-b-10", + "radius-b-11", + "radius-b-12", + "radius-b-14", + "radius-b-16", + "radius-b-2", + "radius-b-2.5", + "radius-b-20", + "radius-b-24", + "radius-b-28", + "radius-b-3", + "radius-b-3.5", + "radius-b-32", + "radius-b-36", + "radius-b-4", + "radius-b-40", + "radius-b-44", + "radius-b-48", + "radius-b-5", + "radius-b-52", + "radius-b-56", + "radius-b-6", + "radius-b-60", + "radius-b-64", + "radius-b-7", + "radius-b-72", + "radius-b-8", + "radius-b-80", + "radius-b-9", + "radius-b-96", + "radius-b-full", + "radius-b-px", + "radius-bl-0", + "radius-bl-0.5", + "radius-bl-1", + "radius-bl-1.5", + "radius-bl-10", + "radius-bl-11", + "radius-bl-12", + "radius-bl-14", + "radius-bl-16", + "radius-bl-2", + "radius-bl-2.5", + "radius-bl-20", + "radius-bl-24", + "radius-bl-28", + "radius-bl-3", + "radius-bl-3.5", + "radius-bl-32", + "radius-bl-36", + "radius-bl-4", + "radius-bl-40", + "radius-bl-44", + "radius-bl-48", + "radius-bl-5", + "radius-bl-52", + "radius-bl-56", + "radius-bl-6", + "radius-bl-60", + "radius-bl-64", + "radius-bl-7", + "radius-bl-72", + "radius-bl-8", + "radius-bl-80", + "radius-bl-9", + "radius-bl-96", + "radius-bl-full", + "radius-bl-px", + "radius-br-0", + "radius-br-0.5", + "radius-br-1", + "radius-br-1.5", + "radius-br-10", + "radius-br-11", + "radius-br-12", + "radius-br-14", + "radius-br-16", + "radius-br-2", + "radius-br-2.5", + "radius-br-20", + "radius-br-24", + "radius-br-28", + "radius-br-3", + "radius-br-3.5", + "radius-br-32", + "radius-br-36", + "radius-br-4", + "radius-br-40", + "radius-br-44", + "radius-br-48", + "radius-br-5", + "radius-br-52", + "radius-br-56", + "radius-br-6", + "radius-br-60", + "radius-br-64", + "radius-br-7", + "radius-br-72", + "radius-br-8", + "radius-br-80", + "radius-br-9", + "radius-br-96", + "radius-br-full", + "radius-br-px", + "radius-e-0", + "radius-e-0.5", + "radius-e-1", + "radius-e-1.5", + "radius-e-10", + "radius-e-11", + "radius-e-12", + "radius-e-14", + "radius-e-16", + "radius-e-2", + "radius-e-2.5", + "radius-e-20", + "radius-e-24", + "radius-e-28", + "radius-e-3", + "radius-e-3.5", + "radius-e-32", + "radius-e-36", + "radius-e-4", + "radius-e-40", + "radius-e-44", + "radius-e-48", + "radius-e-5", + "radius-e-52", + "radius-e-56", + "radius-e-6", + "radius-e-60", + "radius-e-64", + "radius-e-7", + "radius-e-72", + "radius-e-8", + "radius-e-80", + "radius-e-9", + "radius-e-96", + "radius-e-full", + "radius-e-px", + "radius-ee-0", + "radius-ee-0.5", + "radius-ee-1", + "radius-ee-1.5", + "radius-ee-10", + "radius-ee-11", + "radius-ee-12", + "radius-ee-14", + "radius-ee-16", + "radius-ee-2", + "radius-ee-2.5", + "radius-ee-20", + "radius-ee-24", + "radius-ee-28", + "radius-ee-3", + "radius-ee-3.5", + "radius-ee-32", + "radius-ee-36", + "radius-ee-4", + "radius-ee-40", + "radius-ee-44", + "radius-ee-48", + "radius-ee-5", + "radius-ee-52", + "radius-ee-56", + "radius-ee-6", + "radius-ee-60", + "radius-ee-64", + "radius-ee-7", + "radius-ee-72", + "radius-ee-8", + "radius-ee-80", + "radius-ee-9", + "radius-ee-96", + "radius-ee-full", + "radius-ee-px", + "radius-es-0", + "radius-es-0.5", + "radius-es-1", + "radius-es-1.5", + "radius-es-10", + "radius-es-11", + "radius-es-12", + "radius-es-14", + "radius-es-16", + "radius-es-2", + "radius-es-2.5", + "radius-es-20", + "radius-es-24", + "radius-es-28", + "radius-es-3", + "radius-es-3.5", + "radius-es-32", + "radius-es-36", + "radius-es-4", + "radius-es-40", + "radius-es-44", + "radius-es-48", + "radius-es-5", + "radius-es-52", + "radius-es-56", + "radius-es-6", + "radius-es-60", + "radius-es-64", + "radius-es-7", + "radius-es-72", + "radius-es-8", + "radius-es-80", + "radius-es-9", + "radius-es-96", + "radius-es-full", + "radius-es-px", + "radius-full", + "radius-l-0", + "radius-l-0.5", + "radius-l-1", + "radius-l-1.5", + "radius-l-10", + "radius-l-11", + "radius-l-12", + "radius-l-14", + "radius-l-16", + "radius-l-2", + "radius-l-2.5", + "radius-l-20", + "radius-l-24", + "radius-l-28", + "radius-l-3", + "radius-l-3.5", + "radius-l-32", + "radius-l-36", + "radius-l-4", + "radius-l-40", + "radius-l-44", + "radius-l-48", + "radius-l-5", + "radius-l-52", + "radius-l-56", + "radius-l-6", + "radius-l-60", + "radius-l-64", + "radius-l-7", + "radius-l-72", + "radius-l-8", + "radius-l-80", + "radius-l-9", + "radius-l-96", + "radius-l-full", + "radius-l-px", + "radius-px", + "radius-r-0", + "radius-r-0.5", + "radius-r-1", + "radius-r-1.5", + "radius-r-10", + "radius-r-11", + "radius-r-12", + "radius-r-14", + "radius-r-16", + "radius-r-2", + "radius-r-2.5", + "radius-r-20", + "radius-r-24", + "radius-r-28", + "radius-r-3", + "radius-r-3.5", + "radius-r-32", + "radius-r-36", + "radius-r-4", + "radius-r-40", + "radius-r-44", + "radius-r-48", + "radius-r-5", + "radius-r-52", + "radius-r-56", + "radius-r-6", + "radius-r-60", + "radius-r-64", + "radius-r-7", + "radius-r-72", + "radius-r-8", + "radius-r-80", + "radius-r-9", + "radius-r-96", + "radius-r-full", + "radius-r-px", + "radius-s-0", + "radius-s-0.5", + "radius-s-1", + "radius-s-1.5", + "radius-s-10", + "radius-s-11", + "radius-s-12", + "radius-s-14", + "radius-s-16", + "radius-s-2", + "radius-s-2.5", + "radius-s-20", + "radius-s-24", + "radius-s-28", + "radius-s-3", + "radius-s-3.5", + "radius-s-32", + "radius-s-36", + "radius-s-4", + "radius-s-40", + "radius-s-44", + "radius-s-48", + "radius-s-5", + "radius-s-52", + "radius-s-56", + "radius-s-6", + "radius-s-60", + "radius-s-64", + "radius-s-7", + "radius-s-72", + "radius-s-8", + "radius-s-80", + "radius-s-9", + "radius-s-96", + "radius-s-full", + "radius-s-px", + "radius-se-0", + "radius-se-0.5", + "radius-se-1", + "radius-se-1.5", + "radius-se-10", + "radius-se-11", + "radius-se-12", + "radius-se-14", + "radius-se-16", + "radius-se-2", + "radius-se-2.5", + "radius-se-20", + "radius-se-24", + "radius-se-28", + "radius-se-3", + "radius-se-3.5", + "radius-se-32", + "radius-se-36", + "radius-se-4", + "radius-se-40", + "radius-se-44", + "radius-se-48", + "radius-se-5", + "radius-se-52", + "radius-se-56", + "radius-se-6", + "radius-se-60", + "radius-se-64", + "radius-se-7", + "radius-se-72", + "radius-se-8", + "radius-se-80", + "radius-se-9", + "radius-se-96", + "radius-se-full", + "radius-se-px", + "radius-ss-0", + "radius-ss-0.5", + "radius-ss-1", + "radius-ss-1.5", + "radius-ss-10", + "radius-ss-11", + "radius-ss-12", + "radius-ss-14", + "radius-ss-16", + "radius-ss-2", + "radius-ss-2.5", + "radius-ss-20", + "radius-ss-24", + "radius-ss-28", + "radius-ss-3", + "radius-ss-3.5", + "radius-ss-32", + "radius-ss-36", + "radius-ss-4", + "radius-ss-40", + "radius-ss-44", + "radius-ss-48", + "radius-ss-5", + "radius-ss-52", + "radius-ss-56", + "radius-ss-6", + "radius-ss-60", + "radius-ss-64", + "radius-ss-7", + "radius-ss-72", + "radius-ss-8", + "radius-ss-80", + "radius-ss-9", + "radius-ss-96", + "radius-ss-full", + "radius-ss-px", + "radius-t-0", + "radius-t-0.5", + "radius-t-1", + "radius-t-1.5", + "radius-t-10", + "radius-t-11", + "radius-t-12", + "radius-t-14", + "radius-t-16", + "radius-t-2", + "radius-t-2.5", + "radius-t-20", + "radius-t-24", + "radius-t-28", + "radius-t-3", + "radius-t-3.5", + "radius-t-32", + "radius-t-36", + "radius-t-4", + "radius-t-40", + "radius-t-44", + "radius-t-48", + "radius-t-5", + "radius-t-52", + "radius-t-56", + "radius-t-6", + "radius-t-60", + "radius-t-64", + "radius-t-7", + "radius-t-72", + "radius-t-8", + "radius-t-80", + "radius-t-9", + "radius-t-96", + "radius-t-full", + "radius-t-px", + "radius-tl-0", + "radius-tl-0.5", + "radius-tl-1", + "radius-tl-1.5", + "radius-tl-10", + "radius-tl-11", + "radius-tl-12", + "radius-tl-14", + "radius-tl-16", + "radius-tl-2", + "radius-tl-2.5", + "radius-tl-20", + "radius-tl-24", + "radius-tl-28", + "radius-tl-3", + "radius-tl-3.5", + "radius-tl-32", + "radius-tl-36", + "radius-tl-4", + "radius-tl-40", + "radius-tl-44", + "radius-tl-48", + "radius-tl-5", + "radius-tl-52", + "radius-tl-56", + "radius-tl-6", + "radius-tl-60", + "radius-tl-64", + "radius-tl-7", + "radius-tl-72", + "radius-tl-8", + "radius-tl-80", + "radius-tl-9", + "radius-tl-96", + "radius-tl-full", + "radius-tl-px", + "radius-tr-0", + "radius-tr-0.5", + "radius-tr-1", + "radius-tr-1.5", + "radius-tr-10", + "radius-tr-11", + "radius-tr-12", + "radius-tr-14", + "radius-tr-16", + "radius-tr-2", + "radius-tr-2.5", + "radius-tr-20", + "radius-tr-24", + "radius-tr-28", + "radius-tr-3", + "radius-tr-3.5", + "radius-tr-32", + "radius-tr-36", + "radius-tr-4", + "radius-tr-40", + "radius-tr-44", + "radius-tr-48", + "radius-tr-5", + "radius-tr-52", + "radius-tr-56", + "radius-tr-6", + "radius-tr-60", + "radius-tr-64", + "radius-tr-7", + "radius-tr-72", + "radius-tr-8", + "radius-tr-80", + "radius-tr-9", + "radius-tr-96", + "radius-tr-full", + "radius-tr-px", "relative", "resize", "resize-none", diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2248f507deee..877f6df08eb6 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1928,8 +1928,11 @@ export function createUtilities(theme: Theme) { staticUtility('break-all', [['word-break', 'break-all']]) staticUtility('break-keep', [['word-break', 'break-keep']]) + /** + * @css `border-radius` + */ { - // border-radius + // Deprecated: `rounded` utilities for (let [root, properties] of [ ['rounded', ['border-radius']], ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']], @@ -1956,10 +1959,38 @@ export function createUtilities(theme: Theme) { properties.map((property) => [property, 'calc(infinity * 1px)']), ) functionalUtility(root, { - themeKeys: ['--radius'], + themeKeys: ['--radius', '--rounded'], handle: (value) => properties.map((property) => decl(property, value)), }) } + + // `radius-*` utilities + for (let [root, properties] of [ + ['radius', ['border-radius']], + ['radius-s', ['border-start-start-radius', 'border-end-start-radius']], + ['radius-e', ['border-start-end-radius', 'border-end-end-radius']], + ['radius-t', ['border-top-left-radius', 'border-top-right-radius']], + ['radius-r', ['border-top-right-radius', 'border-bottom-right-radius']], + ['radius-b', ['border-bottom-right-radius', 'border-bottom-left-radius']], + ['radius-l', ['border-top-left-radius', 'border-bottom-left-radius']], + ['radius-ss', ['border-start-start-radius']], + ['radius-se', ['border-start-end-radius']], + ['radius-ee', ['border-end-end-radius']], + ['radius-es', ['border-end-start-radius']], + ['radius-tl', ['border-top-left-radius']], + ['radius-tr', ['border-top-right-radius']], + ['radius-br', ['border-bottom-right-radius']], + ['radius-bl', ['border-bottom-left-radius']], + ] as const) { + staticUtility( + `${root}-full`, + properties.map((property) => [property, 'calc(infinity * 1px)']), + ) + + spacingUtility(root, '--radius', (value) => + properties.map((property) => decl(property, value)), + ) + } } staticUtility('border-solid', [ diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 842d172b42fa..c2d04b201979 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -299,16 +299,6 @@ --blur-2xl: 40px; --blur-3xl: 64px; - /* Radii */ - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - /* Shadows */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); @@ -457,11 +447,17 @@ } } -/* Deprecated */ @theme default inline reference { --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); - --radius: 0.25rem; + --rounded: 0.25rem; + --rounded-sm: 0.125rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-4xl: 2rem; } diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx index 8ec50298951f..8f41e3da7255 100644 --- a/playgrounds/vite/src/app.tsx +++ b/playgrounds/vite/src/app.tsx @@ -2,6 +2,9 @@ export function App() { return (

Hello World

+ +
+
) } From 87a55a853982a4d0de8fcc4c7b4ef63d529db3de Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 11 Nov 2024 14:42:32 +0100 Subject: [PATCH 2/3] Add change log --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9915642962a7..90b4862b520d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Support derived spacing scales based on a single `--spacing` theme value ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Add new `**` variant ([#14903](https://github.com/tailwindlabs/tailwindcss/pull/14903)) +- Add new `radius-*` utilities that use the `--spacing` scale by default ([#14912](https://github.com/tailwindlabs/tailwindcss/pull/14912)) - Process `` blocks inside Svelte files when using the Vite extension ([#14151](https://github.com/tailwindlabs/tailwindcss/pull/14151)) - Normalize date/time input styles in Preflight ([#14931](https://github.com/tailwindlabs/tailwindcss/pull/14931)) - _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)) @@ -50,7 +51,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) -- Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880)) @@ -66,6 +66,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926)) - Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929)) - Deprecate `shadow-inner` utility ([#14933](https://github.com/tailwindlabs/tailwindcss/pull/14933)) +- Deprecate `rounded-*` utilities ([#14912](https://github.com/tailwindlabs/tailwindcss/pull/14912)) - Remove `--leading-none` from the default theme in favor of a static `leading-none` utility ([#14934](https://github.com/tailwindlabs/tailwindcss/pull/14934)) ## [4.0.0-alpha.31] - 2024-10-29 From dabd2f897c3634537f67ef04c6e2eab3d5950a85 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 11 Nov 2024 15:07:55 +0100 Subject: [PATCH 3/3] Add codemod to migrate `rounded-*` usages to `radius-*` --- integrations/upgrade/index.test.ts | 14 +++++++++---- .../src/template/codemods/radius.test.ts | 20 +++++++++++++++++++ .../src/template/codemods/radius.ts | 19 ++++++++++++++++++ .../codemods/simple-legacy-classes.test.ts | 3 --- .../codemods/simple-legacy-classes.ts | 3 --- .../src/template/migrate.ts | 2 ++ 6 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/radius.test.ts create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/radius.ts diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index 469291390e61..49ec31699747 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -72,13 +72,16 @@ test( class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(screens.md)]" > -
+
-
+
+ + +
`, 'src/input.css': css` @tailwind base; @@ -104,14 +107,17 @@ test( class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)] ml-[var(--breakpoint-md)]" > -
+
-
+
+ +
+ --- ./src/input.css --- @import 'tailwindcss'; diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/radius.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/radius.test.ts new file mode 100644 index 000000000000..7098b7e86e3d --- /dev/null +++ b/packages/@tailwindcss-upgrade/src/template/codemods/radius.test.ts @@ -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) +}) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/radius.ts b/packages/@tailwindcss-upgrade/src/template/codemods/radius.ts new file mode 100644 index 000000000000..8ae8b8b56d57 --- /dev/null +++ b/packages/@tailwindcss-upgrade/src/template/codemods/radius.ts @@ -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 +} diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts index 511d7196ab60..3966023740c8 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts @@ -27,9 +27,6 @@ test.each([ ['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'], diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts index 55a62de570e3..cbd7d115e3ae 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts @@ -25,9 +25,6 @@ const LEGACY_CLASS_MAP = { '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', diff --git a/packages/@tailwindcss-upgrade/src/template/migrate.ts b/packages/@tailwindcss-upgrade/src/template/migrate.ts index 2ef3d2995894..1334e9850033 100644 --- a/packages/@tailwindcss-upgrade/src/template/migrate.ts +++ b/packages/@tailwindcss-upgrade/src/template/migrate.ts @@ -10,6 +10,7 @@ import { important } from './codemods/important' import { maxWidthScreen } from './codemods/max-width-screen' import { modernizeArbitraryValues } from './codemods/modernize-arbitrary-values' import { prefix } from './codemods/prefix' +import { radius } from './codemods/radius' import { simpleLegacyClasses } from './codemods/simple-legacy-classes' import { themeToVar } from './codemods/theme-to-var' import { variantOrder } from './codemods/variant-order' @@ -31,6 +32,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [ important, bgGradient, simpleLegacyClasses, + radius, maxWidthScreen, themeToVar, variantOrder, // Has to happen before migrations that modify variants