Improve parsing of shadow values

[RobinMalfait]

This PR fixes an issue where a calc(…) value used in a shadow value was incorrectly marked as the color of that shadow.

We have this feature where we can have colored shadows, this requires us to replace the color in a value with a var(--tw-shadow-color, <original-value-here>) such that we can swap out the color.
For this, we have to parse the value and figure out what the color part.

This PR uses the ValueParser to parse values, then figure out what the color part is. The biggest reason for this is that we know what a "function" is and what a normal "word" is, which allows us to do more fine-grained checks on a per-type basis.
We tracked a few more functions that we know produce color values, and a few cases that we know produce length values so therefore can't be the color.

Some examples:

• calc(…), min(…), max(…), clamp(…), --spacing(…) — these all produce length-values.
• color(…), color-mix(…), rgba?(…), --alpha(…) … — these all produce color values.

Notice that we added --spacing(…) and --alpha(…) as well, these are custom functions that Tailwind CSS provides, but we know what it will eventually map to internally.

Last but not least, we also detect named colors and hex-based colors.

Fixes: #20065
Closes: #20074

Test plan

1. Added an integration test, before the fix the test would've looked lik this:

  .drop-shadow-calc {
-   --tw-drop-shadow-size: drop-shadow(0 0 calc(1 * var(--spacing)) var(--tw-drop-shadow-color, black));
+   --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, calc(1 * var(--spacing))) black);
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-calc));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

2. Added more tests related to the shadow replacement logic itself where we try to infer the color (or the length-values for x, y, blur, spread)
3. All other existing tests pass

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

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: 1c96f40b-192b-4b94-a7e0-5db0aebc87f3

📥 Commits

Reviewing files that changed from the base of the PR and between c10f3b3 and 01a6695.

📒 Files selected for processing (1)

• CHANGELOG.md

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

• CHANGELOG.md

---

Walkthrough

This PR refactors shadow color replacement from string/regex parsing to an AST-driven approach using ValueParser and tree walking for more reliable color detection. A new isNamedColor helper classifies color tokens. The refactored replaceShadowColors function parses each shadow by comma, walks AST nodes to identify keywords, lengths, and colors, replaces definite colors via callback, handles fallback to currentcolor when no color is detected, and resolves ambiguous unknowns by targeted single-node replacement. Comprehensive parameterized tests validate the new logic across offset permutations and var(...) segments. A new drop-shadow-calc utility is added to the test output, defining computed CSS variables and a corresponding utility class.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Improve parsing of shadow values' clearly and concisely summarizes the main change in the pull request, which is replacing string-based shadow parsing with AST-driven parsing using ValueParser.
Description check	✅ Passed	The description comprehensively explains the issue, the solution using ValueParser to identify color tokens, function categorization, and includes test plans demonstrating the fix.
Linked Issues check	✅ Passed	The PR fully addresses the requirements from #20065 and #20074: it correctly parses calc(...) as a length value rather than a color in shadow expressions, handles CSS math functions and custom Tailwind functions, includes an integration test for drop-shadow-calc, and adds comprehensive shadow replacement tests.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing shadow value parsing: the main fix in replace-shadow-colors.ts, supporting utility test additions, helper function isNamedColor for color detection, and changelog entry documenting the fix.

_{✏️ 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]

🧹 Nitpick comments (1)

packages/tailwindcss/src/utils/replace-shadow-colors.test.ts (1)

44-95: ⚡ Quick win

Add one mixed-case regression case.

This change relies on case-insensitive detection, but the new table only exercises lowercase inputs. A single BlAcK or RGB(...) case here would lock that contract in.

🤖 Prompt for 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.

In `@packages/tailwindcss/src/utils/replace-shadow-colors.test.ts` around lines 44
- 95, The tests only exercise lowercase color inputs but replaceShadowColors
must be case-insensitive; add a mixed-case color variant (e.g., "BlAcK" and/or
"RgB(0, 0, 0)" or "RGB(0,0,0)" ) to the color lists used in the cartesian loop
and the it.each array so the test suite verifies mixed-case detection; update
the color entries in the test cases that build inputs for replaceShadowColors
(referencing replaceShadowColors and the test blocks that iterate over the color
arrays) to include one mixed-case example.

🤖 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.

Nitpick comments:
In `@packages/tailwindcss/src/utils/replace-shadow-colors.test.ts`:
- Around line 44-95: The tests only exercise lowercase color inputs but
replaceShadowColors must be case-insensitive; add a mixed-case color variant
(e.g., "BlAcK" and/or "RgB(0, 0, 0)" or "RGB(0,0,0)" ) to the color lists used
in the cartesian loop and the it.each array so the test suite verifies
mixed-case detection; update the color entries in the test cases that build
inputs for replaceShadowColors (referencing replaceShadowColors and the test
blocks that iterate over the color arrays) to include one mixed-case example.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 25b011b0-1438-402b-af38-68aaef5fc9de

📥 Commits

Reviewing files that changed from the base of the PR and between 36417cb and 787dc82.

📒 Files selected for processing (4)

• packages/tailwindcss/src/utilities.test.ts
• packages/tailwindcss/src/utils/is-color.ts
• packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
• packages/tailwindcss/src/utils/replace-shadow-colors.ts

[greptile-apps]

Confidence Score: 5/5

Safe to merge — the change is well-scoped, the new classification logic is exhaustively tested, and the fallback behaviour (returning the shadow unchanged when ambiguous) is conservative and correct.

The logic is straightforward and the three-state model (definite color → replace immediately; lengths ≥ 2, unknowns = 0 → append currentcolor; unknowns = 1 → treat the sole unknown as the color; otherwise → leave unchanged) matches the full test matrix added by this PR. The removal of the stateful /g flag on the LENGTH regex also fixes a latent correctness issue. No code paths produce unexpected output.

No files require special attention.

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