root.ts

import { Platform, PlatformColor } from "react-native";

import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";

import { testMediaQuery } from "../native/conditions/media-query";
import { family, observable, type Observable } from "../native/reactivity";

const rootVariableFamily = () => {
  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
    const obs = observable<StyleDescriptor, VariableValue[]>(
      (read, variableValue) => {
        if (!variableValue) return undefined;

        for (const [value, mediaQuery] of variableValue) {
          if (!mediaQuery) {
            return value;
          }

          if (testMediaQuery(mediaQuery, read)) {
            return value;
          }
        }

        return undefined;
      },
    );

    return obs;
  });
};

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);

/**
 * Tailwind CSS v4 shadow variable defaults.
 *
 * Tailwind v4 uses @property to define initial-value for shadow CSS variables,
 * but react-native-css doesn't support @property declarations.
 *
 * These provide fallback values that match Tailwind's defaults:
 * - Transparent shadows (0 0 0 0 #0000) are filtered out by omitTransparentShadows
 * - This prevents "undefined variable" errors when shadow utilities are used
 *
 * @see https://github.com/tailwindlabs/tailwindcss/discussions/16772
 */
// VariableValue[] where each VariableValue is [StyleDescriptor] tuple
// The inner [0, 0, 0, 0, "#0000"] is a StyleDescriptor[] (shadow values)
const transparentShadow: VariableValue[] = [[[0, 0, 0, 0, "#0000"]]];
rootVariables("tw-shadow").set(transparentShadow);
rootVariables("tw-shadow-color").set([["initial"]]);
rootVariables("tw-inset-shadow").set(transparentShadow);
rootVariables("tw-inset-shadow-color").set([["initial"]]);
rootVariables("tw-ring-shadow").set(transparentShadow);
rootVariables("tw-inset-ring-shadow").set(transparentShadow);
rootVariables("tw-ring-offset-shadow").set(transparentShadow);