Always produce <length> value when optimizing --spacing(0)

[RobinMalfait]

This PR fixes a type issue when using --spacing(0). This construction doesn't really make sense, but if you use it, it produces the value 0 instead of calc(var(--spacing) * 0) which is fine if you use it in a spot where a <length> data type can be used, then the 0 is interpreted as a <length>.

E.g.: padding: 0 and padding: 0px are equivalent.

However, if you use it in a CSS variable, then the 0 will turn in a <number> if you don't have an @property definition for that CSS variable.

This on its own isn't the issue, but if you later use it as part of a calc(…) then the <number> instead of <length> type is being used. As seen in #20315.

We could remove the optimization, and use calc(var(--spacing) * 0) again, but this is a bit silly since it only makes your CSS file larger.

We could try to be smart, and only do it if we're assigning to a CSS variable (which #20317 is doing). But if your CSS variable does use a <length> then it's a non-issue. We would run into the same issue if you use width: calc(100% --spacing(0)). This value is a bit silly anyway, but it would originally resolve to calc(100% + calc(var(--spacing) * 0)), the optimization of calc(100% - 0) would make it invalid, so the fix in #20317 would not be enough.

Instead I opted for an inbetween solution, by always using 0px. In most cases we can use 0, but in the places we can't the 0px would at least ensure that we are dealing with <length> data types.

This way we don't have to try to be smart to analyze where we use the value, and 0px is still better than the long calc(var(--spacing) * 0) value.

Fixes: #20315
Closes: #20317

Test plan

1. Manually tested that now --spacing(0) does produce 0px which has a length type

[greptile-apps]

Confidence Score: 5/5

Safe to merge — single targeted fix with no side-effects on typed properties, all snapshot tests updated correctly.

The fix is a one-line change that correctly resolves the <length> vs <number> type confusion in CSS custom properties. No regressions are introduced because 0px and 0 are equivalent wherever a <length> is accepted.

No files require special attention.

_{Reviews (2): Last reviewed commit: "update changelog" | Re-trigger Greptile}

[coderabbitai]

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: 534e86d6-ab17-48b6-850a-b453aa6f0c11

📥 Commits

Reviewing files that changed from the base of the PR and between eb54968 and d9ed231.

📒 Files selected for processing (1)

• CHANGELOG.md

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

• CHANGELOG.md

---

Walkthrough

This change updates the spacing(...) optimization to emit 0px for zero-valued dimensions, and adjusts related snapshots accordingly. The css-functions test suite now uses a local pretty-formatted compile helper, and its snapshots reflect the updated spacing serialization. Mask gradient position snapshots in utilities.test.ts were also changed from 0 to 0px across directional, combined, linear, radial, and conic cases.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: optimizing --spacing(0) to preserve a <length> value.
Description check	✅ Passed	The description is directly related to the fix and explains the --spacing(0) type issue in detail.
Linked Issues check	✅ Passed	The code and test changes match the linked issues by emitting 0px for zero spacing to preserve length typing.
Out of Scope Changes check	✅ Passed	The remaining edits are supporting test and changelog updates for the spacing fix, with no clear unrelated scope.

---

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

[coderabbitai]

🧹 Nitpick comments (1)

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

110-117: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Local helper shadows imported compileCss.

The local compileCss here shadows the compileCss imported from ./test-utils/run at line 6, only within this describe block. Works correctly, but the identical naming makes it easy to lose track of which implementation is active when reading/editing this suite later.

♻️ Suggested rename

-    async function compileCss(css: string, options: Parameters<typeof compile>[1] = {}) {
+    async function compileCssWithoutLightning(css: string, options: Parameters<typeof compile>[1] = {}) {
       let { build } = await compile(css, options)
       return pretty(build([]))
     }

And update call sites within this block accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fe18e76a-a653-4c6f-b264-2e2e0cf9e992

📥 Commits

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

📒 Files selected for processing (3)

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