react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.67b5d08

package/src/runtime/native/react/rules.ts

@@ -12,6 +12,7 @@ import {
   hoverFamily,
   VAR_SYMBOL,
   weakFamily,
+  type ContainerContextValue,
   type VariableContextValue,
 } from "../reactivity";
 import { stylesFamily } from "../styles";
@@ -36,11 +37,12 @@ export function updateRules(
 
   let usesVariables = false;
 
-  let variables = state.variables ? inheritedVariables : undefined;
-  let containers = state.containers ? inheritedContainers : undefined;
+  let variables: VariableContextValue | undefined;
+  let containers: ContainerContextValue | undefined;
   const inlineVariables = new Set<InlineVariable>();
 
   let animated = false;
+  let pressable = false;
 
   for (const config of state.configs) {
     const source = currentProps?.[config.source];
@@ -93,18 +95,25 @@ export function updateRules(
     }
 
     for (let rule of styleRuleSet) {
-      // Even if a rule does not match, make sure we register that it could set
-      // a variable or container or be animated.
-      if (rule.v) usesVariables = true;
-      if (rule.c) containers ??= inheritedContainers;
+      usesVariables ||= Boolean(rule.dv);
+
+      // We do this even if the rule doesn't match so we can maintain a consistent render tree
+      // We we need to inject React context
       if (rule.a) animated = true;
 
-      usesVariables ||= Boolean(rule.dv);
+      if (rule.v) {
+        variables ??= inheritedVariables;
+      }
+
+      if (rule.c) {
+        containers ??= inheritedContainers;
+        activeFamily(state.ruleEffectGetter);
+      }
 
       if (
         !testRule(
           rule,
-          state.ruleEffect,
+          state.ruleEffectGetter,
           currentProps,
           guards,
           inheritedContainers,
@@ -114,11 +123,8 @@ export function updateRules(
       }
 
       if (rule.v) {
-        // We're going to set a value, so we need to create a new object
         if (variables === inheritedVariables) {
           variables = { ...inheritedVariables };
-        } else {
-          variables ??= { ...inheritedVariables };
         }
 
         for (const v of rule.v) {
@@ -132,20 +138,20 @@ export function updateRules(
           containers = {
             ...inheritedContainers,
             // This container becomes the default container
-            [DEFAULT_CONTAINER_NAME]: state.ruleEffect,
+            [DEFAULT_CONTAINER_NAME]: state.ruleEffectGetter,
           };
         }
 
         // This this component as the named container
         for (const name of rule.c) {
-          containers![name] = state.ruleEffect;
+          containers![name] = state.ruleEffectGetter;
         }
 
         // Enable hover/active/focus/layout handlers
-        hoverFamily(state.ruleEffect);
-        activeFamily(state.ruleEffect);
-        focusFamily(state.ruleEffect);
-        containerLayoutFamily(state.ruleEffect);
+        hoverFamily(state.ruleEffectGetter);
+        activeFamily(state.ruleEffectGetter);
+        focusFamily(state.ruleEffectGetter);
+        containerLayoutFamily(state.ruleEffectGetter);
       }
 
       if (rule.a) {
@@ -163,7 +169,7 @@ export function updateRules(
 
     if (process.env.NODE_ENV !== "production") {
       if (isRerender) {
-        let pressable = activeFamily.has(state.ruleEffect);
+        const pressable = activeFamily.has(state.ruleEffectGetter);
 
         if (Boolean(variables) !== Boolean(state.variables)) {
           console.log(
@@ -186,11 +192,7 @@ export function updateRules(
     }
   }
 
-  // We only track this in development
-  let pressable =
-    process.env.NODE_ENV === "production"
-      ? undefined
-      : activeFamily.has(state.ruleEffect);
+  pressable = activeFamily.has(state.ruleEffectGetter);
 
   if (!rules.size && !state.stylesObs && !inlineVariables.size) {
     return {
@@ -199,6 +201,8 @@ export function updateRules(
       guards,
       animated,
       pressable,
+      variables,
+      containers,
     };
   }
 

package/src/runtime/native/react/useNativeCss.ts

@@ -17,10 +17,11 @@ import {
   VariableContext,
   type ContainerContextValue,
   type Effect,
+  type Getter,
   type VariableContextValue,
 } from "../reactivity";
+import { animatedComponentFamily } from "../reanimated";
 import { getStyledProps, stylesFamily } from "../styles";
-import { animatedComponentFamily } from "../styles/animation";
 import { updateRules } from "./rules";
 
 export type Config = {
@@ -35,6 +36,7 @@ export type ComponentState = {
 
   /** Reactive tracking */
   ruleEffect: Effect;
+  ruleEffectGetter: Getter;
   styleEffect: Effect;
 
   /** The components props */
@@ -94,6 +96,7 @@ export function useNativeCss(
     return updateRules(
       {
         ruleEffect,
+        ruleEffectGetter: (observable) => observable.get(ruleEffect),
         styleEffect,
         configs,
         inheritedContainers,

package/src/runtime/native/reactivity.ts

@@ -7,7 +7,7 @@ import {
   type LayoutRectangle,
 } from "react-native";
 
-import type { LightDarkVariable, StyleDescriptor } from "../../compiler";
+import type { StyleDescriptor } from "../../compiler";
 
 export type Effect = {
   observers: Set<Effect>;
@@ -189,25 +189,6 @@ export const VariableContext = createContext<VariableContextValue>({
   [VAR_SYMBOL]: true,
 });
 
-const lightDarkFamily = () => {
-  return family<string, Observable<StyleDescriptor, LightDarkVariable>>(() => {
-    const obs = observable<StyleDescriptor, LightDarkVariable>(
-      (read, lightDark = [undefined, undefined]) => {
-        const colorSchemeName =
-          read(colorScheme) ?? Appearance.getColorScheme() ?? "light";
-
-        return colorSchemeName === "dark"
-          ? (lightDark[1] ?? lightDark[0])
-          : lightDark[0];
-      },
-    );
-
-    return obs;
-  });
-};
-export const rootVariables = lightDarkFamily();
-export const universalVariables = lightDarkFamily();
-
 /** Units *********************************************************************/
 
 export const rem = observable(14);
@@ -237,7 +218,7 @@ Appearance.addChangeListener((event) => colorScheme.set(event.colorScheme));
 
 /** Containers ****************************************************************/
 
-export type ContainerContextValue = Record<string, Effect>;
+export type ContainerContextValue = Record<string, WeakKey>;
 export const ContainerContext = createContext<ContainerContextValue>({});
 
 export const containerLayoutFamily = weakFamily(() => {

package/src/runtime/native/reanimated.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from "react";
+
+import { weakFamily } from "./reactivity";
+
+export const animatedComponentFamily = weakFamily(
+  (component: ComponentType) => {
+    if (
+      "displayName" in component &&
+      component.displayName?.startsWith("Animated.")
+    ) {
+      return component;
+    }
+
+    const createAnimatedComponent =
+      // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-member-access
+      require("react-native-reanimated").createAnimatedComponent as (
+        component: ComponentType,
+      ) => ComponentType;
+
+    return createAnimatedComponent(component);
+  },
+);

package/src/runtime/native/root.ts

@@ -0,0 +1,31 @@
+import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+
+import { testMediaQuery } from "./conditions/media-query";
+import { family, observable, type Observable } from "./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();

package/src/runtime/native/styles/calculate-props.ts

@@ -4,13 +4,14 @@ import type {
   StyleDeclaration,
   StyleRule,
 } from "../../../compiler";
-import { applyValue, Specificity as S } from "../../utils";
+import { applyValue, getDeepPath, Specificity as S } from "../../utils";
 import type { RenderGuard } from "../conditions/guards";
 import {
   VAR_SYMBOL,
   type Getter,
   type VariableContextValue,
 } from "../reactivity";
+import { transformKeys } from "./defaults";
 import { resolveValue } from "./resolve";
 
 export function calculateProps(
@@ -28,6 +29,7 @@ export function calculateProps(
   let important: Record<string, any> | undefined;
 
   const delayedStyles: (() => void)[] = [];
+  const transformStyles: (() => void)[] = [];
 
   for (const rule of rules) {
     if (VAR_SYMBOL in rule) {
@@ -67,6 +69,7 @@ export function calculateProps(
         inlineVariables,
         inheritedVariables,
         delayedStyles,
+        transformStyles,
         guards,
         target,
         topLevelTarget,
@@ -78,6 +81,10 @@ export function calculateProps(
     delayedStyle();
   }
 
+  for (const transformStyle of transformStyles) {
+    transformStyle();
+  }
+
   return {
     normal,
     guards,
@@ -91,6 +98,7 @@ export function applyDeclarations(
   inlineVariables: InlineVariable,
   inheritedVariables: VariableContextValue,
   delayedStyles: (() => void)[] = [],
+  transformStyles: (() => void)[] = [],
   guards: RenderGuard[] = [],
   target: Record<string, any> = {},
   topLevelTarget = target,
@@ -103,42 +111,66 @@ export function applyDeclarations(
       // Dynamic styles
       let value: any = declaration[0];
       let propPath = declaration[1];
-      let prop = "";
+      let prop: string;
+
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = propPath;
 
-      if (typeof propPath === "string") {
-        if (propPath.startsWith("^")) {
-          propPath = propPath.slice(1);
-          target = topLevelTarget[propPath] ??= {};
+        if (!first) {
+          continue;
         }
-        prop = propPath;
-      } else {
-        for (prop of propPath) {
-          if (prop.startsWith("^")) {
-            prop = prop.slice(1);
-            target = topLevelTarget[prop] ??= {};
-          } else {
-            target = target[prop] ??= {};
+
+        const final = rest.pop();
+
+        if (final) {
+          if (first !== "*") {
+            topLevelTarget[first] ??= {};
+            target = topLevelTarget[first];
+          }
+
+          for (prop of rest) {
+            target[prop] ??= {};
+            target = target[prop];
           }
+
+          prop = final;
+        } else {
+          target = topLevelTarget;
+          prop = first;
         }
+      } else {
+        prop = propPath;
       }
 
-      if (Array.isArray(value)) {
-        const shouldDelay = declaration[2];
-
-        if (shouldDelay) {
-          /**
-           * We need to delay the resolution of this value until after all
-           * styles have been calculated. But another style might override
-           * this value. So we set a placeholder value and only override
-           * if the placeholder is preserved
-           *
-           * This also ensures the props exist, so setValue will properly
-           * mutate the props object and not create a new one
-           */
-          const originalValue = value;
-          value = {};
+      const shouldDelay = declaration[2];
+
+      if (shouldDelay || transformKeys.has(prop)) {
+        /**
+         * We need to delay the resolution of this value until after all
+         * styles have been calculated. But another style might override
+         * this value. So we set a placeholder value and only override
+         * if the placeholder is preserved
+         *
+         * This also ensures the props exist, so setValue will properly
+         * mutate the props object and not create a new one
+         */
+        const originalValue = value;
+        // This needs to be a object with the [prop] so we can discover in transform arrays
+        value = { [prop]: true };
+
+        if (transformKeys.has(prop)) {
+          transformStyles.push(() => {
+            value = resolveValue(originalValue, get, {
+              inlineVariables,
+              inheritedVariables,
+              renderGuards: guards,
+              calculateProps,
+            });
+            applyValue(target, prop, value);
+          });
+        } else {
           delayedStyles.push(() => {
-            if (target[prop] === value) {
+            if (getDeepPath(target, prop) === value) {
               delete target[prop];
               value = resolveValue(originalValue, get, {
                 inlineVariables,
@@ -149,17 +181,17 @@ export function applyDeclarations(
               applyValue(target, prop, value);
             }
           });
-        } else {
-          value = resolveValue(value, get, {
-            inlineVariables,
-            inheritedVariables,
-            renderGuards: guards,
-            calculateProps,
-          });
         }
-
-        applyValue(target, prop, value);
+      } else {
+        value = resolveValue(value, get, {
+          inlineVariables,
+          inheritedVariables,
+          renderGuards: guards,
+          calculateProps,
+        });
       }
+
+      applyValue(target, prop, value);
     }
   }
 }

package/src/runtime/native/styles/defaults.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 export const transformKeys = new Set([
+  "translate",
   "translateX",
   "translateY",
   "scale",

package/src/runtime/native/styles/functions/animation-timing.ts

@@ -0,0 +1,44 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+const advancedTimingFunctions: Record<
+  string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  () => (...args: any[]) => unknown
+> = {
+  cubicBezier: () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).cubicBezier;
+  },
+  steps: () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).steps;
+  },
+};
+
+const timingFunctionResolver: StyleFunctionResolver = (resolveValue, value) => {
+  const name = value[1];
+  const resolver = advancedTimingFunctions[name];
+
+  if (!resolver) {
+    return;
+  }
+
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args)) {
+    return;
+  }
+
+  const fn = resolver();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  const result = fn(...args);
+
+  return result;
+};
+
+export const cubicBezier = timingFunctionResolver;
+export const steps = timingFunctionResolver;

package/src/runtime/native/styles/functions/calc.ts

@@ -0,0 +1,121 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+interface Value {
+  value: number;
+  isPercent: boolean;
+}
+
+const precedence: Record<string, number> = { "+": 1, "-": 1, "*": 2, "/": 2 };
+
+export const calc: StyleFunctionResolver = (resolveValue, func) => {
+  const tokens = resolveValue(func[2]);
+
+  if (!Array.isArray(tokens)) {
+    return tokens;
+  }
+
+  // --- Step 1: Convert to RPN (Shunting-Yard) ---
+  const output: (string | Value)[] = [];
+  const ops: string[] = [];
+
+  for (const t of tokens) {
+    if (typeof t === "number") {
+      output.push({ value: round(t), isPercent: false });
+    } else if (typeof t === "string") {
+      if (t.endsWith("%")) {
+        const num = parseFloat(t.slice(0, -1));
+        if (Number.isNaN(num)) return undefined;
+        output.push({ value: round(num / 100), isPercent: true });
+      } else if (t === "+" || t === "-" || t === "*" || t === "/") {
+        while (
+          ops.length &&
+          (ops[ops.length - 1] === "+" ||
+            ops[ops.length - 1] === "-" ||
+            ops[ops.length - 1] === "*" ||
+            ops[ops.length - 1] === "/") &&
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          (precedence[ops[ops.length - 1]!] ?? 0) >= (precedence[t] ?? 0)
+        ) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          output.push(ops.pop()!);
+        }
+        ops.push(t);
+      } else if (t === "(") {
+        ops.push(t);
+      } else if (t === ")") {
+        while (ops.length && ops[ops.length - 1] !== "(") {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          output.push(ops.pop()!);
+        }
+        if (ops.pop() !== "(") return undefined; // mismatched parens
+      } else {
+        return undefined; // invalid token
+      }
+    } else {
+      return undefined;
+    }
+  }
+  while (ops.length) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const op = ops.pop()!;
+    if (op === "(" || op === ")") return undefined;
+    output.push(op);
+  }
+
+  // --- Step 2: Evaluate RPN ---
+  const stack: Value[] = [];
+  for (const t of output) {
+    if (typeof t !== "string") {
+      stack.push(t);
+    } else {
+      const b = stack.pop();
+      const a = stack.pop();
+      if (!a || !b) return undefined;
+
+      const res: Value = { value: 0, isPercent: false };
+
+      switch (t) {
+        case "+":
+        case "-": {
+          if (a.isPercent !== b.isPercent) return undefined; // cannot mix
+          res.isPercent = a.isPercent;
+          res.value =
+            t === "+" ? round(a.value + b.value) : round(a.value - b.value);
+          break;
+        }
+        case "*": {
+          if (a.isPercent && b.isPercent) return undefined; // ambiguous
+          res.isPercent = a.isPercent || b.isPercent;
+          res.value = round(a.value * b.value);
+          break;
+        }
+        case "/": {
+          if (b.value === 0) return undefined;
+          if (a.isPercent && b.isPercent) {
+            // % / % → plain number ratio
+            res.isPercent = false;
+            res.value = round(a.value / b.value);
+          } else {
+            res.isPercent = a.isPercent || b.isPercent;
+            res.value = round(a.value / b.value);
+          }
+          break;
+        }
+      }
+      stack.push(res);
+    }
+  }
+
+  if (stack.length !== 1) return undefined;
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const final = stack[0]!;
+  if (final.isPercent) {
+    return `${final.value * 100}%`;
+  }
+  return final.value;
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
+}

package/src/runtime/native/styles/{filters.ts → functions/filters.ts}

@@ -1,6 +1,6 @@
-import { isStyleDescriptorArray } from "../../utils";
-import type { StyleFunctionResolver } from "./resolve";
-import { shorthandHandler } from "./shorthand";
+import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "../shorthands/_handler";
 
 export const blur: StyleFunctionResolver = (resolveValue, value) => {
   const args = resolveValue(value[2]);

package/src/runtime/native/styles/functions/index.ts

@@ -0,0 +1,5 @@
+export * from "./animation-timing";
+export * from "./calc";
+export * from "./filters";
+export * from "./platform-functions";
+export * from "./transform-functions";

package/src/runtime/native/styles/{platform-functions.ts → functions/platform-functions.ts}

@@ -1,6 +1,6 @@
 import { PixelRatio, PlatformColor, StyleSheet } from "react-native";
 
-import type { StyleFunctionResolver } from "./resolve";
+import type { StyleFunctionResolver } from "../resolve";
 
 export const platformColor: StyleFunctionResolver = (resolveValue, value) => {
   const color: unknown = resolveValue(value[2]);
@@ -25,7 +25,7 @@ export const fontScale: StyleFunctionResolver = () => {
   return PixelRatio.getFontScale();
 };
 
-export const pixelSizeForLayoutSize: StyleFunctionResolver = (
+export const getPixelSizeForLayoutSize: StyleFunctionResolver = (
   resolveValue,
   value,
 ) => {