react-native-css 0.0.0-nightly.d6f42ab → 0.0.0-nightly.df32ce3

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

@@ -4,21 +4,30 @@ import { isStyleDescriptorArray } from "react-native-css/utilities";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
 
-const color = ["color", "string"] as const;
+// "color" type accepts both strings ("#fff") and objects (PlatformColor from currentcolor).
+// Using "string" here would reject platform color objects and silently drop the shadow.
+const color = ["color", "color"] as const;
 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",
@@ -34,20 +43,32 @@ export const boxShadow: StyleFunctionResolver = (
 
   if (!isStyleDescriptorArray(args)) {
     return args;
-  } else {
-    return args
-      .flatMap(flattenShadowDescriptor)
-      .map((shadows) => {
-        if (shadows === undefined) {
-          return;
-        } else {
-          return omitTransparentShadows(
-            handler(resolveValue, shadows, get, options),
-          );
-        }
-      })
-      .filter((v) => v !== undefined);
   }
+
+  // A flat array of primitives (e.g. [0, 4, 6, -1, "#000"]) is a single shadow
+  // resolved from a runtime variable. Pass it directly to the pattern handler.
+  // A nested array (e.g. [[0, 4, 6, -1, "#000"], [...]]) is multiple shadows.
+  if (args.length > 0 && !Array.isArray(args[0])) {
+    const result = handler(resolveValue, args, get, options);
+    if (result === undefined) {
+      return [];
+    }
+    const filtered = omitTransparentShadows(result);
+    return filtered !== undefined ? [normalizeInsetValue(filtered)] : [];
+  }
+
+  return args
+    .flatMap(flattenShadowDescriptor)
+    .map((shadows) => {
+      if (shadows === undefined) {
+        return;
+      } else {
+        return normalizeInsetValue(
+          omitTransparentShadows(handler(resolveValue, shadows, get, options)),
+        );
+      }
+    })
+    .filter((v) => v !== undefined);
 };
 
 function flattenShadowDescriptor(arg: StyleDescriptor): StyleDescriptor[] {
@@ -69,3 +90,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;
+}

package/src/native/styles/shorthands/index.ts

@@ -1,5 +1,6 @@
 export * from "./animation";
 export * from "./border";
+export * from "./logical-border-width";
 export * from "./box-shadow";
 export * from "./text-shadow";
 export * from "./transform";

package/src/native/styles/shorthands/logical-border-width.ts

@@ -0,0 +1,32 @@
+import { ShortHandSymbol } from "../constants";
+import type { StyleFunctionResolver } from "../resolve";
+
+function logicalWidth(start: string, end: string): StyleFunctionResolver {
+  return (resolve, descriptor) => {
+    const resolved = resolve(descriptor[2]);
+    const values: unknown[] = Array.isArray(resolved) ? resolved : [resolved];
+    if (
+      values.length < 1 ||
+      values.length > 2 ||
+      !values.every(
+        (value) =>
+          typeof value === "number" && Number.isFinite(value) && value >= 0,
+      )
+    )
+      return;
+    return {
+      [ShortHandSymbol]: true,
+      [start]: values[0],
+      [end]: values[1] ?? values[0],
+    };
+  };
+}
+
+export const borderBlockWidth = logicalWidth(
+  "borderTopWidth",
+  "borderBottomWidth",
+);
+export const borderInlineWidth = logicalWidth(
+  "borderStartWidth",
+  "borderEndWidth",
+);

package/src/native/styles/variables.ts

@@ -18,7 +18,8 @@ export function varResolver(
     renderGuards,
     inheritedVariables: variables = { [VAR_SYMBOL]: true },
     inlineVariables,
-    variableHistory = new Set(),
+    variableHistory = (options.variableHistory ??= new Set()),
+    variableCycles = (options.variableCycles ??= new Set()),
   } = options;
 
   const args = fn[2];
