Collapse more utilities by expanding their declarations by RobinMalfait · Pull Request #19842 · tailwindlabs/tailwindcss

RobinMalfait · 2026-03-23T14:12:04Z

This PR adds more declaration expansions such that we can collapse more utilities.

While testing #19837 I noticed that in my tests some utilities weren't canonicalized correctly. As part of that PR, we check for parsedCandidate.value === null, which means that a functional utility without a value is skipped. We do have utilities like that such as border (which is equivalent to border-1). But while testing, I noticed that border-x border-y should collapse to border but they didn't. This PR fixes that.

By expanding these properties to their long-form physical properties (instead of the shorter logical properties) we make the signatures of utilities a bit bigger, but also more correct such that we can collapse the physical form into logical utilities.

To make this more concrete, this PR allows for the following canonicalizations now:

Input	Output
`border-t-123 border-r-123 border-b-123 border-l-123`	`border-123`
`border-t-1 border-r-1 border-b-1 border-l-1`	`border`
`border-t-123 border-b-123`	`border-y-123`
`border-l-123 border-r-123`	`border-x-123`
`border-t-red-500 border-r-red-500 border-b-red-500 border-l-red-500`	`border-red-500`
`border-t-red-500 border-b-red-500`	`border-y-red-500`
`border-l-red-500 border-r-red-500`	`border-x-red-500`
`scroll-mt-123 scroll-mr-123 scroll-mb-123 scroll-ml-123`	`scroll-m-123`
`scroll-mt-123 scroll-mb-123`	`scroll-my-123`
`scroll-ml-123 scroll-mr-123`	`scroll-mx-123`
`scroll-pt-123 scroll-pr-123 scroll-pb-123 scroll-pl-123`	`scroll-p-123`
`scroll-pt-123 scroll-pb-123`	`scroll-py-123`
`scroll-pl-123 scroll-pr-123`	`scroll-px-123`
`overflow-x-hidden overflow-y-hidden`	`overflow-hidden`
`overscroll-x-contain overscroll-y-contain`	`overscroll-contain`

Test plan

Existing tests pass
Added a few more tests to verify that these canonicalizations work

coderabbitai · 2026-03-23T14:14:57Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f05e29c1-4579-4df6-9b8b-756f07cde47e

📥 Commits

Reviewing files that changed from the base of the PR and between 94661e3 and ffa86fd.

📒 Files selected for processing (1)

CHANGELOG.md

✅ Files skipped from review due to trivial changes (1)

CHANGELOG.md

Walkthrough

Added variadic expansion mappings for scroll-margin, scroll-padding, border-width, border-style, border-color, overflow, and overscroll-behavior into their corresponding physical directional properties. Enhanced logical-to-physical expansion mappings for logical properties like scroll-margin-block/inline, scroll-padding-block/inline, and border-inline/block-width and border-inline/block-style. Expanded test coverage substantially: added new canonicalization tests for collapsing border side utilities into axis and all-sides shorthands, scroll margin/padding side combinations into axis shorthands, and paired overflow/overscroll utilities into shorthand; replaced generic property-expansion tests with specific tests for inset and gap; introduced additional ExpandProperties and logical-to-physical expansion tests for border, scroll, overflow, and overscroll properties. Updated the changelog with detailed, explicit canonicalization entries. No changes made to public API or exported function signatures.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Collapse more utilities by expanding their declarations' accurately and specifically summarizes the main change—expanding utility declarations to enable more shorthand collapsing.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation (fixing missing canonicalizations for functional utilities without values), the approach (expanding logical properties to physical ones), and providing concrete examples of the new canonicalizations enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

packages/tailwindcss/src/expand-declaration.test.ts (1)

598-612: Semantically incorrect value 1px for border-inline-style.

While the expansion logic works regardless of the value, using 1px for a style property is confusing. Consider using a valid style keyword for clarity.

