Handle CSS math functions in shadow lengths

[yudin-s]

Summary

Fixes shadow color replacement so CSS math functions like calc(), min(), max(), and clamp() are treated as shadow lengths instead of being mistaken for colors. This keeps custom drop-shadow values such as 0 0 calc(1 * var(--spacing)) black intact when combined with drop-shadow color utilities.

Fixes #20065

Test plan

• pnpm exec prettier --check packages/tailwindcss/src/utils/replace-shadow-colors.ts packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
• pnpm exec vitest run packages/tailwindcss/src/utils/replace-shadow-colors.test.ts --hideSkippedTests
• pnpm exec vitest run packages/tailwindcss/src/utilities.test.ts --hideSkippedTests -t '^filter$'

[greptile-apps]

Confidence Score: 5/5

Safe to merge — the change is a targeted regex fix with tests that cover all four newly-supported math functions and the stateful regex footgun is cleanly removed.

The diff is small and self-contained: the new regex correctly matches the four CSS math-function prefixes without introducing false positives for color tokens, the stateful g-flag and its manual lastIndex reset are both gone, and the paren-aware segment utility guarantees that expressions like calc(1 * var(--spacing)) arrive as single tokens for the regex to evaluate. All four functions now have inline snapshot tests.

No files require special attention.

_{Reviews (2): Last reviewed commit: "test: cover css math shadow lengths" | 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: 7423dd92-2d37-4195-9f68-bfb944bfef47

📥 Commits

Reviewing files that changed from the base of the PR and between 76cf176 and e62443a.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

Walkthrough

This PR refactors the shadow color replacement utility by simplifying the LENGTH regex pattern from a stateful global form to a non-global pattern that matches entire tokens. The corresponding parsing loop no longer resets LENGTH.lastIndex since the regex is no longer stateful. A new test case verifies that CSS math functions like calc(1 * var(--spacing)) are correctly preserved as length values while shadow colors are substituted.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Handle CSS math functions in shadow lengths' directly and concisely describes the main change, matching the core objective of fixing CSS math function handling in shadow parsing.
Description check	✅ Passed	The description is directly related to the changeset, explaining the fix for CSS math functions in shadows and referencing the specific issue being addressed.
Linked Issues check	✅ Passed	The PR successfully addresses issue #20065 by fixing the LENGTH regex pattern to properly recognize CSS math functions (calc, min, max, clamp) as shadow lengths rather than colors, preserving custom drop-shadow values.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the shadow color replacement issue; modifications to the LENGTH regex and accompanying test are focused on the stated objective with no extraneous alterations.

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

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

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

43-48: ⚡ Quick win

Expand coverage to min(), max(), and clamp() too.

This test locks calc(...), but the regex now explicitly handles four math functions. A small parameterized test here would guard all supported branches.

🧪 Suggested update

-  it('should handle CSS math functions as lengths', () => {
-    let parsed = replaceShadowColors('0 0 calc(1 * var(--spacing)) black', replacer)
-    expect(parsed).toMatchInlineSnapshot(
-      `"0 0 calc(1 * var(--spacing)) var(--tw-shadow-color, black)"`,
-    )
-  })
+  it.each([
+    'calc(1 * var(--spacing))',
+    'min(1px, 2px)',
+    'max(1px, 2px)',
+    'clamp(1px, 2px, 3px)',
+  ])('should handle CSS math function lengths: %s', (length) => {
+    let parsed = replaceShadowColors(`0 0 ${length} black`, replacer)
+    expect(parsed).toBe(`0 0 ${length} var(--tw-shadow-color, black)`)
+  })

🤖 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 43
- 48, Update the existing test for math functions in replaceShadowColors: change
the single-case "should handle CSS math functions as lengths" to a parameterized
loop over ['calc', 'min', 'max', 'clamp'] and for each call replaceShadowColors
with a string like `0 0 ${fn}(1 * var(--spacing)) black` (using the same
replacer) and assert the parsed result matches the expected shadow color
replacement (`var(--tw-shadow-color, black)`); ensure the test still uses the
same helper symbols replaceShadowColors and replacer and keeps the same
assertion style (e.g., toMatchInlineSnapshot or equivalent) for each function.

🤖 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 43-48: Update the existing test for math functions in
replaceShadowColors: change the single-case "should handle CSS math functions as
lengths" to a parameterized loop over ['calc', 'min', 'max', 'clamp'] and for
each call replaceShadowColors with a string like `0 0 ${fn}(1 * var(--spacing))
black` (using the same replacer) and assert the parsed result matches the
expected shadow color replacement (`var(--tw-shadow-color, black)`); ensure the
test still uses the same helper symbols replaceShadowColors and replacer and
keeps the same assertion style (e.g., toMatchInlineSnapshot or equivalent) for
each function.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 86bdb689-2e1e-4250-8a25-8e8c0e09be3b

📥 Commits

Reviewing files that changed from the base of the PR and between 36417cb and 76cf176.

📒 Files selected for processing (2)

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

[RobinMalfait]

Hey! Thanks for the PR, there are a few more cases that need to be handled and instead of using regexes I used a proper parser instead to handle those cases. #20080