react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.df0f885

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,8 @@ import {
   type LayoutRectangle,
 } from "react-native";
 
-import type { LightDarkVariable, StyleDescriptor } from "../../compiler";
+import type { StyleDescriptor, VariableValue } from "../../compiler";
+import { testMediaQuery } from "./conditions/media-query";
 
 export type Effect = {
   observers: Set<Effect>;
@@ -189,24 +190,32 @@ 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";
+const rootVariableFamily = () => {
+  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
+    const obs = observable<StyleDescriptor, VariableValue[]>(
+      (read, variableValue) => {
+        if (!variableValue) return undefined;
 
-        return colorSchemeName === "dark"
-          ? (lightDark[1] ?? lightDark[0])
-          : lightDark[0];
+        for (const [value, mediaQuery] of variableValue) {
+          if (!mediaQuery) {
+            return value;
+          }
+
+          if (testMediaQuery(mediaQuery, read)) {
+            return value;
+          }
+        }
+
+        return undefined;
       },
     );
 
     return obs;
   });
 };
-export const rootVariables = lightDarkFamily();
-export const universalVariables = lightDarkFamily();
+
+export const rootVariables = rootVariableFamily();
+export const universalVariables = rootVariableFamily();
 
 /** Units *********************************************************************/
 
@@ -237,7 +246,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/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,
       );