♻️ Suggested improvement

   test('border-inline-style', () => {
     let input = css`
       .example {
-        border-inline-style: 1px;
+        border-inline-style: solid;
       }
     `

     expect(expand(input, options)).toMatchInlineSnapshot(`
       ".example {
-        border-left-style: 1px;
-        border-right-style: 1px;
+        border-left-style: solid;
+        border-right-style: solid;
       }
       "
     `)
   })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/tailwindcss/src/expand-declaration.test.ts` around lines 598 - 612,
The test "border-inline-style" in expand-declaration.test.ts uses an invalid
semantic value "1px" for the CSS property; update the test input in the test
case (the css`...` block) to use a valid border style keyword such as "solid"
(e.g., border-inline-style: solid;) and update the expected inline snapshot
produced by expand(...) accordingly so it asserts border-left-style: solid; and
border-right-style: solid; (reference the test name "border-inline-style" and
the expand(...) call).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/tailwindcss/src/expand-declaration.test.ts`:
- Around line 614-628: The test currently mislabels and duplicates the
inline-axis test: update the test so it actually covers block-axis expansion by
changing the input CSS to use border-block-style instead of border-inline-style,
use a valid style keyword value (e.g. "solid" or "dashed") instead of "1px", and
update the expectation from left/right properties to block-start/block-end
equivalents (border-top-style and border-bottom-style) to match the expand(...)
behavior; refer to the test name "border-block-style" and the expand(...) helper
to locate and modify this test.
- Around line 582-596: The test labelled "border-block-width" currently uses
`border-inline-width` in the CSS input and expected snapshot, so update the test
to actually exercise `border-block-width`: change the CSS input in the test
block named "border-block-width" to use `border-block-width: 1px;` and update
the expected snapshot produced by `expand(input, options)` to the expansion that
`expand` should produce (i.e., `border-top-width: 1px;` and
`border-bottom-width: 1px;`) so the test verifies block-axis expansion rather
than duplicating the inline-axis test.

---

Nitpick comments:
In `@packages/tailwindcss/src/expand-declaration.test.ts`:
- Around line 598-612: The test "border-inline-style" in
expand-declaration.test.ts uses an invalid semantic value "1px" for the CSS
property; update the test input in the test case (the css`...` block) to use a
valid border style keyword such as "solid" (e.g., border-inline-style: solid;)
and update the expected inline snapshot produced by expand(...) accordingly so
it asserts border-left-style: solid; and border-right-style: solid; (reference
the test name "border-inline-style" and the expand(...) call).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 04686721-c0c3-462a-8863-d46818ee83fb

📥 Commits

Reviewing files that changed from the base of the PR and between b55d960 and d265e29.

📒 Files selected for processing (3)

packages/tailwindcss/src/canonicalize-candidates.test.ts
packages/tailwindcss/src/expand-declaration.test.ts
packages/tailwindcss/src/expand-declaration.ts

packages/tailwindcss/src/expand-declaration.test.ts

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@CHANGELOG.md`:
- Around line 21-22: The two changelog examples incorrectly use `scroll-x-*` for
the lateral shorthand; update the Canonicalization lines so `scroll-m{l,r}-*`
collapses to `scroll-mx-*` (replace `scroll-x-*` with `scroll-mx-*`) and
`scroll-p{l,r}-*` collapses to `scroll-px-*` (replace `scroll-x-*` with
`scroll-px-*`) — adjust the strings in the entries referencing `scroll-m{l,r}-*`
and `scroll-p{l,r}-*` accordingly.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 84471cee-a2ca-452d-b905-673491e80522

📥 Commits

Reviewing files that changed from the base of the PR and between ea1964e and 94661e3.

📒 Files selected for processing (1)

CHANGELOG.md

CHANGELOG.md

RobinMalfait added 8 commits March 23, 2026 14:46

add missing expand declaration tests

76a6fb5

expand border-width

2e30b4c

expand border-style

8690a92

expand border-color

f2a9b0e

expand scroll-margin

23c4c95

expand scroll-padding

ab00693

expand overflow

138bf8f

expand overscroll-behavior

d265e29

RobinMalfait requested a review from a team as a code owner March 23, 2026 14:12

coderabbitai bot reviewed Mar 23, 2026

View reviewed changes

packages/tailwindcss/src/expand-declaration.test.ts Show resolved Hide resolved

packages/tailwindcss/src/expand-declaration.test.ts Show resolved Hide resolved

RobinMalfait added 2 commits March 23, 2026 15:16

fix incorrect property for border-block-width

554f800

fix incorrect property for border-block-style

ea1964e

coderabbitai bot reviewed Mar 23, 2026

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

update changelog

ffa86fd

RobinMalfait force-pushed the feat/canonicalize-shorthands branch from 94661e3 to ffa86fd Compare March 23, 2026 14:31

RobinMalfait merged commit 28d5268 into main Mar 23, 2026
7 checks passed

RobinMalfait deleted the feat/canonicalize-shorthands branch March 23, 2026 14:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Collapse more utilities by expanding their declarations#19842

Collapse more utilities by expanding their declarations#19842
RobinMalfait merged 11 commits intomainfrom
feat/canonicalize-shorthands

RobinMalfait commented Mar 23, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

RobinMalfait commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

coderabbitai bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

RobinMalfait commented Mar 23, 2026 •

edited

Loading

coderabbitai bot commented Mar 23, 2026 •

edited

Loading