react-native-css 3.0.0 → 3.0.1

package/src/native/react/useNativeCss.ts

@@ -172,29 +172,36 @@ export function useNativeCss(
 export function mappingToConfig(mapping: StyledConfiguration<any>) {
   return Object.entries(mapping).flatMap(([key, value]): Config => {
     if (value === true) {
-      return { source: key, target: key };
+      return {
+        source: key,
+        target: key,
+      };
     } else if (value === false) {
       return { source: key, target: false };
     } else if (typeof value === "string") {
       return { source: key, target: value.split(".") };
     } else if (typeof value === "object") {
+      const nativeStyleMapping = value.nativeStyleMapping as
+        | Record<string, string>
+        | undefined;
+
       if (Array.isArray(value)) {
-        return { source: key, target: value };
+        return { source: key, target: value, nativeStyleMapping };
       }
 
       if ("target" in value) {
         if (value.target === false) {
-          return { source: key, target: false };
+          return { source: key, target: false, nativeStyleMapping };
         } else if (typeof value.target === "string") {
           const target = value.target.split(".");
 
           if (target.length === 1) {
-            return { source: key, target: target[0]! };
+            return { source: key, target: target[0]!, nativeStyleMapping };
           } else {
-            return { source: key, target };
+            return { source: key, target, nativeStyleMapping };
           }
         } else if (Array.isArray(value.target)) {
-          return { source: key, target: value.target };
+          return { source: key, target: value.target, nativeStyleMapping };
         }
       }
     }

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/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,