feat: add inset shadow parsing support

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.

Author: YevheniiKotyrlo

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

@@ -93,3 +93,169 @@ test("shadow values - multiple nested variables", () => {
     ],
   });
 });
+
+test("inset shadow - basic", () => {
+  registerCSS(`
+    .test { box-shadow: inset 0 2px 4px 0 #000; }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        inset: true,
+        offsetX: 0,
+        offsetY: 2,
+        blurRadius: 4,
+        spreadDistance: 0,
+        color: "#000",
+      },
+    ],
+  });
+});
+
+test("inset shadow - with color first", () => {
+  registerCSS(`
+    .test { box-shadow: inset #fb2c36 0 0 24px 0; }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        inset: true,
+        color: "#fb2c36",
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 24,
+        spreadDistance: 0,
+      },
+    ],
+  });
+});
+
+test("inset shadow - without color inherits default", () => {
+  registerCSS(`
+    .test { box-shadow: inset 0 0 10px 5px; }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  // Shadows without explicit color inherit the default text color (__rn-css-color)
+  expect(component.props.style.boxShadow).toHaveLength(1);
+  expect(component.props.style.boxShadow[0]).toMatchObject({
+    inset: true,
+    offsetX: 0,
+    offsetY: 0,
+    blurRadius: 10,
+    spreadDistance: 5,
+  });
+  // Color is inherited from platform default (PlatformColor)
+  expect(component.props.style.boxShadow[0].color).toBeDefined();
+});
+
+test("mixed inset and regular shadows", () => {
+  registerCSS(`
+    .test { box-shadow: 0 4px 6px -1px #000, inset 0 2px 4px 0 #fff; }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 4,
+        blurRadius: 6,
+        spreadDistance: -1,
+        color: "#000",
+      },
+      {
+        inset: true,
+        offsetX: 0,
+        offsetY: 2,
+        blurRadius: 4,
+        spreadDistance: 0,
+        color: "#fff",
+      },
+    ],
+  });
+});
+
+test("inset shadow via CSS variable", () => {
+  registerCSS(`
+    :root { --my-shadow: inset 0 2px 4px 0 #000; }
+    .test { box-shadow: var(--my-shadow); }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        inset: true,
+        offsetX: 0,
+        offsetY: 2,
+        blurRadius: 4,
+        spreadDistance: 0,
+        color: "#000",
+      },
+    ],
+  });
+});
+
+test("inset shadow via CSS variable - blur and color without spread", () => {
+  // CSS parser normalizes omitted spread to 0, so this exercises the
+  // [inset, offsetX, offsetY, blurRadius, spreadDistance, color] pattern
+  registerCSS(`
+    :root { --my-shadow: inset 0 2px 4px #000; }
+    .test { box-shadow: var(--my-shadow); }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        inset: true,
+        offsetX: 0,
+        offsetY: 2,
+        blurRadius: 4,
+        spreadDistance: 0,
+        color: "#000",
+      },
+    ],
+  });
+});
+
+test("shadow values from CSS variable are resolved", () => {
+  registerCSS(`
+    :root {
+      --my-shadow: 0 0 0 0 #0000;
+    }
+    .test { box-shadow: var(--my-shadow); }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 0,
+        color: "#0000",
+      },
+    ],
+  });
+});

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

@@ -9,16 +9,23 @@ const offsetX = ["offsetX", "number"] as const;
 const offsetY = ["offsetY", "number"] as const;
 const blurRadius = ["blurRadius", "number"] as const;
 const spreadDistance = ["spreadDistance", "number"] as const;
-// const inset = ["inset", "string"] as const;
+// Match the literal string "inset" - the array type checks if value is in array
+const inset = ["inset", ["inset"]] as const;
 
 const handler = shorthandHandler(
   [
+    // Standard patterns (without inset)
     [offsetX, offsetY, blurRadius, spreadDistance],
     [offsetX, offsetY, blurRadius, spreadDistance, color],
     [color, offsetX, offsetY],
     [color, offsetX, offsetY, blurRadius, spreadDistance],
     [offsetX, offsetY, color],
     [offsetX, offsetY, blurRadius, color],
+    // Inset patterns - "inset" keyword at the beginning
+    [inset, offsetX, offsetY, blurRadius, spreadDistance],
+    [inset, offsetX, offsetY, blurRadius, spreadDistance, color],
+    [inset, offsetX, offsetY, blurRadius, color],
+    [inset, color, offsetX, offsetY, blurRadius, spreadDistance],
   ],
   [],
   "object",
@@ -41,8 +48,10 @@ export const boxShadow: StyleFunctionResolver = (
         if (shadows === undefined) {
           return;
         } else {
-          return omitTransparentShadows(
-            handler(resolveValue, shadows, get, options),
+          return normalizeInsetValue(
+            omitTransparentShadows(
+              handler(resolveValue, shadows, get, options),
+            ),
           );
         }
       })
@@ -69,3 +78,17 @@ function omitTransparentShadows(style: unknown) {
 
   return style;
 }
+
+/**
+ * Convert inset: "inset" to inset: true for React Native boxShadow.
+ *
+ * The shorthand handler matches the literal "inset" string and assigns it as the value.
+ * React Native's boxShadow expects inset to be a boolean.
+ */
+function normalizeInsetValue(style: unknown) {
+  if (typeof style === "object" && style && "inset" in style) {
+    return { ...style, inset: true };
+  }
+
+  return style;
+}