react-native-css 0.0.0-nightly.81d3fdb → 0.0.0-nightly.8a01f75

package/src/native/styles/functions/color-mix.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import type { PlainColorObject } from "colorjs.io";
+import {
+  ColorSpace,
+  to as convert,
+  mix,
+  OKLab,
+  P3,
+  parse,
+  sRGB,
+  type ColorConstructor,
+} from "colorjs.io/fn";
+
+import type { StyleFunctionResolver } from "../resolve";
+
+ColorSpace.register(sRGB);
+ColorSpace.register(P3);
+ColorSpace.register(OKLab);
+
+export const colorMix: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args) || args.length < 3) {
+    return;
+  }
+
+  try {
+    const space = args.shift();
+
+    let left: ColorConstructor | PlainColorObject = parse(
+      args.shift() as string,
+    );
+
+    let next = args.shift();
+
+    if (typeof next === "string" && next.endsWith("%")) {
+      left.alpha = parseFloat(next) / 100;
+      next = args.shift();
+    }
+
+    if (next === undefined) {
+      if (left.spaceId !== "srgb") {
+        left = convert(left, "srgb");
+      }
+
+      return `rgba(${(left.coords[0] ?? 0) * 255}, ${(left.coords[1] ?? 0) * 255}, ${(left.coords[2] ?? 0) * 255}, ${left.alpha})`;
+    }
+
+    if (typeof next !== "string") {
+      return;
+    }
+    const right = parse(next);
+
+    next = args.shift();
+    if (next && typeof next === "string" && next.endsWith("%")) {
+      right.alpha = parseFloat(next) / 100;
+    }
+
+    const result = mix(left, right, {
+      space,
+      outputSpace: "srgb",
+    });
+
+    return `rgba(${(result.coords[0] ?? 0) * 255}, ${(result.coords[1] ?? 0) * 255}, ${(result.coords[2] ?? 0) * 255}, ${result.alpha})`;
+  } catch {
+    return;
+  }
+};

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

@@ -5,3 +5,4 @@ export * from "./numeric-functions";
 export * from "./platform-functions";
 export * from "./string-functions";
 export * from "./transform-functions";
+export * from "./color-mix";

package/src/native/styles/index.ts

