react-native-css 3.0.0-nightly.26b272f → 3.0.0-nightly.46bc0ab

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,27 @@
+import {
+  ActivityIndicator as RNActivityIndicator,
+  type ActivityIndicatorProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNActivityIndicator>;
+
+export function ActivityIndicator(
+  props: StyledProps<ActivityIndicatorProps, typeof mapping>,
+) {
+  return useCssElement(RNActivityIndicator, props, mapping);
+}
+
+export default ActivityIndicator;

package/src/components/Button.tsx

@@ -0,0 +1,22 @@
+import { Button as RNButton, type ButtonProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: false,
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNButton>;
+
+export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
+  return useCssElement(RNButton, props, mapping);
+}
+
+export default Button;

package/src/components/FlatList.tsx

@@ -0,0 +1,21 @@
+import { FlatList as RNFlatList, type FlatListProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  columnWrapperStyle: "columnWrapperStyle",
+  listFooterComponentClassName: "ListFooterComponentStyle",
+  listHeaderComponentClassName: "ListHeaderComponentStyle",
+} satisfies StyledConfiguration<typeof RNFlatList>;
+
+export function FlatList<ItemT>(
+  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNFlatList, props, mapping);
+}
+
+export default FlatList;

package/src/components/Image.tsx

@@ -0,0 +1,17 @@
+import { Image as RNImage, type ImageProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNImage>;
+
+export function Image(props: StyledProps<ImageProps, typeof mapping>) {
+  return useCssElement(RNImage, props, mapping);
+}
+
+export default Image;

package/src/components/TextInput.tsx

@@ -0,0 +1,17 @@
+import { TextInput as RNTextInput, type TextInputProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNTextInput>;
+
+export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
+  return useCssElement(RNTextInput, props, mapping);
+}
+
+export default TextInput;

package/src/components/index.tsx

@@ -1,4 +1,9 @@
 export * from "react-native";
 
+export { ActivityIndicator } from "./ActivityIndicator";
+export { Button } from "./Button";
+export { FlatList } from "./FlatList";
+export { Image } from "./Image";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";
 export { View } from "./View";

package/src/jest/index.ts

@@ -32,21 +32,11 @@ const debugDefault = Boolean(
 
 export function registerCSS(
   css: string,
-  {
-    debug = debugDefault,
-    ...options
-  }: CompilerOptions & { debug?: boolean } = {},
+  options: CompilerOptions & { debug?: boolean } = {},
 ) {
-  const logger = debug
-    ? (text: string) => {
-        // Just log the rules
-        if (text.startsWith("[")) {
-          console.log(`Rules:\n---\n${text}`);
-        }
-      }
-    : undefined;
+  const { debug = debugDefault } = options;
+  const compiled = compileWithAutoDebug(css, options);
 
-  const compiled = compile(css, { ...options, logger });
   if (debug) {
     console.log(
       `Compiled:\n---\n${inspect(
@@ -63,3 +53,22 @@ export function registerCSS(
 
   return compiled;
 }
+
+export function compileWithAutoDebug(
+  css: string,
+  {
+    debug = debugDefault,
+    ...options
+  }: CompilerOptions & { debug?: boolean } = {},
+) {
+  const logger = debug
+    ? (text: string) => {
+        // Just log the rules
+        if (text.startsWith("[")) {
+          console.log(`Rules:\n---\n${text}`);
+        }
+      }
+    : undefined;
+
+  return compile(css, { ...options, logger });
+}

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

@@ -38,6 +38,8 @@ function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
   const right = mediaQuery[2];
 
   switch (mediaQuery[1]) {
+    case "hover":
+      return true;
     case "platform":
       return right === "native" || right === Platform.OS;
     case "prefers-color-scheme": {

package/src/runtime/native/injection.ts

@@ -3,6 +3,7 @@ import type {
   ReactNativeCssStyleSheet,
   StyleRuleSet,
 } from "../../compiler";
+import { DEFAULT_CONTAINER_NAME } from "./conditions/container-query";
 import {
   family,
   observable,
@@ -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/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,6 +102,16 @@ 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,
@@ -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) {
@@ -199,6 +207,7 @@ export function updateRules(
       guards,
       animated,
       pressable,
+      variables,
     };
   }
 

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/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,7 +4,7 @@ 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,
@@ -147,9 +147,10 @@ export function applyDeclarations(
          * mutate the props object and not create a new one
          */
         const originalValue = value;
-        value = {};
+        // This needs to be a object with the [prop] so we can discover in transform arrays
+        value = { [prop]: true };
         delayedStyles.push(() => {
-          if (target[prop] === value) {
+          if (getDeepPath(target, prop) === value) {
             delete target[prop];
             value = resolveValue(originalValue, get, {
               inlineVariables,

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

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

package/src/runtime/native/styles/functions/animation-timing.ts

@@ -0,0 +1,44 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+const advancedTimingFunctions: Record<
+  string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  () => (...args: any[]) => unknown
+> = {
+  cubicBezier: () => {
+    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;
+  },
+};
+
+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();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  const result = fn(...args);
+
+  return result;
+};
+
+export const cubicBezier = timingFunctionResolver;
+export const steps = timingFunctionResolver;

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

@@ -1,6 +1,6 @@
 /* eslint-disable */
-import { isStyleDescriptorArray } from "../../utils";
-import type { StyleFunctionResolver } from "./resolve";
+import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
 
 const calcPrecedence: Record<string, number> = {
   "+": 1,

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

@@ -1,6 +1,6 @@
-import { isStyleDescriptorArray } from "../../utils";
-import type { StyleFunctionResolver } from "./resolve";
-import { shorthandHandler } from "./shorthand";
+import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "../shorthands/_handler";
 
 export const blur: StyleFunctionResolver = (resolveValue, value) => {
   const args = resolveValue(value[2]);

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

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

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/transform-functions.ts

@@ -0,0 +1,51 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const values = resolveValue(descriptor[2]);
+
+  if (Array.isArray(values)) {
+    const [x, y] = values as [string | number][];
+
+    if (values.length === 2 && x === y) {
+      return { scale: x };
+    } else if (values.length === 2) {
+      return [{ scaleX: x }, { scaleY: y }];
+    } else {
+      return { scale: x };
+    }
+  } else {
+    return { scale: values };
+  }
+};
+
+export const rotate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const values = resolveValue(descriptor[2]);
+
+  if (Array.isArray(values)) {
+    const [x, y, z] = values as [string | number][];
+
+    if (values.length === 3 && x === y && x === z) {
+      return { rotate: values };
+    } else if (values.length === 3) {
+      return [{ rotateX: x }, { rotateY: y }, { rotateZ: z }];
+    } else if (values.length === 2) {
+      return [{ rotateX: x }, { rotateY: y }];
+    } else {
+      return { rotate: values };
+    }
+  } else {
+    return { rotate: values };
+  }
+};
+
+export const translate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const values = resolveValue(descriptor[2]);
+
+  if (Array.isArray(values)) {
+    const [x, y] = values as [string | number][];
+
+    return [{ translateX: x }, { translateY: y }];
+  } else {
+    return { translateX: values };
+  }
+};

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"