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

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