@@ -49,10 +49,19 @@ export function getStyledProps(
   const styledProps = state.stylesObs?.get(state.styleEffect);
 
   for (const config of state.configs) {
-    result = deepMergeConfig(config, styledProps?.normal, inline, true);
+    result = deepMergeConfig(
+      config,
+      nativeStyleMapping(config, styledProps?.normal),
+      inline,
+      true,
+    );
 
     if (styledProps?.important) {
-      result = deepMergeConfig(config, result, styledProps.important);
+      result = deepMergeConfig(
+        config,
+        result,
+        nativeStyleMapping(config, styledProps.important),
+      );
     }
 
     // Apply the handlers
@@ -122,11 +131,11 @@ function deepMergeConfig(
   right: Record<string, any> | undefined | null,
   rightIsInline = false,
 ) {
-  if (!config.target || !right) {
+  if (!right) {
     return { ...left };
   }
 
-  let result = Object.assign({}, left, right);
+  let result = config.target ? Object.assign({}, left, right) : { ...left };
 
   if (
     right &&
@@ -140,7 +149,7 @@ function deepMergeConfig(
   /**
    *  If target is a path, deep merge until we get to the last key
    */
-  if (Array.isArray(config.target) && config.target.length > 1) {
+  if (Array.isArray(config.target)) {
     for (let i = 0; i < config.target.length - 1; i++) {
       const key = config.target[i];
 
@@ -159,11 +168,9 @@ function deepMergeConfig(
     return result;
   }
 
-  const target = Array.isArray(config.target)
-    ? config.target[0]
-    : config.target;
+  const target = config.target;
 
-  if (target === undefined) {
+  if (target === undefined || target === false) {
     return result;
   }
 
@@ -196,3 +203,59 @@ function deepMergeConfig(
 
   return result;
 }
+
+function nativeStyleMapping(
+  config: Config,
+  props: Record<string, any> | undefined,
+) {
+  if (!config.nativeStyleMapping || !props) {
+    return props;
+  }
+
+  let source: Record<string, any> | undefined;
+
+  if (typeof config.target === "string") {
+    source = props[config.target];
+  } else if (config.target === false) {
+    source = props["style"];
+  } else {
+    const tokens = [...config.target];
+    const lastToken = tokens.pop()!;
+
+    source = props;
+    for (const token of tokens) {
+      source = source[token];
+      if (!source) {
+        return props;
+      }
+    }
+
+    source = source[lastToken];
+  }
+
+  if (!source) {
+    return props;
+  }
+
+  for (const [key, path] of Object.entries(config.nativeStyleMapping)) {
+    const styleValue = source[key];
+
+    delete source[key];
+
+    if (styleValue === undefined) {
+      continue;
+    }
+
+    let target = props;
+    const tokens = path.split(".");
+    const lastToken = tokens.pop();
+    for (const token of tokens) {
+      target[token] ??= {};
+      target = target[token];
+    }
+
+    target[lastToken!] = styleValue;
+  }
+
+  return props;
+}

package/src/native/styles/resolve.ts

@@ -38,7 +38,6 @@ export type StyleResolver = (
 const functionResolvers = {
   ...shorthands,
   ...functions,
-  animationName: shorthands.animation,
   lineHeight,
   em,
   rem,

package/src/native/styles/shorthands/animation.ts

@@ -76,8 +76,6 @@ export const animation: StyleFunctionResolver = (
     return;
   }
 
-  animationShortHandTuples.pop();
-
   const nameTuple = animationShortHandTuples.find(
     (tuple) => tuple[1] === "animationName",
   );
@@ -121,3 +119,13 @@ export const animation: StyleFunctionResolver = (
 
   return applyShorthand(animationShortHandTuples);
 };
+
+export const animationName: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const shorthand: any = animation(resolveValue, value, get, options);
+  return shorthand.animationName;
+};

package/src/utilities/dot-notation.types.ts

@@ -29,9 +29,16 @@ export type StyleProp<T> =
 // ---------- Type Helpers ----------
 
 // Unwrap nested arrays (from RecursiveArray)
-type UnwrapRecursiveArray<T> = T extends (infer I)[]
-  ? UnwrapRecursiveArray<I>
-  : T;
+type UnwrapRecursiveArray<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10
+> = Depth["length"] extends MaxDepth
+  ? T
+  : T extends (infer I)[]
+    ? UnwrapRecursiveArray<I, [...Depth, unknown], MaxDepth>
+    : T;
+
 
 // Remove null, false, undefined, etc.
 type RemoveFalsy<T> = Exclude<T, Falsy>;

package/src/web/api.tsx

@@ -1,7 +1,8 @@
 import {
   createElement,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithRef,
+  type ComponentType,
   type PropsWithChildren,
 } from "react";
 import { Appearance } from "react-native";
@@ -17,15 +18,19 @@ import type {
 import type { ReactComponent } from "../runtime.types";
 import { assignStyle } from "./assign-style";
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 export const styled = <
   const C extends ReactComponent,
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   _options?: StyledOptions,
 ) => {
-  return (props: StyledProps<ComponentProps<C>, M>) => {
+  return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
     return useCssElement(baseComponent, mapping, props);
   };
 };
@@ -93,7 +98,7 @@ export function VariableContextProvider(
 ) {
   const style = useMemo(() => {
     return {
-      display: "content",
+      display: "contents",
       ...Object.fromEntries(
         Object.entries(props.value).map(([key, value]) => [
           key.startsWith("--") ? key : `--${key}`,

package/types.d.ts

@@ -16,6 +16,9 @@ declare module "@react-native/virtualized-lists" {
 }
 
 declare module "react-native" {
+  interface ButtonProps {
+    className?: string;
+  }
   interface ScrollViewProps
     extends ViewProps,
       ScrollViewPropsIOS,

package/dist/commonjs/poison.pill.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["canWarn","process","env","NODE_ENV","Error"],"sourceRoot":"../../src","sources":["poison.pill.ts"],"mappings":";;;;;AAAA,MAAMA,OAAO,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM;AAE/C,IAAIH,OAAO,EAAE;EACX,MAAM,IAAII,KAAK,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF","ignoreList":[]}

package/dist/commonjs/runtime/native/injection.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=injection.js.map

package/dist/commonjs/runtime/native/injection.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["runtime/native/injection.ts"],"mappings":"","ignoreList":[]}

package/dist/module/native/metro.js

@@ -1,5 +0,0 @@
-"use strict";
-
-// This file will be overwritten by Metro
-export {};
-//# sourceMappingURL=metro.js.map

package/dist/module/poison.pill.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["canWarn","process","env","NODE_ENV","Error"],"sourceRoot":"../../src","sources":["poison.pill.ts"],"mappings":";;AAAA,MAAMA,OAAO,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM;AAE/C,IAAIH,OAAO,EAAE;EACX,MAAM,IAAII,KAAK,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF;AAEA","ignoreList":[]}

package/dist/module/runtime/native/injection.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=injection.js.map

package/dist/module/runtime/native/injection.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["runtime/native/injection.ts"],"mappings":"","ignoreList":[]}

package/dist/typescript/commonjs/src/native/metro.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=metro.d.ts.map

package/dist/typescript/commonjs/src/native/metro.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/native/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/dist/typescript/commonjs/src/poison.pill.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=poison.pill.d.ts.map

package/dist/typescript/commonjs/src/poison.pill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"poison.pill.d.ts","sourceRoot":"","sources":["../../../../src/poison.pill.ts"],"names":[],"mappings":"AAmCA,OAAO,EAAE,CAAC"}

package/dist/typescript/commonjs/src/runtime/native/injection.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=injection.d.ts.map

package/dist/typescript/commonjs/src/runtime/native/injection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"injection.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/native/injection.ts"],"names":[],"mappings":""}

package/dist/typescript/module/src/native/metro.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=metro.d.ts.map

package/dist/typescript/module/src/native/metro.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/native/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/dist/typescript/module/src/poison.pill.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=poison.pill.d.ts.map

package/dist/typescript/module/src/poison.pill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"poison.pill.d.ts","sourceRoot":"","sources":["../../../../src/poison.pill.ts"],"names":[],"mappings":"AAmCA,OAAO,EAAE,CAAC"}

package/dist/typescript/module/src/runtime/native/injection.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=injection.d.ts.map

package/dist/typescript/module/src/runtime/native/injection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"injection.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/native/injection.ts"],"names":[],"mappings":""}

package/src/native/metro.ts

@@ -1,2 +0,0 @@
-// This file will be overwritten by Metro
-export {};