Add radius utilities and deprecate rounded #19515
Conversation
Introduce new `radius-*` utilities that support both the `--radius` theme and the spacing scale (e.g., `radius-4` = `calc(--spacing * 4)`). - Add `radius-*` utilities with all corner variants (radius-t, radius-tl, etc.) - Support spacing scale values (radius-4, radius-0.5, etc.) - Support px values (radius-px) - Move `rounded-*` utilities to legacy-utilities.ts - Mark `rounded-*` utilities as legacy (hidden from IntelliSense suggestions) - Add comprehensive tests for both new and legacy utilities
WalkthroughThis pull request adds legacy support for rounded utilities and refactors radius utilities in Tailwind CSS. A new ROUNDED_UTILITIES constant maps legacy rounded utility names to their CSS properties and is registered through registerLegacyUtilities. The utilities.ts file renames rounded-* utilities to radius-* and extends them to support spacing-based values, including new static utilities for 1px declarations per radius root. Legacy utilities handle edge cases like arbitrary values, 'none', and 'full' keywords. Comprehensive test coverage is added for both legacy and modern utilities, validating CSS output for radius variants and complex property parsing scenarios. Pre-merge checks✅ Passed checks (2 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/tailwindcss/src/compat/legacy-utilities.ts (1)
133-165: Consider adding a type assertion forvalueon line 163.The logic is correct, but TypeScript may not narrow the type of
valueafter the early returns in the conditional blocks. While this works at runtime, a non-null assertion could make the intent clearer.🔎 Proposed change
if (value === null) return - return properties.map((property) => decl(property, value)) + return properties.map((property) => decl(property, value!)) }) }Alternatively, this might already work correctly if TypeScript's control flow analysis handles it—you can verify by checking if there are any type errors in CI.
packages/tailwindcss/src/utilities.test.ts (1)
11139-12159: Comprehensive test coverage for all radius variants.The tests correctly validate all 14 directional variants with proper CSS property mappings:
- Logical properties (
radius-s,radius-e,radius-ss,radius-se,radius-ee,radius-es)- Physical properties (
radius-t,radius-r,radius-b,radius-l,radius-tl,radius-tr,radius-br,radius-bl)Consider adding fractional spacing test.
The PR description mentions support for fractional spacing values (e.g.,
radius-0.5), but this case isn't covered in the tests. Consider adding a test case for fractional values to validate this functionality.Example addition to the base radius test
test('radius', async () => { expect( await compileCss( css` @theme { --spacing: 0.25rem; --radius-sm: 0.125rem; --radius: 0.25rem; } @tailwind utilities; `, - ['radius', 'radius-full', 'radius-none', 'radius-sm', 'radius-4', 'radius-px', 'radius-[4px]'], + ['radius', 'radius-full', 'radius-none', 'radius-sm', 'radius-4', 'radius-0.5', 'radius-px', 'radius-[4px]'], ), ).toMatchInlineSnapshot(` ... + .radius-0\\.5 { + border-radius: calc(var(--spacing) * .5); + } ... `)
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
packages/tailwindcss/src/compat/legacy-utilities.test.tspackages/tailwindcss/src/compat/legacy-utilities.tspackages/tailwindcss/src/utilities.test.tspackages/tailwindcss/src/utilities.ts
🧰 Additional context used
🧬 Code graph analysis (4)
packages/tailwindcss/src/compat/legacy-utilities.test.ts (1)
packages/tailwindcss/src/test-utils/run.ts (1)
compileCss(4-11)
packages/tailwindcss/src/utilities.test.ts (3)
packages/tailwindcss/src/test-utils/custom-serializer.ts (1)
test(10-12)packages/tailwindcss/src/test-utils/run.ts (2)
compileCss(4-11)run(13-16)packages/tailwindcss/src/index.test.ts (1)
test(11-236)
packages/tailwindcss/src/utilities.ts (3)
packages/tailwindcss/src/ast.ts (1)
decl(95-102)packages/tailwindcss/src/utils/infer-data-type.ts (1)
isValidSpacingMultiplier(356-358)packages/tailwindcss/src/variants.ts (1)
suggest(195-197)
packages/tailwindcss/src/compat/legacy-utilities.ts (2)
integrations/utils.ts (1)
candidate(534-544)packages/tailwindcss/src/ast.ts (1)
decl(95-102)
🔇 Additional comments (7)
packages/tailwindcss/src/utilities.ts (1)
2175-2214: LGTM! Clean migration fromrounded-*toradius-*with spacing scale support.The implementation correctly:
- Renames utilities to the new
radius-*namespace- Adds support for spacing-based values via
handleBareValue- Provides appropriate suggestions based on theme availability
- Adds the
{root}-pxstatic utility following the establishedspacingUtilitypatternThe
handleBareValuelogic mirrors the pattern inspacingUtility(lines 545-550), ensuring consistency across the codebase.packages/tailwindcss/src/compat/legacy-utilities.test.ts (3)
215-267: Good test coverage for the legacyroundedutility.The test correctly validates:
- Default value resolution (
rounded→var(--radius))- Named theme values (
rounded-sm)- Arbitrary values (
rounded-[4px])- Special values (
rounded-none,rounded-full)- Negative test cases ensuring invalid variants produce no output
269-316: Test covers logical property variants well.The
rounded-stest properly validates that bothborder-start-start-radiusandborder-end-start-radiusare set, matching the implementation inROUNDED_UTILITIES.
318-360: Test coverage for physical corner variant is complete.The
rounded-tltest validates single-corner border-radius behavior correctly.packages/tailwindcss/src/compat/legacy-utilities.ts (2)
5-21: LGTM! Clean mapping of legacy utility names to CSS properties.The mapping correctly mirrors the property associations from the new
radius-*utilities inutilities.ts, ensuring backward compatibility.
145-156: The fallback logic fornoneandfullcorrectly handles missing theme values.When
--radius-noneor--radius-fullaren't defined in the theme, the fallback to static values (0andcalc(infinity * 1px)) ensures the utilities still work as expected. This matches the behavior in the newradius-*utilities'staticValues(lines 2203-2204 inutilities.ts).packages/tailwindcss/src/utilities.test.ts (1)
11054-11137: Solid test coverage for base radius utility.The test correctly validates:
- Fallback behavior for
radius-full(using max float3.40282e38px) when--radius-fullis not defined in the theme- Theme variable override when
--radius-fullis explicitly defined (lines 11102-11120)- Spacing-based values via
calc(var(--spacing) * 4)- Rejection of negative values and modifier syntax
This is just a test of using Claude Code in the Cloud, not really planning to merge this but very curious to see how it did!
This was my prompt:
Introduce new
radius-*utilities that support both the--radiustheme and the spacing scale (e.g.,radius-4=calc(--spacing * 4)).radius-*utilities with all corner variants (radius-t, radius-tl, etc.)rounded-*utilities to legacy-utilities.tsrounded-*utilities as legacy (hidden from IntelliSense suggestions)