react-native-css 0.0.0-nightly.008d479

package/src/web/api.tsx

@@ -0,0 +1,120 @@
+import {
+  createElement,
+  useMemo,
+  type ComponentPropsWithRef,
+  type ComponentType,
+  type PropsWithChildren,
+} from "react";
+import { Appearance } from "react-native";
+
+import type {
+  ColorScheme,
+  Props,
+  StyledConfiguration,
+  StyledOptions,
+  StyledProps,
+} from "react-native-css";
+
+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 = defaultMapping as M,
+  _options?: StyledOptions,
+) => {
+  return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
+    return useCssElement(baseComponent, mapping, props);
+  };
+};
+
+export const useCssElement = <C extends ReactComponent>(
+  component: C,
+  incomingProps: Props,
+  mapping: StyledConfiguration<C>,
+) => {
+  let props = { ...incomingProps };
+
+  for (const [key, value] of Object.entries(mapping)) {
+    const source: unknown = props[key];
+    if (!source) {
+      continue;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete props[key];
+
+    let target: string | boolean =
+      typeof value === "object" ? value.target : value;
+
+    if (typeof target === "boolean") {
+      target = key;
+    }
+
+    props = assignStyle(
+      { $$css: true, [key]: source },
+      target.split("."),
+      props,
+    );
+  }
+
+  return createElement(component, props);
+};
+
+export const colorScheme: ColorScheme = {
+  get() {
+    return Appearance.getColorScheme();
+  },
+  set(name) {
+    Appearance.setColorScheme(name);
+  },
+};
+
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+export function vars(variables: Record<string, string | number>) {
+  const $variables: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(variables)) {
+    if (key.startsWith("--")) {
+      $variables[key] = value.toString();
+    } else {
+      $variables[`--${key}`] = value.toString();
+    }
+  }
+  return $variables;
+}
+
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, string | number> }>,
+) {
+  const style = useMemo(() => {
+    return {
+      display: "contents",
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([key, value]) => [
+          key.startsWith("--") ? key : `--${key}`,
+          value,
+        ]),
+      ),
+    };
+  }, [props.value]);
+
+  return <div style={style}>{props.children}</div>;
+}
+
+export const useNativeVariable = () => {
+  throw new Error("useNativeVariable is not supported in web");
+};
+
+export const useUnstableNativeVariable = () => {
+  throw new Error("useUnstableNativeVariable is not supported in web");
+};

package/src/web/assign-style.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+export function assignStyle(
+  value: Record<string, any>,
+  targets: string[],
+  props: Record<string, any>,
+) {
+  const target = targets.shift();
+
+  if (!target) return {};
+
+  if (targets.length === 0) {
+    if (typeof props[target] === "function") {
+      const cb = props[target];
+      props[target] = (...args: any[]) => {
+        return [cb(...args), value];
+      };
+    } else {
+      props[target] = [props[target], value];
+    }
+    return props;
+  } else {
+    props[target] ??= {};
+    assignStyle(value, targets, props[target]);
+    return props;
+  }
+}

package/src/web/index.ts

@@ -0,0 +1,5 @@
+// Import this file for Metro to override
+import "./metro";
+
+export type * from "../runtime.types";
+export * from "./api";

package/src/web/metro.ts

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

package/types.d.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  ScrollViewProps,
+  ScrollViewPropsAndroid,
+  ScrollViewPropsIOS,
+  Touchable,
+  VirtualizedListProps,
+} from "react-native";
+
+declare module "@react-native/virtualized-lists" {
+  export interface VirtualizedListWithoutRenderItemProps<ItemT>
+    extends ScrollViewProps {
+    ListFooterComponentClassName?: string;
+    ListHeaderComponentClassName?: string;
+  }
+}
+
+declare module "react-native" {
+  interface ButtonProps {
+    className?: string;
+  }
+  interface ScrollViewProps
+    extends ViewProps,
+      ScrollViewPropsIOS,
+      ScrollViewPropsAndroid,
+      Touchable {
+    contentContainerClassName?: string;
+    indicatorClassName?: string;
+  }
+  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+    columnWrapperClassName?: string;
+  }
+  interface ImageBackgroundProps extends ImagePropsBase {
+    imageClassName?: string;
+  }
+  interface ImagePropsBase {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface ViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TextInputProps {
+    placeholderClassName?: string;
+  }
+  interface TextProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface SwitchProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface InputAccessoryViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TouchableWithoutFeedbackProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface StatusBarProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface KeyboardAvoidingViewProps extends ViewProps {
+    contentContainerClassName?: string;
+  }
+  interface ModalBaseProps {
+    presentationClassName?: string;
+  }
+}