react-native-css 3.0.0-nightly.fa5e95b → 3.0.0-preview.1

package/src/metro/resolver.ts

@@ -45,6 +45,14 @@ export function nativeResolver(
     return resolver(context, `react-native-css/components`, platform);
   }
 
+  if (moduleName === "react-native-safe-area-context") {
+    return resolver(
+      context,
+      `react-native-css/components/react-native-safe-area-context`,
+      platform,
+    );
+  }
+
   // We only care about `react-native/Library/Components/<module>.js` components
   const segments = resolution.filePath.split(sep);
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/poison.pill.ts

@@ -3,9 +3,9 @@ const canWarn = process.env.NODE_ENV !== "test";
 if (canWarn) {
   throw new Error(`react-native-css has encountered a setup error. 
 
-┌─────-─┐
-| Metro | 
-└─────-─┘
+┌───────┐
+│ Metro │ 
+└───────┘
 
 Either your metro.config.js is missing the 'withReactNativeCSS' wrapper OR
 the resolver.resolveRequest function of your config is being overridden, and not calling the parent resolver.
@@ -19,15 +19,15 @@ module.exports = with3rdPartyPlugin(
 )
 \`\`\`
 
-┌─────------─┐
-| NativeWind | 
-└─────------─┘
+┌────────────┐
+│ NativeWind │ 
+└────────────┘
 
-If you are using NativeWind with the 'withNativeWind' function, follow the Metro instructions above, but use 'withNativeWind' instead of 'withReactNativeCSS'.
+If you are using NativeWind follow the Metro instructions above but use 'withNativeWind' instead of 'withReactNativeCSS'.
 
-┌─────----------─┐
-| Other bundlers | 
-└─────----------─┘
+┌────────────────┐
+│ Other bundlers │ 
+└────────────────┘
 
 If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
 `);

package/src/runtime/native/{api.ts → api.tsx}

@@ -1,8 +1,8 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState, type PropsWithChildren } from "react";
 import { Appearance } from "react-native";
 
-import type { InlineVariable, StyleDescriptor } from "../../compiler";
+import type { StyleDescriptor } from "../../compiler";
 import type {
   ColorScheme,
   Props,
@@ -18,10 +18,13 @@ import {
   VariableContext,
   type Effect,
   type Getter,
+  type VariableContextValue,
 } from "./reactivity";
 import { resolveValue } from "./styles/resolve";
 
-export { StyleCollection } from "./injection";
+export { StyleCollection } from "react-native-css/style-collection";
+
+export { useNativeCss };
 
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
@@ -100,7 +103,33 @@ export function useNativeVariable(name: string) {
   return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
 }
 
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
 export function vars(variables: Record<string, StyleDescriptor>) {
-  (variables as InlineVariable)[VAR_SYMBOL] = "inline";
-  return variables;
+  return Object.assign(
+    { [VAR_SYMBOL]: "inline" },
+    Object.fromEntries(
+      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
+    ),
+  );
+}
+
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, StyleDescriptor> }>,
+) {
+  const inheritedVariables = useContext(VariableContext);
+
+  const value: VariableContextValue = useMemo(
+    () => ({
+      ...inheritedVariables,
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
+      ),
+      [VAR_SYMBOL]: true,
+    }),
+    [inheritedVariables, props.value],
+  );
+
+  return <VariableContext value={value}>{props.children}</VariableContext>;
 }

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

@@ -16,6 +16,7 @@ import {
   type ContainerContextValue,
   type Getter,
 } from "../reactivity";
+// import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -46,6 +47,10 @@ export function testContainerQuery(
     return false;
   }
 
+  // if (query.a && !testAttributes(query.a, container.props, guards)) {
+  //   return false;
+  // }
+
   if (query.m && !testContainerMediaCondition(query.m, container, get)) {
     return false;
   }

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

