react-native-css 3.0.0 → 3.0.2

package/src/components/TouchableHighlight.tsx

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNTouchableHighlight> = {
   className: "style",
 };
 
-export function TouchableHighlight(
-  props: StyledProps<TouchableHighlightProps, typeof mapping>,
-) {
-  return useCssElement(RNTouchableHighlight, props, mapping);
-}
+export const TouchableHighlight = copyComponentProperties(
+  RNTouchableHighlight,
+  (props: StyledProps<TouchableHighlightProps, typeof mapping>) => {
+    return useCssElement(RNTouchableHighlight, props, mapping);
+  },
+);
 
 export default TouchableHighlight;

package/src/components/TouchableOpacity.tsx

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNTouchableOpacity> = {
   className: "style",
 };
 
-export function TouchableOpacity(
-  props: StyledProps<TouchableOpacityProps, typeof mapping>,
-) {
-  return useCssElement(RNTouchableOpacity, props, mapping);
-}
+export const TouchableOpacity = copyComponentProperties(
+  RNTouchableOpacity,
+  (props: StyledProps<TouchableOpacityProps, typeof mapping>) => {
+    return useCssElement(RNTouchableOpacity, props, mapping);
+  },
+);
 
 export default TouchableOpacity;

package/src/components/TouchableWithoutFeedback.tsx

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback> = {
   className: "style",
 };
 
-export function TouchableWithoutFeedback(
-  props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>,
-) {
-  return useCssElement(RNTouchableWithoutFeedback, props, mapping);
-}
+export const TouchableWithoutFeedback = copyComponentProperties(
+  RNTouchableWithoutFeedback,
+  (props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>) => {
+    return useCssElement(RNTouchableWithoutFeedback, props, mapping);
+  },
+);
 
 export default TouchableWithoutFeedback;

package/src/components/View.tsx

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping = {
   className: "style",
 } satisfies StyledConfiguration<typeof RNView>;
 
-export function View(props: StyledProps<ViewProps, typeof mapping>) {
-  return useCssElement(RNView, props, mapping);
-}
+export const View = copyComponentProperties(
+  RNView,
+  (props: StyledProps<ViewProps, typeof mapping>) => {
+    return useCssElement(RNView, props, mapping);
+  },
+);
 
 export default View;

package/src/components/VirtualizedList.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import {
   VirtualizedList as RNVirtualizedList,
   type VirtualizedListProps,
@@ -9,6 +10,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   className: "style",
   ListFooterComponentClassName: "ListFooterComponentStyle",
@@ -16,10 +19,19 @@ const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   contentContainerClassName: "contentContainerStyle",
 };
 
-export function VirtualizedList<ItemT>(
-  props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
-) {
-  return useCssElement(RNVirtualizedList, props, mapping);
-}
+export const VirtualizedList = copyComponentProperties(
+  RNVirtualizedList,
+  function <ItemT>(
+    props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
+  ) {
+    return useCssElement(RNVirtualizedList, props, mapping);
+  },
+) as unknown as typeof RNVirtualizedList &
+  (<ItemT>(
+    props: StyledProps<
+      VirtualizedListProps<ItemT>,
+      StyledConfiguration<typeof RNVirtualizedList>
+    >,
+  ) => ReactNode);
 
 export default VirtualizedList;

package/src/components/copyComponentProperties.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ComponentType<any>;
+
+export function copyComponentProperties<T extends AnyComponent>(
+  BaseComponent: T,
+  Component: AnyComponent,
+) {
+  for (const [key, value] of Object.entries(BaseComponent)) {
+    if (key === "$$typeof" || key === "render" || key === "contextType") {
+      continue;
+    }
+
+    (Component as unknown as Record<string, unknown>)[key] = value;
+  }
+
+  Component.displayName = BaseComponent.displayName;
+
+  return Component as unknown as T;
+}

package/src/components/index.cts

@@ -25,6 +25,9 @@ module.exports = {
   get Pressable() {
     return require("./Pressable").Pressable;
   },
+  get ScrollView() {
+    return require("./ScrollView").ScrollView;
+  },
   get Switch() {
     return require("./Switch").Switch;
   },
@@ -71,9 +74,6 @@ module.exports = {
   get SafeAreaView() {
     return require("react-native").SafeAreaView;
   },
-  get ScrollView() {
-    return require("react-native").ScrollView;
-  },
   get SectionList() {
     return require("react-native").SectionList;
   },

package/src/metro/resolver.ts

@@ -26,7 +26,7 @@ export function nativeResolver(
   const resolution = resolver(context, moduleName, platform);
   const isInternal = isFromThisModule(context.originModulePath);
   const isReactNativeIndex = context.originModulePath.endsWith(
-    `react-native${sep}index.js`,
+    `${sep}react-native${sep}index.js`,
   );
 
   if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
@@ -73,7 +73,9 @@ export function webResolver(
     // Only operate on source files
     resolution.type !== "sourceFile" ||
     // Skip anything that isn't importing from `react-native-web`
-    !resolution.filePath.includes(`${sep}react-native-web${sep}`)
+    !resolution.filePath.includes(`${sep}react-native-web${sep}`) ||
+    // Skip internal react-native-web files
+    resolution.filePath.includes(`${sep}react-native-web${sep}dist${sep}vendor`)
   ) {
     return resolution;
   }
@@ -83,7 +85,12 @@ export function webResolver(
   const isIndex = segments.at(-1)?.startsWith("index.");
   const module = segments.at(-2);
 
-  if (!isIndex || !module || !allowedModules.has(module)) {
+  if (
+    !isIndex ||
+    !module ||
+    !allowedModules.has(module) ||
+    module === "VirtualizedList"
+  ) {
     return resolution;
   }
 

package/src/native/api.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useState, type ComponentType } from "react";
 import { Appearance } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
@@ -30,6 +30,10 @@ export {
 
 export { useNativeCss };
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
  * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
@@ -41,7 +45,7 @@ export const styled = <
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   options?: StyledOptions,
 ) => {
   let component: any;

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";