react-native-css 3.0.0-nightly.27bd5e2 → 3.0.0-nightly.46bc0ab

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

@@ -0,0 +1,52 @@
+import type { AttributeQuery } from "../../../compiler";
+import type { Props } from "../../runtime.types";
+import type { RenderGuard } from "./guards";
+
+export function testAttributes(
+  queries: AttributeQuery[],
+  props: Props,
+  guards: RenderGuard[],
+) {
+  return queries.every((query) => testAttribute(query, props, guards));
+}
+
+function testAttribute(
+  [type, prop, operator, testValue]: AttributeQuery,
+  props: Props,
+  guards: RenderGuard[],
+) {
+  let value: unknown;
+
+  if (type === "a") {
+    value = props?.[prop];
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    value = props?.dataSet?.[prop];
+  }
+
+  guards.push([type, prop, value]);
+
+  if (!operator) {
+    return value !== undefined && value !== null && value !== false;
+  }
+
+  switch (operator) {
+    case "!":
+      return !value;
+    case "=":
+      return value == testValue;
+    case "~=":
+      return testValue && value?.toString().split(" ").includes(testValue);
+    case "|=":
+      return testValue && value?.toString().startsWith(testValue + "-");
+    case "^=":
+      return testValue && value?.toString().startsWith(testValue);
+    case "$=":
+      return testValue && value?.toString().endsWith(testValue);
+    case "*=":
+      return testValue && value?.toString().includes(testValue);
+    default:
+      operator satisfies never;
+      return false;
+  }
+}

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

@@ -14,8 +14,9 @@ import {
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
+// import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -24,10 +25,10 @@ export function testContainerQueries(
   queries: ContainerQuery[],
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect: Effect,
+  get: Getter,
 ) {
   return queries.every((query) => {
-    return testContainerQuery(query, inheritedContainers, guards, effect);
+    return testContainerQuery(query, inheritedContainers, guards, get);
   });
 }
 
@@ -35,7 +36,7 @@ export function testContainerQuery(
   query: ContainerQuery,
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   const name = query.n ?? DEFAULT_CONTAINER_NAME;
   const container = inheritedContainers[name]!;
@@ -46,11 +47,15 @@ export function testContainerQuery(
     return false;
   }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, effect)) {
+  // if (query.a && !testAttributes(query.a, container.props, guards)) {
+  //   return false;
+  // }
+
+  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
     return false;
   }
 
-  if (query.p && !testContainerPseudoCondition(query.p, container, effect)) {
+  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
     return false;
   }
 
