feat: add inset shadow parsing support#277
feat: add inset shadow parsing support#277YevheniiKotyrlo wants to merge 1 commit intonativewind:mainfrom
Conversation
aee4d5d to
4cbd812
Compare
There was a problem hiding this comment.
Thanks for the contribution. The inset shadow parsing is solid. I have concerns about one part though.
-
Inset shadow parsing (
box-shadow.ts) looks good. The new shorthand patterns andnormalizeInsetValuecorrectly 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. -
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., innativewind/theme.cssas:rootvariable 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.
- The inset shadow tests are good. The "Tailwind v4 shadow variables" test should assert more than
.toBeDefined(). Since#0000shadows get filtered byomitTransparentShadows, 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.
4cbd812 to
aba4514
Compare
|
Thanks for the review. Addressed all three points:
This PR (inset shadow parsing) is ready for re-review — it now only contains the |
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.
aba4514 to
5f1cf77
Compare
Summary
Adds runtime pattern matching for CSS inset shadows arriving through CSS variables.
What this covers:
normalizeInsetValue()convertsinset: "inset"toinset: truefor React Native'sboxShadowpropWhat was removed per review:
--tw-shadow,--tw-inset-shadow, etc.) fromroot.ts— these couple the generic CSS engine to Tailwind internals and belong in nativewind/theme.css as:rootdeclarations instead. A separate PR will be opened against nativewind for this.Changes
src/native/styles/shorthands/box-shadow.tsinsetfield descriptor with literal string matchingnormalizeInsetValue()to convert string to boolean for React Nativesrc/__tests__/native/box-shadow.test.tsx.toBeDefined())src/native-internal/root.tsRelated