@@ -29,11 +30,10 @@ export function varResolver(
   if (typeof args === "string") {
     name = args;
   } else {
-    const result = resolve(args);
-
-    if (isStyleDescriptorArray(result)) {
-      name = result[0] as string;
-      fallback = result[1];
+    // Fallbacks are substituted only when needed, after reading the variable.
+    if (isStyleDescriptorArray(args)) {
+      name = args[0] as string;
+      fallback = args[1];
     }
   }
 
@@ -41,48 +41,58 @@ export function varResolver(
     return;
   }
 
-  // If this recurses back to the same variable, we need to stop
+  if (variableCycles.has(name)) return resolve(fallback);
+
+  // Share the active resolution path with recursive calls. Mark only the
+  // actual cycle, so a dependent variable can still use its own fallback.
   if (variableHistory.has(name)) {
+    let inCycle = false;
+    for (const dependency of variableHistory) {
+      if (dependency === name) inCycle = true;
+      if (inCycle) variableCycles.add(dependency);
+    }
     return;
   }
 
-  if (name in variables) {
-    renderGuards?.push(["v", name, variables[name]]);
-    return resolve(variables[name]);
-  }
-
   variableHistory.add(name);
 
-  let value = resolve(inlineVariables?.[name] as StyleDescriptor);
-  if (value !== undefined) {
-    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
-    options.inlineVariables[name] = value;
+  try {
+    let value = resolve(inlineVariables?.[name] as StyleDescriptor);
+    if (variableCycles.has(name)) return resolve(fallback);
+    if (value !== undefined) {
+      options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+      options.inlineVariables[name] = value;
 
-    return value;
-  }
+      return value;
+    }
 
-  value = resolve(variables[name]);
-  if (value !== undefined) {
-    renderGuards?.push(["v", name, value]);
-    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
-    options.inlineVariables[name] = value;
+    // A universal selector declares the variable on this element. It has lower
+    // specificity than the element's class declarations, but beats inheritance.
+    value = resolve(get(universalVariables(name)));
+    if (variableCycles.has(name)) return resolve(fallback);
+    if (value !== undefined) {
+      options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+      options.inlineVariables[name] = value;
+      return value;
+    }
 
-    return value;
-  }
+    // Guards retain the ancestor's raw descriptor, matching the context value.
+    if (name in variables) {
+      renderGuards?.push(["v", name, variables[name]]);
+      value = resolve(variables[name]);
+      return variableCycles.has(name) ? resolve(fallback) : value;
+    }
 
-  value = resolve(get(universalVariables(name)));
-  if (value !== undefined) {
-    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
-    options.inlineVariables[name] = value;
-    return value;
-  }
+    value = resolve(get(rootVariables(name)));
+    if (variableCycles.has(name)) return resolve(fallback);
+    if (value !== undefined) {
+      options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+      options.inlineVariables[name] = value;
+      return value;
+    }
 
-  value = resolve(get(rootVariables(name)));
-  if (value !== undefined) {
-    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
-    options.inlineVariables[name] = value;
-    return value;
+    return resolve(fallback);
+  } finally {
+    variableHistory.delete(name);
   }
-
-  return resolve(fallback);
 }

package/src/native-internal/root.ts

@@ -29,16 +29,43 @@ const rootVariableFamily = () => {
   });
 };
 
-export const rootVariables = rootVariableFamily();
-export const universalVariables = rootVariableFamily();
-
-rootVariables("__rn-css-rem").set([[14]]);
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-rootVariables("__rn-css-color").set([
-  [
-    Platform.OS === "ios"
-      ? PlatformColor("label", "labelColor")
-      : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
-  ],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-] as any);
+interface RootVariableRegistries {
+  root: ReturnType<typeof rootVariableFamily>;
+  universal: ReturnType<typeof rootVariableFamily>;
+}
+
+declare global {
+  var __react_native_css_root_variable_registries:
+    | RootVariableRegistries
+    | undefined;
+}
+
+// Seeded with the registries, so a copy that loads after the stylesheet inject keeps the project's rem
+function createRootVariableRegistries(): RootVariableRegistries {
+  const registries: RootVariableRegistries = {
+    root: rootVariableFamily(),
+    universal: rootVariableFamily(),
+  };
+
+  registries.root("__rn-css-rem").set([[14]]);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  registries.root("__rn-css-color").set([
+    [
+      Platform.OS === "ios"
+        ? PlatformColor("label", "labelColor")
+        : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
+    ],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ] as any);
+
+  return registries;
+}
+
+// The exports map gives import and require different builds, and Metro resolves each per requesting module
+globalThis.__react_native_css_root_variable_registries ??=
+  createRootVariableRegistries();
+
+export const rootVariables =
+  globalThis.__react_native_css_root_variable_registries.root;
+export const universalVariables =
+  globalThis.__react_native_css_root_variable_registries.universal;

