Simplify CSS when using utilities that use a *-0 or *-1 value#20196
Conversation
Confidence Score: 5/5Safe to merge — the changes are purely additive CSS output optimizations with no behavioral regressions. All three code paths (spacing() early-return, spacingUtility bare-value delegation, and angle-utility literal returns) are logically correct and backed by new snapshot tests covering 0, 0px, 1, 1px, and negative variants. The zero-detection logic in space-x/space-y correctly handles both named spacing values and arbitrary length values. No edge case yields wrong CSS. No files require special attention. The only minor note is the duplicated zero-detection IIFE in utilities.ts for space-x and space-y. Reviews (4): Last reviewed commit: "keep invalid data invalid" | Re-trigger Greptile |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR short-circuits spacing calculations: the spacing() CSS function returns literal 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Thanks! I had a similar change in a local branch the other day when working on that PR you linked! Technically using just That said, we can definitely make some assumptions here. In order for Tailwind CSS to work with the
These conditions must be true in order for the framework to function properly. I'm going to make some (small) changes here:
|
*-0 or *-1 value
|
Good stuff, thanks for taking a look @RobinMalfait! I was also thinking about the |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/tailwindcss/src/css-functions.test.ts`:
- Line 179: Update the test title string in the test named "--spacing(…)
optimizes the output when the input is `1` (with an inline themed)" to correct
the typo: change "with an inline themed" to "with an inline theme" so the test
reads "--spacing(…) optimizes the output when the input is `1` (with an inline
theme)"; locate the test declaration in
packages/tailwindcss/src/css-functions.test.ts (the test(...) call around that
title) and update the string accordingly.
- Line 131: The test name contains a typo: change the string in the test
declaration for the test named "--spacing(…) optimizes the output when the input
is `0` (with an inline themed)" to read "(with an inline theme)". Locate the
test call (the test(...) invocation) in css-functions.test.ts and update the
description text to replace "themed" with "theme" so the test name reads
correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2a2b974b-ad95-4c39-97bf-1296ff3e9d81
📒 Files selected for processing (5)
CHANGELOG.mdpackages/tailwindcss/src/css-functions.test.tspackages/tailwindcss/src/css-functions.tspackages/tailwindcss/src/utilities.test.tspackages/tailwindcss/src/utilities.ts
✅ Files skipped from review due to trivial changes (1)
- CHANGELOG.md
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/tailwindcss/src/utilities.ts`:
- Around line 2124-2143: The zero fast-path incorrectly treats any alphabetic
unit as a valid zero and misses negative-zero forms; update the zero detection
logic (the zero variable that uses dimensions.get and the value variable) to
first normalize value when it matches --spacing(...) to collapse -0 to 0 (e.g.,
map '--spacing(-0)' -> '--spacing(0)'), then call dimensions.get(value) and only
treat it as zero if parsed indicates numeric zero AND the unit is unitless, a
length unit or '%' (check parsed[1] for '' or '%' or a length unit token),
otherwise fall back to non-zero; apply the same change to both space-x and
space-y branches that compute margin-inline-start/end so only legitimate
length/percentage zeroes use the fast-path.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ba29513d-d0d1-46d2-8bc6-e51fe08c27f4
📒 Files selected for processing (3)
packages/tailwindcss/src/css-functions.test.tspackages/tailwindcss/src/utilities.test.tspackages/tailwindcss/src/utilities.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/tailwindcss/src/css-functions.test.ts
- packages/tailwindcss/src/utilities.test.ts
`space-x-[0deg]` stays as:
```css
.space-x-\[0deg\] {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(0deg * var(--tw-space-x-reverse));
margin-inline-end: calc(0deg * calc(1 - var(--tw-space-x-reverse)));
}
}
```
And will not be optimized to just:
```css
.space-x-\[0deg\] {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline: 0;
}
}
```
Why?
While inspecting a Tailwind-powered site, I noticed selectors like
which seem a bit silly, not to mention more complex for the end-user device parsing the CSS.
Summary
This PR adjusts helpers to not generate
calc(... * 0)expressions.#19095 does a similar thing on CSS AST, but that doesn't run during the build proper.
Test plan
Ran
pnpm build && pnpm test && pnpm test:integration. (Some unrelated tests failed on my machine, hopefully less in CI.)