Preserve zero spacing as a length in custom properties

[sjh9714]

Summary

Fixes #20315.

--spacing(0) was optimized to unitless 0 even when assigned to a custom property. That changes the value type from a length to a number when the variable is later used in calc(), so this keeps direct declarations compact while emitting 0px for custom-property assignments.

Test plan

• pnpm install --frozen-lockfile
• pnpm exec vitest run packages/tailwindcss/src/css-functions.test.ts --hideSkippedTests
• pnpm exec prettier --check packages/tailwindcss/src/css-functions.ts packages/tailwindcss/src/css-functions.test.ts

I also ran the same Vitest command after adding the regression test but before the fix, and confirmed it failed with --offset: 0 instead of --offset: 0px.

[greptile-apps]

Confidence Score: 5/5

Safe to merge — the change is a single conditional within the zero-value fast path; the non-custom-property branch is completely unmodified.

The fix is minimal and well-targeted. The source.kind and source.property.startsWith('--') guard correctly identifies the only context where a unitless 0 is type-unsafe. All pre-existing tests for regular-property optimization continue to expect '0', confirming nothing regresses there. The single new test reproduces the reported failure mode end-to-end. The only open item is a stale inline comment that wasn't updated to describe the new dual behavior.

No files require special attention — both changed files are small and self-contained.

_{Reviews (1): Last reviewed commit: "Fix zero spacing in custom properties" | Re-trigger Greptile}

[coderabbitai]

Walkthrough

The spacing() CSS function was updated so that when a resolved spacing value equals zero, it now returns "0px" when the value is being assigned to a custom property (a declaration whose property name starts with "--"), and continues to return "0" in other contexts. This required renaming an internal function parameter to make the declaration context accessible. A new test was added to verify that --spacing(0) assigned to a custom property preserves the "0px" form and behaves correctly when subsequently used in a calc() expression.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: preserving zero spacing as a length in custom properties.
Description check	✅ Passed	The description is directly related to the code changes and the regression being fixed.
Linked Issues check	✅ Passed	The PR matches #20315 by emitting 0px for --spacing(0) in custom properties while keeping direct declarations compact.
Out of Scope Changes check	✅ Passed	The changes are limited to the targeted function logic and a regression test, with no clear unrelated additions.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

packages/tailwindcss/src/css-functions.ts (1)

66-73: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Update the optimization comment to reflect the new custom-property path.

Line 73 says "a value of 0 can be replaced by 0", but this is no longer universally true — custom property declarations now produce 0px. A small comment update would keep the rationale accurate.

📝 Suggested comment update

   // - That means that a value of `0` can be replaced by `0`
-  // - That means that a value of `1` can be replaced by `multiplier`
+  // - That means that a value of `0` can be replaced by `0` (or `0px` for custom properties to preserve length type)
+  // - That means that a value of `1` can be replaced by `multiplier`

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5e43d0af-78b0-4fcd-ae23-3bc7a212ef6b

📥 Commits

Reviewing files that changed from the base of the PR and between 4af47fb and 3bb4a45.

📒 Files selected for processing (2)

• packages/tailwindcss/src/css-functions.test.ts
• packages/tailwindcss/src/css-functions.ts

[RobinMalfait]

Hey! Thanks for the PR, but I fixed it in a different way as part of #20319.

Your PR does solve the issue where you use --foo: --spacing(0), but it doesn't solve the issue if you use --spacing(0) in a calc(…) directly where we expect a <length> to be used instead of a <number>. E.g.: calc(100% - --spacing(0)) without optimizations is correct, with a 0 it becomes invalid, with 0px it's valid again. This PR would produce a 0 instead of 0px if you use --spacing(0) directly.