@@ -60,15 +65,15 @@ export function testContainerQuery(
 function testContainerPseudoCondition(
   query: PseudoClassesQuery,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
-  if (query.h && !hoverFamily(containerKey).get(effect)) {
+  if (query.h && !get(hoverFamily(containerKey))) {
     return false;
   }
-  if (query.a && !activeFamily(containerKey).get(effect)) {
+  if (query.a && !get(activeFamily(containerKey))) {
     return false;
   }
-  if (query.f && !focusFamily(containerKey).get(effect)) {
+  if (query.f && !get(focusFamily(containerKey))) {
     return false;
   }
   return true;
@@ -77,18 +82,18 @@ function testContainerPseudoCondition(
 function testContainerMediaCondition(
   condition: MediaCondition,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   switch (condition[0]) {
     case "!":
-      return !testContainerMediaCondition(condition[1], containerKey, effect);
+      return !testContainerMediaCondition(condition[1], containerKey, get);
     case "&":
       return condition[1].every((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "|":
       return condition[1].some((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "!!":
       return false;
@@ -99,7 +104,7 @@ function testContainerMediaCondition(
     case "<":
     case "<=":
     case "=": {
-      const left = getContainerFeatureValue(condition[1], containerKey, effect);
+      const left = getContainerFeatureValue(condition[1], containerKey, get);
       const right = condition[2];
 
       if (condition[0] === "=") {
@@ -133,21 +138,21 @@ function testContainerMediaCondition(
 function getContainerFeatureValue(
   name: MediaFeatureNameFor_ContainerSizeFeatureId,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): StyleDescriptor {
   switch (name) {
     case "width":
-      return containerWidthFamily(containerKey).get(effect);
+      return get(containerWidthFamily(containerKey));
     case "height":
-      return containerHeightFamily(containerKey).get(effect);
+      return get(containerHeightFamily(containerKey));
     case "aspect-ratio": {
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width / height;
     }
     case "orientation":
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width > height ? "landscape" : "portrait";
     case "inline-size":
     case "block-size":

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

@@ -2,7 +2,6 @@
 import type { ComponentState } from "../react/useNativeCss";
 import type {
   ContainerContextValue,
-  Effect,
   VariableContextValue,
 } from "../reactivity";
 
@@ -10,7 +9,7 @@ export type RenderGuard =
   | ["a", string, any]
   | ["d", string, any]
   | ["v", string, any]
-  | ["c", string, Effect];
+  | ["c", string, WeakKey];
 
 export function testGuards(
   state: ComponentState,

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,61 @@
 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 "hover":
+      return true;
     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 +65,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

@@ -3,13 +3,14 @@ import type {
   ReactNativeCssStyleSheet,
   StyleRuleSet,
 } from "../../compiler";
+import { DEFAULT_CONTAINER_NAME } from "./conditions/container-query";
 import {
   family,
   observable,
   observableBatch,
-  rootVariables,
   type Observable,
 } from "./reactivity";
+import { rootVariables } from "./root";
 
 export function StyleCollection() {
   return null;
@@ -27,6 +28,36 @@ StyleCollection.keyframes = family<string, Observable<Animation_V2[1]>>(() => {
 StyleCollection.inject = function (options: ReactNativeCssStyleSheet) {
   observableBatch.current = new Set();
 
+  StyleCollection.styles("will-change-variable").set([
+    {
+      s: [0],
+      v: [],
+    },
+  ]);
+
+  StyleCollection.styles("will-change-container").set([
+    {
+      s: [0],
+      c: [DEFAULT_CONTAINER_NAME],
+    },
+  ]);
+
+  StyleCollection.styles("will-change-animation").set([
+    {
+      s: [0],
+      a: true,
+    },
+  ]);
+
+  StyleCollection.styles("will-change-pressable").set([
+    {
+      s: [0],
+      p: {
+        h: 1,
+      },
+    },
+  ]);
+
   if (options.s) {
     for (const style of options.s) {
       StyleCollection.styles(style[0]).set(style[1]);
@@ -99,33 +130,3 @@ function isDeepEqual(a: unknown, b: unknown): boolean {
 
   return true;
 }
-
-StyleCollection.styles("will-change-variable").set([
-  {
-    s: [0],
-    v: [],
-  },
-]);
-
-StyleCollection.styles("will-change-container").set([
-  {
-    s: [0],
-    c: [],
-  },
-]);
-
-StyleCollection.styles("will-change-animation").set([
-  {
-    s: [0],
-    a: true,
-  },
-]);
-
-StyleCollection.styles("will-change-pressable").set([
-  {
-    s: [0],
-    p: {
-      h: 1,
-    },
-  },
-]);

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

@@ -12,6 +12,7 @@ import {
   hoverFamily,
   VAR_SYMBOL,
   weakFamily,
+  type ContainerContextValue,
   type VariableContextValue,
 } from "../reactivity";
 import { stylesFamily } from "../styles";
@@ -36,8 +37,8 @@ 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;
@@ -101,10 +102,20 @@ export function updateRules(
 
       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.v) {
+        variables ??= inheritedVariables;
+      }
+
+      if (rule.c) {
+        containers ??= inheritedContainers;
+      }
+
       if (
         !testRule(
           rule,
-          state.ruleEffect,
+          state.ruleEffectGetter,
           currentProps,
           guards,
           inheritedContainers,
@@ -114,11 +125,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 +140,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 +171,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 +198,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 {
@@ -199,6 +207,7 @@ export function updateRules(
       guards,
       animated,
       pressable,
+      variables,
     };
   }