Skip to content

feat: add CSS @property rule support#284

Open
YevheniiKotyrlo wants to merge 2 commits intonativewind:mainfrom
YevheniiKotyrlo:feat/css-property-support
Open

feat: add CSS @property rule support#284
YevheniiKotyrlo wants to merge 2 commits intonativewind:mainfrom
YevheniiKotyrlo:feat/css-property-support

Conversation

@YevheniiKotyrlo
Copy link
Contributor

@YevheniiKotyrlo YevheniiKotyrlo commented Feb 24, 2026

Problem

Tailwind CSS v4 shadow and ring utilities don't work on React Native. Two root causes:

  1. Inset shadows(Fixed in feat: add inset shadow parsing support #277)
  2. Missing @property defaults — Tailwind v4 uses ~53 @property declarations to register custom property initial values (e.g., --tw-shadow, --tw-ring-shadow). Without parsing these, ring utilities produce boxShadow: []. (Fixed here)

Stacking

This branch is based on #277 (2 commits total). Please review and merge #277 first — once it lands, this PR's diff will auto-reduce to just the @property changes. Until then, the diff includes both PRs.

Individual commits:

What this replaces

Previously, react-native-css faked -moz-orient support to trigger Tailwind's @supports fallback path. This fallback injected universal variable defaults which interfered with class-level overrides. The @property approach is generic and framework-agnostic — this is the direction suggested during the #277 review.

Changes (this PR only)

src/compiler/compiler.ts

Parse @property rules, extract initial-value into root variables via extractPropertyRule / parsePropertyInitialValue. Handles length, number, percentage, color, angle, token-list, custom-ident, and repeated component types.

src/compiler/stylesheet.ts

Add addRootVariable() public method following the existing variable storage pattern.

src/compiler/supports.ts

Remove the -moz-orient hack (no longer needed).

src/native/styles/shorthands/_handler.ts

Allow StyleFunction values (calc, var) to pass type checks in the shorthand handler. These are unresolved at pattern-match time but resolve to the correct type at runtime.

src/native/styles/shorthands/box-shadow.ts

Fix color type from "string" to "color" to accept platform color objects (e.g., PlatformColor from currentcolor resolution).

Tests

  • 10 compiler tests for @property parsing
  • 2 runtime tests for box-shadow @Property defaults and currentcolor matching

@danstepanov
Copy link
Member

@YevheniiKotyrlo mind rebasing this with main?

@YevheniiKotyrlo YevheniiKotyrlo force-pushed the feat/css-property-support branch from d83cc3e to 64a2be8 Compare March 9, 2026 10:21
@YevheniiKotyrlo
Copy link
Contributor Author

Done — rebased on latest main. Stack is clean: commit 1 is #277 (inset parsing), commit 2 is this PR (@Property support). All quality gates pass.

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.

2 participants