Skip to content

feat: add native filter utilities - #12

Draft
e-simpson wants to merge 4 commits into
mgcrea:mainfrom
e-simpson:codex/brightness-filter
Draft

feat: add native filter utilities#12
e-simpson wants to merge 4 commits into
mgcrea:mainfrom
e-simpson:codex/brightness-filter

Conversation

@e-simpson

@e-simpson e-simpson commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds composable Tailwind-compatible utilities for every React Native filter with a safe native mapping: brightness, blur, contrast, grayscale, hue rotation, invert, saturate, sepia, drop shadow, and filter-none.

Changes

  • Adds percentage, full-effect, preset, negative-angle, and arbitrary forms for the supported filter families.
  • Adds Tailwind blur and drop-shadow scales plus structured arbitrary native shadows such as drop-shadow-[0_4px_4px_#00000080].
  • Composes distinct native filter functions and keeps last-wins behavior for duplicate functions.
  • Emits composed filters in Tailwind's canonical order: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, then drop-shadow.
  • Makes filter-none win regardless of class-string order, matching Tailwind's generated CSS.

The canonical order is intentional: CSS filter functions and React Native filter arrays are sequential, so changing their order can change rendering. Tailwind's CSS-variable composition provides one stable order independent of markup ordering, and this PR preserves that contract natively.

Native boundaries

  • Brightness works on iOS and Android.
  • Blur, contrast, drop shadow, grayscale, hue rotation, invert, saturate, and sepia are currently Android-only in React Native.
  • Filters require native filter support and imply clipping through overflow: hidden.
  • The existing opacity-* utility remains the native opacity style property.
  • Standalone drop-shadow-{color} is not emitted because React Native requires a complete structured dropShadow object. Structured arbitrary shadows can include preset or custom colors.

Example

<View className="drop-shadow-md sepia hue-rotate-45 brightness-110 blur-sm" />

// filter: [
//   { blur: 8 },
//   { brightness: 1.1 },
//   { hueRotate: "45deg" },
//   { sepia: 1 },
//   { dropShadow: { ... } },
// ]

Validation

  • bun run spec -- src/parser/filters.test.ts src/utils/mergeStyles.test.ts — 39 passed
  • bun run check
  • bun run lint
  • bun run format:check

@e-simpson e-simpson changed the title feat: add brightness filter utilities feat: add native filter utilities Jul 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant