feat: add inset shadow parsing support

[YevheniiKotyrlo]

Problem

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

1. Inset shadows — The box-shadow shorthand handler doesn't recognize the inset keyword, so shadows arriving through CSS variables at runtime fail to parse. (Fixed here)
2. Missing @property defaults — Tailwind v4's @property declarations aren't parsed, so variables like --tw-ring-shadow have no initial values. (Fixed in feat: add CSS @property rule support #284, stacked on this PR)

This is PR 1/2. PR #284 builds directly on this branch.

Changes

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

• Implemented inset field descriptor with literal string matching
• Added 4 inset shorthand patterns: with/without spread, with/without color, color-first
• Added normalizeInsetValue() to convert string "inset" to boolean true for React Native's boxShadow prop

src/__tests__/native/box-shadow.test.tsx

• 4 compile-time tests: basic inset, color-first, inherited color, mixed inset+regular
• 2 runtime tests: inset via CSS variable, inset via CSS variable without explicit spread
• 1 CSS variable resolution test with strict assertions

Review notes

• Per review feedback, all Tailwind-specific root variable defaults were removed from this PR — those are handled generically via @property support in feat: add CSS @property rule support #284
• All tests use toStrictEqual with exact expected values
• Two files changed, +192/−3 lines

[danstepanov]

Thanks for the contribution. The inset shadow parsing is solid. I have concerns about one part though.

1. Inset shadow parsing (box-shadow.ts) looks good. The new shorthand patterns and normalizeInsetValue correctly handle inset shadows coming through CSS variables at runtime. Statically-written inset shadows are already handled at compile time by lightningcss and the compiler, so this specifically covers the runtime/variable path, which is what matters for Tailwind's generated output. Minor gap: [inset, offsetX, offsetY, blurRadius, color] isn't covered, though Tailwind doesn't generate that pattern so not a blocker.

2. Root variable defaults (root.ts) needs to move. Hardcoding --tw-shadow, --tw-inset-shadow, --tw-ring-shadow, etc. in react-native-css couples the generic CSS engine to Tailwind's internal variable names. react-native-css is framework-agnostic and shouldn't have knowledge of Tailwind-specific variables. These defaults belong in nativewind (e.g., in nativewind/theme.css as :root variable declarations). That keeps the separation clean. The architectural intention of v5 is that Nativewind adapts Tailwind for RN while react-native-css handles generic CSS.

Also, rootVariables("tw-shadow-color").set([["initial"]]) seems problematic. What does "initial" resolve to at runtime? It's not a value react-native-css knows how to interpret.

3. The inset shadow tests are good. The "Tailwind v4 shadow variables" test should assert more than .toBeDefined(). Since #0000 shadows get filtered by omitTransparentShadows, the test should verify what the resulting array actually contains.

TLDR: Could you split this into two PRs? The inset shadow changes to box-shadow.ts and tests are ready to merge. The root variable defaults need to move to nativewind.

[YevheniiKotyrlo]

Thanks for the review.

Addressed all three points:

1. Root variable defaults removed — the root.ts changes have been removed from this PR. Instead of hardcoding Tailwind-specific defaults, I've implemented generic CSS @property support in feat: add CSS @property rule support #284. This parses @property rules with initial-value and stores them as root variables (vr), keeping react-native-css framework-agnostic.

2. -moz-orient hack removed — since @property handles defaults natively, the @supports fallback is no longer needed. Removed in feat: add CSS @property rule support #284.

3. Tests strengthened — feat: add CSS @property rule support #284 includes tests with exact value assertions (toStrictEqual) instead of .toBeDefined(). Also added a separate nativewind PR (test: add shadow and ring utility validation tests nativewind#1717) with end-to-end shadow/ring validation tests covering shadow-sm, shadow-md, shadow-lg, ring-2, ring-0, and shadow-sm ring-2 composition.

This PR (inset shadow parsing) is ready for re-review — it now only contains the box-shadow.ts shorthand patterns and normalizeInsetValue, plus the inset-specific tests.

[YevheniiKotyrlo]

@danstepanov Just checking in — this PR now only contains the box-shadow.ts inset shorthand patterns and normalizeInsetValue, plus the inset-specific tests. All the root variable/Tailwind-specific changes have been moved to #284 (CSS @property support) as requested.

The minor gap you noted ([inset, offsetX, offsetY, blurRadius, color]) has also been added.

Ready for re-review whenever you get a chance.

[danstepanov]

hey @YevheniiKotyrlo thanks for updating, i'll review this again in the coming days, i'm focused on knocking out some issues in Nativewind v4 atm

[YevheniiKotyrlo]

Hi @danstepanov, hope the NativeWind v4 work is going well! No rush at all — just wanted to let you know this one is rebased on latest main and ready whenever you have a moment.

Since my last comment I've also opened two more PRs on this repo that might be worth looking at together:

• feat: add CSS @property rule support #284 — generic @property rule parsing (the approach you suggested instead of hardcoding Tailwind defaults in root.ts)
• fix: prevent style={undefined} from destroying computed styles in non-[style] targets #291 — completes the deepMergeConfig fix from Feat/deep merge config optimizations #224 for non-["style"] targets like contentContainerStyle

Happy to walk through any of them if that would help. Thanks for maintaining this project!

[danstepanov]

Thanks @YevheniiKotyrlo reviewing this tomorrow

[YevheniiKotyrlo]

Sounds great! I've cleaned up the stack — #284 is now based on this branch's commit (2 stacked commits in #284, reviewable individually via the Commits tab). So reviewing this one first is the right order.

This PR is minimal: just box-shadow.ts inset patterns + tests. All your original feedback has been addressed.