react-native-css 3.0.0-nightly.75f8b74 → 3.0.0-nightly.d8cb1bc

package/src/runtime/native/conditions/index.ts

@@ -1,40 +1,36 @@
-/* eslint-disable */
-import type {
-  AttributeQuery,
-  PseudoClassesQuery,
-  StyleRule,
-} from "../../../compiler";
+import type { PseudoClassesQuery, StyleRule } from "../../../compiler";
 import type { Props } from "../../runtime.types";
 import {
   activeFamily,
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
+import { testAttributes } from "./attributes";
 import { testContainerQueries } from "./container-query";
 import type { RenderGuard } from "./guards";
 import { testMediaQuery } from "./media-query";
 
 export function testRule(
   rule: StyleRule,
-  effect: Effect,
+  get: Getter,
   props: Props,
   guards: RenderGuard[],
   containerContext: ContainerContextValue,
 ) {
-  if (rule.p && !pseudoClasses(rule.p, effect)) {
+  if (rule.p && !pseudoClasses(rule.p, get)) {
     return false;
   }
-  if (rule.m && !testMediaQuery(rule.m, effect)) {
+  if (rule.m && !testMediaQuery(rule.m, get)) {
     return false;
   }
-  if (rule.aq && !attributes(rule.aq, props, guards)) {
+  if (rule.aq && !testAttributes(rule.aq, props, guards)) {
     return false;
   }
   if (
     rule.cq &&
-    !testContainerQueries(rule.cq, containerContext, guards, effect)
+    !testContainerQueries(rule.cq, containerContext, guards, get)
   ) {
     return false;
   }
@@ -42,65 +38,15 @@ export function testRule(
   return true;
 }
 
-function pseudoClasses(query: PseudoClassesQuery, effect: Effect) {
-  if (query.h && !hoverFamily(effect).get(effect)) {
+function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
+  if (query.h && !get(hoverFamily(get))) {
     return false;
   }
-  if (query.a && !activeFamily(effect).get(effect)) {
+  if (query.a && !get(activeFamily(get))) {
     return false;
   }
-  if (query.f && !focusFamily(effect).get(effect)) {
+  if (query.f && !get(focusFamily(get))) {
     return false;
   }
   return true;
 }
-
-function attributes(
-  queries: AttributeQuery[],
-  props: Props,
-  guards: RenderGuard[],
-) {
-  return queries.every((query) => testAttribute(query, props, guards));
-}
-
-function testAttribute(
-  query: AttributeQuery,
-  props: Props,
-  guards: RenderGuard[],
-) {
-  let value: any;
-
-  if (query[0] === "a") {
-    value = props?.[query[1]];
-  } else {
-    value = props?.dataSet?.[query[1]];
-  }
-
-  guards.push([query[0], query[1], value]);
-
-  const operator = query[2];
-
-  if (!operator) {
-    return value !== undefined && value !== null && value !== false;
-  }
-
-  switch (operator) {
-    case "!":
-      return !value;
-    case "=":
-      return value == query[3];
-    case "~=":
-      return value?.toString().split(" ").includes(query[3]);
-    case "|=":
-      return value?.toString().startsWith(query[3] + "-");
-    case "^=":
-      return value?.toString().startsWith(query[3]);
-    case "$=":
-      return value?.toString().endsWith(query[3]);
-    case "*=":
-      return value?.toString().includes(query[3]);
-    default:
-      operator satisfies never;
-      return false;
-  }
-}

package/src/runtime/native/conditions/media-query.ts

@@ -2,61 +2,59 @@
 import { PixelRatio, Platform } from "react-native";
 
 import type { MediaCondition } from "../../../compiler";
-import { colorScheme, vh, vw, type Effect } from "../reactivity";
+import { colorScheme, vh, vw, type Getter } from "../reactivity";
 
-export function testMediaQuery(mediaQueries: MediaCondition[], effect: Effect) {
-  return mediaQueries.every((query) => test(query, effect));
+export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
+  return mediaQueries.every((query) => test(query, get));
 }
 
-function test(mediaQuery: MediaCondition, effect: Effect): Boolean {
+function test(mediaQuery: MediaCondition, get: Getter): Boolean {
   switch (mediaQuery[0]) {
     case "[]":
     case "!!":
       return false;
     case "!":
-      return !test(mediaQuery[1], effect);
+      return !test(mediaQuery[1], get);
     case "&":
       return mediaQuery[1].every((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case "|":
       return mediaQuery[1].some((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case ">":
     case ">=":
     case "<":
     case "<=":
     case "=": {
-      return testComparison(mediaQuery, effect);
+      return testComparison(mediaQuery, get);
     }
   }
 }
 
-function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
+function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
   let left: number | undefined;
   const right = mediaQuery[2];
 
   switch (mediaQuery[1]) {
     case "platform":
-      return right === Platform.OS;
+      return right === "native" || right === Platform.OS;
     case "prefers-color-scheme": {
-      return right === colorScheme.get(effect);
+      return right === get(colorScheme);
     }
     case "display-mode":
       return right === "native" || Platform.OS === right;
     case "min-width":
-      return typeof right === "number" && vw.get(effect) >= right;
+      return typeof right === "number" && get(vw) >= right;
     case "max-width":
-      return typeof right === "number" && vw.get(effect) <= right;
+      return typeof right === "number" && get(vw) <= right;
     case "min-height":
-      return typeof right === "number" && vh.get(effect) >= right;
+      return typeof right === "number" && get(vh) >= right;
     case "max-height":
-      return typeof right === "number" && vh.get(effect) <= right;
+      return typeof right === "number" && get(vh) <= right;
     case "orientation":
-      return right === "landscape"
-        ? vh.get(effect) < vw.get(effect)
-        : vh.get(effect) >= vw.get(effect);
+      return right === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
   }
 
   if (typeof right !== "number") {
@@ -65,10 +63,10 @@ function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
 
   switch (mediaQuery[1]) {
     case "width":
-      left = vw.get(effect);
+      left = get(vw);
       break;
     case "height":
-      left = vh.get(effect);
+      left = get(vh);
       break;
     case "resolution":
       left = PixelRatio.get();

package/src/runtime/native/injection.ts

@@ -7,9 +7,9 @@ import {
   family,
   observable,
   observableBatch,
-  rootVariables,
   type Observable,
 } from "./reactivity";
+import { rootVariables } from "./root";
 
 export function StyleCollection() {
   return null;

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

@@ -6,11 +6,11 @@ import {
   containerLayoutFamily,
   focusFamily,
   hoverFamily,
-  type Effect,
+  type Getter as WeakKey,
 } from "../reactivity";
 
 const mainCache = new WeakMap<
-  Effect,
+  WeakKey,
   WeakMap<Function, (event: any) => void>
 >();
 
@@ -38,14 +38,14 @@ const defaultHandlers: Record<InteractionType, Handler> = {
 };
 
 export function getInteractionHandler(
-  effect: Effect,
+  weakKey: WeakKey,
   type: InteractionType,
   handler = defaultHandlers[type],
 ) {
-  let cache = mainCache.get(effect);
+  let cache = mainCache.get(weakKey);
   if (!cache) {
     cache = new WeakMap();
-    mainCache.set(effect, cache);
+    mainCache.set(weakKey, cache);
   }
 
   let cached = cache.get(handler);
@@ -57,29 +57,29 @@ export function getInteractionHandler(
 
       switch (type) {
         case "onLayout":
-          containerLayoutFamily(effect).set(
+          containerLayoutFamily(weakKey).set(
             (event as LayoutChangeEvent).nativeEvent.layout,
           );
           break;
         case "onHoverIn":
-          hoverFamily(effect).set(true);
+          hoverFamily(weakKey).set(true);
           break;
         case "onHoverOut":
-          hoverFamily(effect).set(false);
+          hoverFamily(weakKey).set(false);
           break;
         case "onPress":
           break;
         case "onPressIn":
-          activeFamily(effect).set(true);
+          activeFamily(weakKey).set(true);
           break;
         case "onPressOut":
-          activeFamily(effect).set(false);
+          activeFamily(weakKey).set(false);
           break;
         case "onFocus":
-          focusFamily(effect).set(true);
+          focusFamily(weakKey).set(true);
           break;
         case "onBlur":
-          focusFamily(effect).set(false);
+          focusFamily(weakKey).set(false);
           break;
       }
     };

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

@@ -104,7 +104,7 @@ export function updateRules(
       if (
         !testRule(
           rule,
-          state.ruleEffect,
+          state.ruleEffectGetter,
           currentProps,
           guards,
           inheritedContainers,
@@ -132,20 +132,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 +163,7 @@ export function updateRules(
 
     if (process.env.NODE_ENV !== "production") {
       if (isRerender) {
-        let pressable = activeFamily.has(state.ruleEffect);
+        let pressable = activeFamily.has(state.ruleEffectGetter);
 
         if (Boolean(variables) !== Boolean(state.variables)) {
           console.log(
@@ -190,7 +190,7 @@ export function updateRules(
   let pressable =
     process.env.NODE_ENV === "production"
       ? undefined
-      : activeFamily.has(state.ruleEffect);
+      : activeFamily.has(state.ruleEffectGetter);
 
   if (!rules.size && !state.stylesObs && !inlineVariables.size) {
     return {

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

@@ -17,6 +17,7 @@ import {
   VariableContext,
   type ContainerContextValue,
   type Effect,
+  type Getter,
   type VariableContextValue,
 } from "../reactivity";
 import { getStyledProps, stylesFamily } from "../styles";
@@ -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/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

@@ -103,63 +103,73 @@ export function applyDeclarations(
       // Dynamic styles
       let value: any = declaration[0];
       let propPath = declaration[1];
-      let prop = "";
+      let prop: string;
 
-      if (typeof propPath === "string") {
-        if (propPath.startsWith("^")) {
-          propPath = propPath.slice(1);
-          target = topLevelTarget[propPath] ??= {};
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = 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];
           }
-        }
-      }
 
-      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 = {};
-          delayedStyles.push(() => {
-            if (target[prop] === value) {
-              delete target[prop];
-              value = resolveValue(originalValue, get, {
-                inlineVariables,
-                inheritedVariables,
-                renderGuards: guards,
-                calculateProps,
-              });
-              applyValue(target, prop, value);
-            }
-          });
+          prop = final;
         } else {
-          value = resolveValue(value, get, {
-            inlineVariables,
-            inheritedVariables,
-            renderGuards: guards,
-            calculateProps,
-          });
+          target = topLevelTarget;
+          prop = first;
         }
+      } else {
+        prop = propPath;
+      }
 
-        applyValue(target, prop, 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 = {};
+        delayedStyles.push(() => {
+          if (target[prop] === value) {
+            delete target[prop];
+            value = resolveValue(originalValue, 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/index.ts

@@ -55,57 +55,57 @@ export function getStyledProps(
     }
 
     // Apply the handlers
-    if (hoverFamily.has(state.ruleEffect)) {
+    if (hoverFamily.has(state.ruleEffectGetter)) {
       result ??= {};
       result.onHoverIn = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onHoverIn",
         inline?.onHoverIn,
       );
       result.onHoverOut = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onHoverOut",
         inline?.onHoverOut,
       );
     }
 
-    if (activeFamily.has(state.ruleEffect)) {
+    if (activeFamily.has(state.ruleEffectGetter)) {
       result ??= {};
       result.onPress = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onPress",
         inline?.onPress,
       );
       result.onPressIn = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onPressIn",
         inline?.onPressIn,
       );
       result.onPressOut = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onPressOut",
         inline?.onPressOut,
       );
     }
 
-    if (focusFamily.has(state.ruleEffect)) {
+    if (focusFamily.has(state.ruleEffectGetter)) {
       result ??= {};
       result.onBlur = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onBlur",
         inline?.onBlur,
       );
       result.onFocus = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onFocus",
         inline?.onFocus,
       );
     }
 
-    if (containerLayoutFamily.has(state.ruleEffect)) {
+    if (containerLayoutFamily.has(state.ruleEffectGetter)) {
       result ??= {};
       result.onLayout = getInteractionHandler(
-        state.ruleEffect,
+        state.ruleEffectGetter,
         "onLayout",
         inline?.onLayout,
       );

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

@@ -2,17 +2,21 @@
 import { rem as remObs, vh as vhObs, vw as vwObs } from "../reactivity";
 import type { StyleFunctionResolver } from "./resolve";
 
-export const em: StyleFunctionResolver = (resolve, func) => {
+export const em: StyleFunctionResolver = (resolve, func, get) => {
   let value = func[2];
 
   if (!value) {
     return;
   }
 
-  const emValue = resolve([{}, "var", ["__rn-css-em"]]);
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
 
   if (typeof emValue !== "number") {
-    return undefined;
+    emValue = get(remObs);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
   }
 
   return round(Number(value) * emValue);

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

@@ -1,11 +1,7 @@
 import type { StyleDescriptor, StyleFunction } from "../../../compiler";
 import { isStyleDescriptorArray } from "../../utils";
-import {
-  rootVariables,
-  universalVariables,
-  VAR_SYMBOL,
-  type Getter,
-} from "../reactivity";
+import { VAR_SYMBOL, type Getter } from "../reactivity";
+import { rootVariables, universalVariables } from "../root";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
 export function varResolver(