react-native-css 3.0.0-nightly.75f8b74 → 3.0.0-nightly.9c84741

package/src/runtime/native/styles/functions/index.ts

@@ -0,0 +1,7 @@
+export * from "./animation-timing";
+export * from "./calc";
+export * from "./filters";
+export * from "./numeric-functions";
+export * from "./platform-functions";
+export * from "./string-functions";
+export * from "./transform-functions";

package/src/runtime/native/styles/functions/numeric-functions.ts

@@ -0,0 +1,38 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+export const max: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args) || args.some((arg) => typeof arg !== "number")) {
+    return;
+  }
+
+  return Math.max(...(args as number[]));
+};
+
+export const min: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args) || args.some((arg) => typeof arg !== "number")) {
+    return;
+  }
+
+  return Math.min(...(args as number[]));
+};
+
+export const clamp: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  const [clampValue, min, max] = args as number[];
+
+  if (
+    !Array.isArray(args) ||
+    typeof clampValue !== "number" ||
+    typeof min !== "number" ||
+    typeof max !== "number"
+  ) {
+    return;
+  }
+
+  return Math.min(Math.max(clampValue, min), max);
+};

package/src/runtime/native/styles/{platform-functions.ts → functions/platform-functions.ts}

@@ -1,6 +1,6 @@
 import { PixelRatio, PlatformColor, StyleSheet } from "react-native";
 
-import type { StyleFunctionResolver } from "./resolve";
+import type { StyleFunctionResolver } from "../resolve";
 
 export const platformColor: StyleFunctionResolver = (resolveValue, value) => {
   const color: unknown = resolveValue(value[2]);
@@ -25,7 +25,7 @@ export const fontScale: StyleFunctionResolver = () => {
   return PixelRatio.getFontScale();
 };
 
-export const pixelSizeForLayoutSize: StyleFunctionResolver = (
+export const getPixelSizeForLayoutSize: StyleFunctionResolver = (
   resolveValue,
   value,
 ) => {

package/src/runtime/native/styles/functions/string-functions.ts

@@ -0,0 +1,22 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+export const join: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args)) {
+    return args;
+  }
+
+  const array: unknown = args[0];
+  const separator: unknown = args[1] ?? ",";
+
+  if (!Array.isArray(array)) {
+    return array;
+  }
+
+  if (!separator || typeof separator !== "string") {
+    return array.join();
+  }
+
+  return array.join(separator);
+};

package/src/runtime/native/styles/functions/transform-functions.ts

@@ -0,0 +1,84 @@
+import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
+
+export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return { scale: resolveValue(args) };
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+
+  if (isXValid && isYValid) {
+    return x === y ? { scale: x } : [{ scaleX: x }, { scaleY: y }];
+  } else if (isXValid) {
+    return { scaleX: x };
+  } else if (isYValid) {
+    return { scaleY: y };
+  }
+
+  return;
+};
+
+export const rotate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return { rotate: resolveValue(args) };
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+  const z = resolveValue(args[2]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+  const isZValid = typeof z === "string" || typeof z === "number";
+
+  if (isXValid && isYValid && isZValid) {
+    return [{ rotateX: x }, { rotateY: y }, { rotateZ: z }];
+  } else if (isXValid && isYValid) {
+    return [{ rotateX: x }, { rotateY: y }];
+  } else if (isXValid && isZValid) {
+    return [{ rotateX: x }, { rotateZ: z }];
+  } else if (isYValid && isZValid) {
+    return [{ rotateY: y }, { rotateZ: z }];
+  } else if (isXValid) {
+    return { rotateX: x };
+  } else if (isYValid) {
+    return { rotateY: y };
+  } else if (isZValid) {
+    return { rotateZ: z };
+  }
+
+  return;
+};
+
+export const translate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return;
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+
+  if (isXValid && isYValid) {
+    return [{ translateX: x }, { translateY: y }];
+  } else if (isXValid) {
+    return { translateX: x };
+  } else if (isYValid) {
+    return { translateY: y };
+  }
+
+  return;
+};

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/resolve.ts

@@ -7,34 +7,10 @@ import type {
 } from "../../../compiler";
 import type { RenderGuard } from "../conditions/guards";
 import { type Getter, type VariableContextValue } from "../reactivity";