@@ -1,9 +1,4 @@
-/* eslint-disable */
-import type {
-  AttributeQuery,
-  PseudoClassesQuery,
-  StyleRule,
-} from "../../../compiler";
+import type { PseudoClassesQuery, StyleRule } from "../../../compiler";
 import type { Props } from "../../runtime.types";
 import {
   activeFamily,
@@ -12,6 +7,7 @@ import {
   type ContainerContextValue,
   type Getter,
 } from "../reactivity";
+import { testAttributes } from "./attributes";
 import { testContainerQueries } from "./container-query";
 import type { RenderGuard } from "./guards";
 import { testMediaQuery } from "./media-query";
@@ -29,7 +25,7 @@ export function testRule(
   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 (
@@ -43,10 +39,12 @@ export function testRule(
 }
 
 function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
-  if (query.h && !get(hoverFamily(get))) {
+  // IMPORTANT: active needs: to be first. Modifies a global value
+  // that we use to determine if the component should be a pressable
+  if (query.a && !get(activeFamily(get))) {
     return false;
   }
-  if (query.a && !get(activeFamily(get))) {
+  if (query.h && !get(hoverFamily(get))) {
     return false;
   }
   if (query.f && !get(focusFamily(get))) {
@@ -54,53 +52,3 @@ function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
   }
   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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { PixelRatio, Platform } from "react-native";
+import { I18nManager, PixelRatio, Platform } from "react-native";
 
 import type { MediaCondition } from "../../../compiler";
 import { colorScheme, vh, vw, type Getter } from "../reactivity";
@@ -34,33 +34,39 @@ function test(mediaQuery: MediaCondition, get: Getter): Boolean {
 }
 
 function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
-  let left: number | undefined;
-  const right = mediaQuery[2];
+  const value = mediaQuery[2];
 
   switch (mediaQuery[1]) {
+    case "dir":
+      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
+    case "hover":
+      return true;
     case "platform":
-      return right === "native" || right === Platform.OS;
+      return value === "native" || value === Platform.OS;
     case "prefers-color-scheme": {
-      return right === get(colorScheme);
+      return value === get(colorScheme);
     }
     case "display-mode":
-      return right === "native" || Platform.OS === right;
+      return value === "native" || Platform.OS === value;
     case "min-width":
-      return typeof right === "number" && get(vw) >= right;
+      return typeof value === "number" && get(vw) >= value;
     case "max-width":
-      return typeof right === "number" && get(vw) <= right;
+      return typeof value === "number" && get(vw) <= value;
     case "min-height":
-      return typeof right === "number" && get(vh) >= right;
+      return typeof value === "number" && get(vh) >= value;
     case "max-height":
-      return typeof right === "number" && get(vh) <= right;
+      return typeof value === "number" && get(vh) <= value;
     case "orientation":
-      return right === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
+      return value === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
   }
 
-  if (typeof right !== "number") {
+  if (typeof value !== "number") {
     return false;
   }
 
+  let left: number | undefined;
+  const right = value;
+
   switch (mediaQuery[1]) {
     case "width":
       left = get(vw);

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

@@ -1,10 +1,11 @@
 /* eslint-disable */
+import { StyleCollection } from "react-native-css/style-collection";
+
 import type { InlineVariable, StyleRule } from "../../../compiler";
 import { getDeepPath } from "../../utils";
 import { testRule } from "../conditions";
 import { DEFAULT_CONTAINER_NAME } from "../conditions/container-query";
 import type { RenderGuard } from "../conditions/guards";
-import { StyleCollection } from "../injection";
 import {
   activeFamily,
   containerLayoutFamily,
@@ -12,6 +13,7 @@ import {
   hoverFamily,
   VAR_SYMBOL,
   weakFamily,
+  type ContainerContextValue,
   type VariableContextValue,
 } from "../reactivity";
 import { stylesFamily } from "../styles";
@@ -36,11 +38,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];
@@ -68,6 +71,11 @@ export function updateRules(
     if (target) {
       if (Array.isArray(target)) {
         for (const item of target) {
+          // undefined or falsy is allowed in the style array
+          if (!item) {
+            continue;
+          }
+          
           if (VAR_SYMBOL in item) {
             inlineVariables.add(item);
           } else if (
@@ -93,13 +101,20 @@ 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(
@@ -114,11 +129,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) {
@@ -163,7 +175,7 @@ export function updateRules(
 
     if (process.env.NODE_ENV !== "production") {
       if (isRerender) {
-        let pressable = activeFamily.has(state.ruleEffectGetter);
+        const pressable = activeFamily.has(state.ruleEffectGetter);
 
         if (Boolean(variables) !== Boolean(state.variables)) {
           console.log(
@@ -186,11 +198,7 @@ export function updateRules(
     }
   }
 
-  // We only track this in development
-  let pressable =
-    process.env.NODE_ENV === "production"
-      ? undefined
-      : activeFamily.has(state.ruleEffectGetter);
+  pressable = activeFamily.has(state.ruleEffectGetter);
 
   if (!rules.size && !state.stylesObs && !inlineVariables.size) {
     return {
@@ -199,6 +207,8 @@ export function updateRules(
       guards,
       animated,
       pressable,
+      variables,
+      containers,
     };
   }
 

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

@@ -20,8 +20,8 @@ import {
   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 = {

package/src/runtime/native/reactivity.ts

@@ -7,8 +7,7 @@ import {
   type LayoutRectangle,
 } from "react-native";
 
-import type { StyleDescriptor, VariableValue } from "../../compiler";
-import { testMediaQuery } from "./conditions/media-query";
+import type { StyleDescriptor } from "../../compiler";
 
 export type Effect = {
   observers: Set<Effect>;
@@ -190,37 +189,6 @@ export const VariableContext = createContext<VariableContextValue>({
   [VAR_SYMBOL]: true,
 });
 
-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();
-
-/** Units *********************************************************************/
-
-export const rem = observable(14);
-
 /** Pseudo Classes ************************************************************/
 
 export const hoverFamily = weakFamily(() => observable(false));
@@ -237,6 +205,18 @@ export const vh = observable<number>(
   (read, value) => value ?? read(dimensions)?.height,
 );
 
+Dimensions.addEventListener("change", ({ window }) => {
+  observableBatch.current = new Set();
+  vw.set(window.width);
+  vh.set(window.height);
+
+  for (const effect of observableBatch.current) {
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+});
+
 /** Color Scheme **************************************************************/
 
 export const colorScheme = observable<ColorSchemeName>(

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/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,
@@ -136,7 +144,7 @@ export function applyDeclarations(
 
       const shouldDelay = declaration[2];
 
-      if (shouldDelay) {
+      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
@@ -147,10 +155,11 @@ export function applyDeclarations(
          * mutate the props object and not create a new one
          */
         const originalValue = value;
-        value = {};
-        delayedStyles.push(() => {
-          if (target[prop] === value) {
-            delete target[prop];
+        // 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,
@@ -158,8 +167,21 @@ export function applyDeclarations(
               calculateProps,
             });
             applyValue(target, prop, value);
-          }
-        });
+          });
+        } else {
+          delayedStyles.push(() => {
+            if (getDeepPath(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,

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

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