package/src/native-internal/style-collection.ts

@@ -91,7 +91,7 @@ globalThis.__react_native_css_style_collection ??= {
 
     if (options.vu) {
       for (const entry of options.vu) {
-        rootVariables(entry[0]).set(entry[1]);
+        universalVariables(entry[0]).set(entry[1]);
       }
     }
 

package/src/native-internal/variables.tsx

@@ -7,7 +7,11 @@ import {
 
 import type { StyleDescriptor } from "react-native-css/compiler";
 
-import { VAR_SYMBOL, type VariableContextValue } from "../native/reactivity";
+import {
+  toVariableRecord,
+  VAR_SYMBOL,
+  type VariableContextValue,
+} from "../native/reactivity";
 
 globalThis.__react_native_css_variable_context ??=
   createContext<VariableContextValue>({
@@ -24,9 +28,7 @@ export function VariableContextProvider(
   const value: VariableContextValue = useMemo(
     () => ({
       ...inheritedVariables,
-      ...Object.fromEntries(
-        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
-      ),
+      ...toVariableRecord(props.value),
       [VAR_SYMBOL]: true,
     }),
     [inheritedVariables, props.value],

package/src/runtime.types.ts

@@ -3,6 +3,7 @@ import type {
   ClassicComponentClass,
   ComponentClass,
   ComponentProps,
+  ComponentPropsWithRef,
   ComponentType,
   ForwardRefExoticComponent,
   FunctionComponent,
@@ -44,20 +45,24 @@ export type StyledProps<P, M extends StyledConfiguration<any>> = P & {
     : never]?: string;
 };
 
-export type Styled = <
-  const C extends ReactComponent,
-  const M extends StyledConfiguration<C>,
->(
-  component: C,
-  mapping: M & StyledConfiguration<C>,
-  options?: StyledOptions,
-) => StyledComponent<C, M>;
+export interface Styled {
+  <const C extends ReactComponent>(
+    component: C,
+    mapping?: undefined,
+    options?: StyledOptions,
+  ): ComponentType<ComponentPropsWithRef<C> & { className?: string }>;
+  <const C extends ReactComponent, const M extends StyledConfiguration<C>>(
+    component: C,
+    mapping: M & StyledConfiguration<C>,
+    options?: StyledOptions,
+  ): StyledComponent<C, M>;
+}
 
 type StyledComponent<
   C extends ReactComponent,
   M extends StyledConfiguration<C>,
 > = ComponentType<
-  ComponentProps<C> & {
+  ComponentPropsWithRef<C> & {
     [K in keyof M as K extends string
       ? M[K] extends undefined | false
         ? never
@@ -90,10 +95,7 @@ interface StyledConfigurationObject<
         ComponentProps<C>
       >;
   /** @deprecated Please use nativeStyleMapping */
-  nativeStyleToProp?: NativeStyleMapping<
-    ResolveDotPath<T, ComponentProps<C>>,
-    ComponentProps<C>
-  >;
+  nativeStyleToProp?: StyledConfigurationObject<C, T>["nativeStyleMapping"];
 }
 
 type NativeStyleMapping<T, S> = T extends object
@@ -145,6 +147,6 @@ export type RNStyle = ViewStyle & TextStyle & ImageStyle;
 /********************************    Globals    ********************************/
 
 export interface ColorScheme {
-  get: () => ColorSchemeName;
-  set: (value: ColorSchemeName) => void;
+  get: () => ColorSchemeName | null | undefined;
+  set: (value: ColorSchemeName | null | undefined) => void;
 }

package/src/utilities/dot-notation.types.ts

@@ -1,4 +1,6 @@
 /* eslint-disable */
+import type { Component, ReactElement } from "react";
+
 // ---------- Base Utilities ----------
 
 type Falsy = undefined | null | false | "";
@@ -32,14 +34,13 @@ export type StyleProp<T> =
 type UnwrapRecursiveArray<
   T,
   Depth extends unknown[] = [],
-  MaxDepth extends number = 10
+  MaxDepth extends number = 10,
 > = Depth["length"] extends MaxDepth
   ? T
   : T extends (infer I)[]
     ? UnwrapRecursiveArray<I, [...Depth, unknown], MaxDepth>
     : T;
 
-
 // Remove null, false, undefined, etc.
 type RemoveFalsy<T> = Exclude<T, Falsy>;
 
@@ -53,7 +54,7 @@ type ExtractStyleObject<T> = RemoveRegisteredStyle<
 
 // Check if something is a non-array plain object
 type IsPlainObject<T> = T extends object
-  ? T extends Function
+  ? T extends Function | Component | ReactElement
     ? false
     : T extends readonly any[]
       ? false

package/src/utilities/style-descriptor.ts

@@ -3,22 +3,17 @@ import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
 export function isStyleDescriptorArray(
   value: unknown,
 ): value is StyleDescriptor[] {
-  if (Array.isArray(value)) {
-    // If its an array and the first item is an object, the only allowed value is an array
-    return typeof value[0] === "object" ? Array.isArray(value[0]) : true;
-  }
-
-  return false;
+  return Array.isArray(value) && !isStyleFunction(value);
 }
 
-export function isStyleFunction(
-  value: StyleDescriptor,
-): value is StyleFunction {
-  if (Array.isArray(value)) {
-    return typeof value[0] === "object"
-      ? Object.keys(value[0]).length === 0
-      : false;
-  }
-
-  return false;
+export function isStyleFunction(value: unknown): value is StyleFunction {
+  if (!Array.isArray(value)) return false;
+  const marker: unknown = value[0];
+  return (
+    marker !== null &&
+    typeof marker === "object" &&
+    !Array.isArray(marker) &&
+    Object.keys(marker).length === 0 &&
+    typeof value[1] === "string"
+  );
 }

package/src/web/api.tsx

@@ -1,7 +1,6 @@
 import {
   createElement,
   useMemo,
-  type ComponentPropsWithRef,
   type ComponentType,
   type PropsWithChildren,
 } from "react";
@@ -12,26 +11,22 @@ import type {
   Props,
   StyledConfiguration,
   StyledOptions,
-  StyledProps,
 } from "react-native-css";
 
-import type { ReactComponent } from "../runtime.types";
+import type { ReactComponent, Styled } from "../runtime.types";
 import { assignStyle } from "./assign-style";
 
 const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
   className: "style",
 };
 
-export const styled = <
-  const C extends ReactComponent,
-  const M extends StyledConfiguration<C>,
->(
-  baseComponent: C,
-  mapping: M = defaultMapping as M,
+export const styled: Styled = (
+  baseComponent: ReactComponent,
+  mapping: StyledConfiguration<ReactComponent> = defaultMapping,
   _options?: StyledOptions,
 ) => {
-  return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
-    return useCssElement(baseComponent, mapping, props);
+  return (props: Props) => {
+    return useCssElement(baseComponent, props, mapping);
   };
 };
 
@@ -73,7 +68,7 @@ export const colorScheme: ColorScheme = {
     return Appearance.getColorScheme();
   },
   set(name) {
-    Appearance.setColorScheme(name);
+    Appearance.setColorScheme(name ?? "unspecified");
   },
 };
 

package/src/web/assign-style.ts

@@ -19,7 +19,8 @@ export function assignStyle(
     }
     return props;
   } else {
-    props[target] ??= {};
+    const existing = props[target];
+    props[target] = Array.isArray(existing) ? [...existing] : { ...existing };
     assignStyle(value, targets, props[target]);
     return props;
   }

package/types.d.ts

@@ -16,13 +16,15 @@ declare module "@react-native/virtualized-lists" {
 }
 
 declare module "react-native" {
+  interface ButtonProps {
+    className?: string;
+  }
   interface ScrollViewProps
     extends ViewProps,
       ScrollViewPropsIOS,
       ScrollViewPropsAndroid,
       Touchable {
     contentContainerClassName?: string;
-    indicatorClassName?: string;
   }
   interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
     columnWrapperClassName?: string;
@@ -32,39 +34,20 @@ declare module "react-native" {
   }
   interface ImagePropsBase {
     className?: string;
-    cssInterop?: boolean;
   }
   interface ViewProps {
     className?: string;
-    cssInterop?: boolean;
-  }
-  interface TextInputProps {
-    placeholderClassName?: string;
   }
   interface TextProps {
     className?: string;
-    cssInterop?: boolean;
   }
   interface SwitchProps {
     className?: string;
-    cssInterop?: boolean;
-  }
-  interface InputAccessoryViewProps {
-    className?: string;
-    cssInterop?: boolean;
   }
   interface TouchableWithoutFeedbackProps {
     className?: string;
-    cssInterop?: boolean;
-  }
-  interface StatusBarProps {
-    className?: string;
-    cssInterop?: boolean;
   }
   interface KeyboardAvoidingViewProps extends ViewProps {
     contentContainerClassName?: string;
   }
-  interface ModalBaseProps {
-    presentationClassName?: string;
-  }
 }

package/dist/commonjs/compiler/inheritance.test.js

@@ -1,78 +0,0 @@
-"use strict";
-
-var _index = require("../compiler/index.js");
-test("nested classes", () => {
-  const compiled = (0, _index.compile)(`
-.my-class .test {
-  color: red;
-}`);
-  expect(compiled.stylesheet()).toStrictEqual({
-    s: [["my-class", [{
-      c: ["g:my-class"],
-      s: [0]
-    }]], ["test", [{
-      cq: [{
-        n: "g:my-class"
-      }],
-      d: [{
-        color: "#f00"
-      }],
-      v: [["__rn-css-color", "#f00"]],
-      s: [1, 2]
-    }]]]
-  });
-});
-test("multiple tiers classes", () => {
-  const compiled = (0, _index.compile)(`
-.one .two .test {
-  color: red;
-}`);
-  expect(compiled.stylesheet()).toStrictEqual({
-    s: [["one", [{
-      c: ["g:one"],
-      s: [0]
-    }]], ["two", [{
-      c: ["g:two"],
-      s: [0]
-    }]], ["test", [{
-      cq: [{
-        n: "g:one"
-      }, {
-        n: "g:two"
-      }],
-      d: [{
-        color: "#f00"
-      }],
-      v: [["__rn-css-color", "#f00"]],
-      s: [1, 3]
-    }]]]
-  });
-});
-test("tiers with multiple classes", () => {
-  const compiled = (0, _index.compile)(`
-.one .two.three .test {
-  color: red;
-}`);
-  expect(compiled.stylesheet()).toStrictEqual({
-    s: [["one", [{
-      c: ["g:one"],
-      s: [0]
-    }]], ["three", [{
-      c: ["g:three.two"],
-      s: [0],
-      aq: [["a", "className", "*=", "two"]]
-    }]], ["test", [{
-      cq: [{
-        n: "g:one"
-      }, {
-        n: "g:three.two"
-      }],
-      d: [{
-        color: "#f00"
-      }],
-      v: [["__rn-css-color", "#f00"]],
-      s: [1, 4]
-    }]]]
-  });
-});
-//# sourceMappingURL=inheritance.test.js.map