feat: support drop-shadow filter function

[feri-irawan]

Summary

Add support for drop-shadow filter utilities in React Native. Previously, the drop-shadow function in the CSS processor returned undefined, causing all drop-shadow-* classes to be silently ignored on native.

This PR adds a processDropShadow handler that compiles Tailwind CSS v4's drop-shadow() filter function into React Native compatible filter strings.

Discussion: #644

Changes

packages/uniwind/src/bundler/css-processor/functions.ts

• Route drop-shadow function calls to the new processDropShadow method instead of returning undefined.
• Add processDropShadow private method that:
  • Filters out white-space tokens from the LightningCSS AST to prevent double-spacing.
  • Maps each argument through processValue and wraps appropriately for JS template expression.
  • Produces output like "drop-shadow(" + (0) + " " + (3) + " " + (3) + " " + "#0000001f" + ")".

packages/uniwind/tests/native/styles-parsing/filters.test.tsx

• Add comprehensive Drop shadow test block with 9 assertions covering:
  • All preset sizes (drop-shadow-sm, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl)
  • drop-shadow-none
  • Arbitrary values (drop-shadow-[0_10px_8px_rgba(0,0,0,0.5)])
  • Combined filters (drop-shadow-md blur-md)
  • Color modifiers (drop-shadow-md drop-shadow-red-500)

Supported Utilities

Class	Output
drop-shadow-sm	drop-shadow(0 1 2 #00000026)
drop-shadow-md	drop-shadow(0 3 3 #0000001f)
drop-shadow-lg	drop-shadow(0 4 4 #00000026)
drop-shadow-xl	drop-shadow(0 9 7 #0000001a)
drop-shadow-2xl	drop-shadow(0 25 25 #00000026)
drop-shadow-none	(empty — no filter)
drop-shadow-[0_10px_8px_rgba(0,0,0,0.5)]	drop-shadow(0 10 8 #00000080)
blur-md drop-shadow-md	blur(12px) drop-shadow(0 3 3 #0000001f)
drop-shadow-md drop-shadow-red-500	drop-shadow(0 3 3 #fb2c36ff)

Verification

All CI-equivalent checks pass locally:

• ✅ bun run build
• ✅ bun run check:typescript
• ✅ bun run check:typescript:test
• ✅ bun run lint
• ✅ bun run check:format
• ✅ bun run circular:check
• ✅ bun run test:native (147 tests passed)
• ✅ bun run test:web (26 tests passed)
• ✅ bun run test:types
• ✅ bun run test:e2e (9 tests passed)

Summary by CodeRabbit

• Bug Fixes

  • Fixed drop-shadow styles so they render correctly in React Native.
  • Preserved spacing, quoted values, custom shadow definitions, and color combinations.
  • Ensured drop-shadow utilities work alongside blur filters and support the “none” option.

• Tests

  • Added coverage for standard shadow sizes, custom values, blur combinations, colored shadows, and disabled shadows.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9556f330-e608-47c5-8a1f-0ea09f5fc4f1

📥 Commits

Reviewing files that changed from the base of the PR and between 0f8bdcd and f48972c.

📒 Files selected for processing (2)

• packages/uniwind/src/bundler/css-processor/functions.ts
• packages/uniwind/tests/native/styles-parsing/filters.test.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The CSS processor now converts drop-shadow functions into React Native filter expressions. Native filter tests cover named sizes, arbitrary values, disabled shadows, combined filters, and colored shadows.

Changes

Drop-shadow processing

Layer / File(s)	Summary
Drop-shadow runtime processing and validation packages/uniwind/src/bundler/css-processor/functions.ts, packages/uniwind/tests/native/styles-parsing/filters.test.tsx	drop-shadow arguments are processed, grouped, and joined into reconstructed filter expressions. Tests cover named sizes, arbitrary values, none, blur combinations, and colored shadows.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk:⚪ Minimal · up to f4897

This adds native support for drop-shadow filter utilities with coverage for preset, arbitrary, combined, and color-modified values; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers:jpudysz, brentlok

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding support for the drop-shadow filter function.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[greptile-apps]

Greptile Summary

Adds native compilation support for Tailwind CSS drop-shadow() filters.

• Routes drop-shadow functions through a dedicated processor that removes whitespace tokens and constructs the React Native filter string.
• Adds native parsing coverage for presets, arbitrary values, composition, disabling, and color modifiers.

Confidence Score: 5/5

The PR appears safe to merge with no concrete blocking or non-blocking issues identified.

The new processor preserves the tested drop-shadow arguments, composes correctly with other filters, and has coverage for the principal preset, arbitrary-value, disabled, and color-modified paths.

Important Files Changed

Filename	Overview
packages/uniwind/src/bundler/css-processor/functions.ts	Adds drop-shadow argument processing and generated filter-expression construction; no actionable defect was established.
packages/uniwind/tests/native/styles-parsing/filters.test.tsx	Adds broad native drop-shadow parsing assertions for supported utility forms.

_{Reviews (1): Last reviewed commit: "feat: support drop-shadow filter functio..." | Re-trigger Greptile}