-import { animation, timingFunctionResolver } from "./animation";
-import { border } from "./border";
-import { boxShadow } from "./box-shadow";
-import { calc } from "./calc";
 import type { calculateProps } from "./calculate-props";
 import { transformKeys } from "./defaults";
-import {
-  blur,
-  brightness,
-  contrast,
-  dropShadow,
-  grayscale,
-  hueRotate,
-  invert,
-  opacity,
-  saturate,
-  sepia,
-} from "./filters";
-import {
-  fontScale,
-  hairlineWidth,
-  pixelRatio,
-  pixelSizeForLayoutSize,
-  platformColor,
-  roundToNearestPixel,
-} from "./platform-functions";
-import { textShadow } from "./text-shadow";
-import { transform } from "./transform";
+import * as functions from "./functions";
+import * as shorthands from "./shorthands";
 import { em, rem, vh, vw } from "./units";
 import { varResolver } from "./variables";
 
@@ -57,34 +33,12 @@ export type StyleResolver = (
   options: ResolveValueOptions,
 ) => unknown;
 
-const functions: Record<string, StyleFunctionResolver> = {
-  "@animation": animation,
-  "@border": border,
-  "@boxShadow": boxShadow,
-  "@textShadow": textShadow,
-  "@transform": transform,
-  "animationName": animation,
-  "cubic-bezier": timingFunctionResolver,
-  "steps": timingFunctionResolver,
-  "hue-rotate": hueRotate,
-  "drop-shadow": dropShadow,
-  blur,
-  brightness,
-  calc,
-  contrast,
+const functionResolvers = {
+  ...shorthands,
+  ...functions,
+  animationName: shorthands.animation,
   em,
-  fontScale,
-  grayscale,
-  hairlineWidth,
-  invert,
-  opacity,
-  pixelRatio,
-  pixelSizeForLayoutSize,
-  platformColor,
   rem,
-  roundToNearestPixel,
-  saturate,
-  sepia,
   vh,
   vw,
 };
@@ -116,10 +70,16 @@ export function resolveValue(
     case "number":
     case "boolean":
       return value;
-    case "string":
-      return value.endsWith("px") // Inline vars() might set a value with a px suffix
-        ? parseInt(value.slice(0, -2), 10)
-        : value;
+    case "string": {
+      if (value === "unset") {
+        return null;
+      } else if (value.endsWith("px")) {
+        // Inline vars() might set a value with a px suffix
+        return parseInt(value.slice(0, -2), 10);
+      } else {
+        return value;
+      }
+    }
     case "object": {
       if (!Array.isArray(value)) {
         return value;
@@ -145,8 +105,8 @@ export function resolveValue(
 
       if (name === "var") {
         return varResolver(simpleResolve, value, get, options);
-      } else if (name in functions) {
-        const fn = functions[name];
+      } else if (name in functionResolvers) {
+        const fn = functionResolvers[name as keyof typeof functionResolvers];
 
         if (typeof fn !== "function") {
           throw new Error(`Unknown function: ${name}`);
@@ -160,11 +120,7 @@ export function resolveValue(
         ) as StyleDescriptor;
       } else if (transformKeys.has(name)) {
         // translate, rotate, scale, etc.
-        const args = value[2];
-        return simpleResolve(args, castToArray);
-      } else if (transformKeys.has(name.slice(1))) {
-        // @translate, @rotate, @scale, etc.
-        return { [name.slice(1)]: simpleResolve(value[2], castToArray) };
+        return { [name]: simpleResolve(value[2], castToArray) };
       } else {
         let args = simpleResolve(value[2], castToArray);
 
@@ -178,6 +134,7 @@ export function resolveValue(
               }
               return arg;
             })
+            .filter((value) => value !== "/")
             .join(", ");
 
           if (name === "radial-gradient") {

package/src/runtime/native/styles/{shorthand.ts → shorthands/_handler.ts}

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import { setDeepPath } from "../../utils/objects";
-import { isStyleDescriptorArray } from "../../utils/style-value";
-import { ShortHandSymbol } from "./constants";
-import { defaultValues } from "./defaults";
-import type { StyleResolver } from "./resolve";
+import { setDeepPath } from "../../../utils/objects";
+import { isStyleDescriptorArray } from "../../../utils/style-value";
+import { ShortHandSymbol } from "../constants";
+import { defaultValues } from "../defaults";
+import type { StyleResolver } from "../resolve";
 
 type ShorthandType =
   | "string"

package/src/runtime/native/styles/{animation.ts → shorthands/animation.ts}

@@ -1,11 +1,9 @@
 /* eslint-disable */
-import type { ComponentType } from "react";
+import { StyleCollection } from "react-native-css/style-collection";
 
-import { applyShorthand } from "../../utils";
-import { StyleCollection } from "../injection";
-import { weakFamily } from "../reactivity";
-import type { StyleFunctionResolver } from "./resolve";
-import { shorthandHandler } from "./shorthand";
+import { applyShorthand } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "./_handler";
 
 const name = ["animationName", "string", "none"] as const;
 const delay = ["animationDelay", "number", 0] as const;
@@ -61,22 +59,6 @@ export const animationShorthand = shorthandHandler(
   "tuples",
 );
 
-export const animatedComponentFamily = weakFamily(
-  (component: ComponentType) => {
-    if (
-      "displayName" in component &&
-      component.displayName?.startsWith("Animated.")
-    ) {
-      return component;
-    }
-
-    const createAnimatedComponent =
-      require("react-native-reanimated").createAnimatedComponent;
-
-    return createAnimatedComponent(component);
-  },
-);
-
 export const animation: StyleFunctionResolver = (
   resolveValue,
   value,
@@ -139,43 +121,3 @@ export const animation: StyleFunctionResolver = (
 
   return applyShorthand(animationShortHandTuples);
 };
-
-const advancedTimingFunctions: Record<
-  string,
-  () => (...args: any[]) => unknown
-> = {
-  "cubic-bezier": () => {
-    return (
-      require("react-native-reanimated") as typeof import("react-native-reanimated")
-    ).cubicBezier;
-  },
-  "steps": () => {
-    return (
-      require("react-native-reanimated") as typeof import("react-native-reanimated")
-    ).steps;
-  },
-};
-
-export const timingFunctionResolver: StyleFunctionResolver = (
-  resolveValue,
-  value,
-) => {
-  const name = value[1];
-  const resolver = advancedTimingFunctions[name];
-
-  if (!resolver) {
-    return;
-  }
-
-  const args = resolveValue(value[2]);
-
-  if (!Array.isArray(args)) {
-    return;
-  }
-
-  const fn = resolver();
-
-  const result = fn(...args);
-
-  return result;
-};

package/src/runtime/native/styles/{border.ts → shorthands/border.ts}

@@ -1,4 +1,4 @@
-import { shorthandHandler } from "./shorthand";
+import { shorthandHandler } from "./_handler";
 
 const width = ["borderWidth", "number"] as const;
 const style = ["borderStyle", "string"] as const;

package/src/runtime/native/styles/shorthands/box-shadow.ts

@@ -0,0 +1,74 @@
+import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "./_handler";
+
+const color = ["color", "string"] as const;
+const offsetX = ["offsetX", "number"] as const;
+const offsetY = ["offsetY", "number"] as const;
+const blurRadius = ["blurRadius", "number"] as const;
+const spreadDistance = ["spreadDistance", "number"] as const;
+// const inset = ["inset", "string"] as const;
+
+const handler = shorthandHandler(
+  [
+    [offsetX, offsetY, blurRadius, spreadDistance, color],
+    [color, offsetX, offsetY],
+    [color, offsetX, offsetY, blurRadius],
+    [color, offsetX, offsetY, blurRadius, spreadDistance],
+    [offsetX, offsetY, color],
+    [offsetX, offsetY, blurRadius, color],
+  ],
+  [],
+  "object",
+);
+
+export const boxShadow: StyleFunctionResolver = (
+  resolveValue,
+  func,
+  get,
+  options,
+) => {
+  const args = resolveValue(func[2]);
+
+  if (!isStyleDescriptorArray(args)) {
+    return args;
+  } else {
+    return args
+      .flatMap((shadows) => {
+        if (shadows === undefined) {
+          return [];
+        } else if (isStyleDescriptorArray(shadows)) {
+          if (shadows.length === 0) {
+            return [];
+          } else if (Array.isArray(shadows[0])) {
+            return shadows
+              .map((shadow) => {
+                return omitTransparentShadows(
+                  handler(resolveValue, shadow, get, options),
+                );
+              })
+              .filter((v) => v !== undefined);
+          } else {
+            return omitTransparentShadows(
+              handler(resolveValue, shadows, get, options),
+            );
+          }
+        } else {
+          return omitTransparentShadows(
+            handler(resolveValue, shadows, get, options),
+          );
+        }
+      })
+      .filter((v) => v !== undefined);
+  }
+};
+
+function omitTransparentShadows(style: unknown) {
+  if (typeof style === "object" && style && "color" in style) {
+    if (style.color === "#0000" || style.color === "transparent") {
+      return;
+    }
+  }
+
+  return style;
+}

package/src/runtime/native/styles/shorthands/index.ts

@@ -0,0 +1,5 @@
+export * from "./animation";
+export * from "./border";
+export * from "./box-shadow";
+export * from "./text-shadow";
+export * from "./transform";

package/src/runtime/native/styles/{text-shadow.ts → shorthands/text-shadow.ts}

@@ -1,4 +1,4 @@
-import { shorthandHandler } from "./shorthand";
+import { shorthandHandler } from "./_handler";
 
 const width = [["textShadowOffset", "width"], "number"] as const;
 const height = [["textShadowOffset", "height"], "number"] as const;

package/src/runtime/native/styles/{transform.ts → shorthands/transform.ts}

@@ -1,4 +1,4 @@
-import type { StyleFunctionResolver } from "./resolve";
+import type { StyleFunctionResolver } from "../resolve";
 
 /**
  * Handle the unparsable transform property by converting its values into StyleDeclarations
@@ -11,7 +11,9 @@ export const transform: StyleFunctionResolver = (
   const transforms = resolveValue(transformDescriptor[2]);
 
   if (Array.isArray(transforms)) {
-    return transforms.filter((transform) => transform !== undefined) as unknown;
+    return transforms.filter(
+      (transform) => transform !== undefined && transform !== "initial",
+    ) as unknown;
   } else if (transforms) {
     // If it's a single transform, wrap it in an array
     return [transforms];

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) {
+  if (typeof value !== "number") {
     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,11 @@
-import type { StyleDescriptor, StyleFunction } from "../../../compiler";
-import { isStyleDescriptorArray } from "../../utils";
 import {
   rootVariables,
   universalVariables,
-  VAR_SYMBOL,
-  type Getter,
-} from "../reactivity";
+} from "react-native-css/style-collection";
+
+import type { StyleDescriptor, StyleFunction } from "../../../compiler";
+import { isStyleDescriptorArray } from "../../utils";
+import { VAR_SYMBOL, type Getter } from "../reactivity";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
 export function varResolver(

package/src/runtime/utils/objects.ts

@@ -23,6 +23,10 @@ export function getDeepPath(source: any, paths: string | string[] | false) {
     }
 
     return target;
+  } else if (transformKeys.has(paths)) {
+    return Array.isArray(source?.transform)
+      ? source.transform.find((t: any) => t[paths] !== undefined)
+      : source.transform;
   } else {
     return source?.[paths];
   }
@@ -49,8 +53,13 @@ export function applyValue(
   prop: string,
   value: any,
 ) {
+  // This is confusing.
+  // An undefined value means "don't set anything" (something failed while parsing)
+  // While a null value means "remove this value", which in React Native means "set to undefined"
   if (value === undefined) {
     return;
+  } else if (value === null) {
+    value = undefined;
   }
 
   if (transformKeys.has(prop)) {
@@ -58,12 +67,15 @@ export function applyValue(
       target.transform = [];
     }
 
-    const transform = target.transform.find((t: any) => t[prop] !== undefined);
+    const transformArray: Record<string, unknown>[] = target.transform;
 
-    if (transform) {
-      transform[prop] = value;
+    // Remove any existing values
+    target.transform = transformArray.filter((t) => !(prop in t));
+
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
     } else {
-      target.transform.push({ [prop]: value });
+      target.transform.push(value);
     }
     return;
   } else if (typeof value === "object" && value && ShortHandSymbol in value) {

package/src/runtime/utils/specificity.ts

@@ -8,6 +8,7 @@ export const Specificity = {
   Important: 2,
   Inline: 3,
   PseudoElements: 4,
+  PseudoClass: 1,
   // Id: 0, - We don't support ID yet
   // StyleSheet: 0, - We don't support multiple stylesheets
 };