Skip to content

Comments

feat: add inset shadow parsing support#277

Open
YevheniiKotyrlo wants to merge 1 commit intonativewind:mainfrom
YevheniiKotyrlo:fix/tailwind-v4-shadow-support
Open

feat: add inset shadow parsing support#277
YevheniiKotyrlo wants to merge 1 commit intonativewind:mainfrom
YevheniiKotyrlo:fix/tailwind-v4-shadow-support

Conversation

@YevheniiKotyrlo
Copy link

@YevheniiKotyrlo YevheniiKotyrlo commented Jan 11, 2026

Summary

Adds runtime pattern matching for CSS inset shadows arriving through CSS variables.

What this covers:

  • Inset keyword recognition in the shorthand handler (4 patterns including the minor gap noted in review)
  • normalizeInsetValue() converts inset: "inset" to inset: true for React Native's boxShadow prop
  • 7 new tests covering compile-time path, runtime/variable path, and edge cases

What was removed per review:

  • Tailwind-specific root variable defaults (--tw-shadow, --tw-inset-shadow, etc.) from root.ts — these couple the generic CSS engine to Tailwind internals and belong in nativewind/theme.css as :root declarations instead. A separate PR will be opened against nativewind for this.

Changes

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

  • Uncommented and 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 to boolean for React Native

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 (replaces weak .toBeDefined())

src/native-internal/root.ts

  • Removed Tailwind-specific shadow variable defaults (moved to nativewind scope)

Related

@danstepanov danstepanov force-pushed the fix/tailwind-v4-shadow-support branch from aee4d5d to 4cbd812 Compare February 24, 2026 07:43
@danstepanov danstepanov self-requested a review February 24, 2026 07:51
Copy link
Member

@danstepanov danstepanov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

  1. 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 YevheniiKotyrlo force-pushed the fix/tailwind-v4-shadow-support branch from 4cbd812 to aba4514 Compare February 24, 2026 11:54
@YevheniiKotyrlo YevheniiKotyrlo changed the title feat: add Tailwind CSS v4 shadow support and inset shadows feat: add inset shadow parsing support Feb 24, 2026
@YevheniiKotyrlo
Copy link
Author

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 strengthenedfeat: 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.

Add runtime pattern matching for CSS inset shadows through variables.
The shorthand handler now recognizes the inset keyword at the start of
shadow values and normalizeInsetValue converts inset: "inset" to
inset: true as React Native's boxShadow expects.

Removed Tailwind-specific root variable defaults (--tw-shadow, etc.)
per review - these belong in nativewind/theme.css, not the generic
CSS engine.
@YevheniiKotyrlo YevheniiKotyrlo force-pushed the fix/tailwind-v4-shadow-support branch from aba4514 to 5f1cf77 Compare February 24, 2026 16:17
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