react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.7da12fa

package/src/native-internal/root.ts

@@ -0,0 +1,44 @@
+import { Platform, PlatformColor } from "react-native";
+
+import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+
+import { testMediaQuery } from "../native/conditions/media-query";
+import { family, observable, type Observable } from "../native/reactivity";
+
+const rootVariableFamily = () => {
+  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
+    const obs = observable<StyleDescriptor, VariableValue[]>(
+      (read, variableValue) => {
+        if (!variableValue) return undefined;
+
+        for (const [value, mediaQuery] of variableValue) {
+          if (!mediaQuery) {
+            return value;
+          }
+
+          if (testMediaQuery(mediaQuery, read)) {
+            return value;
+          }
+        }
+
+        return undefined;
+      },
+    );
+
+    return obs;
+  });
+};
+
+export const rootVariables = rootVariableFamily();
+export const universalVariables = rootVariableFamily();
+
+rootVariables("__rn-css-rem").set([[14]]);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+rootVariables("__rn-css-color").set([
+  [
+    Platform.OS === "ios"
+      ? PlatformColor("label", "labelColor")
+      : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
+  ],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+] as any);

package/src/native-internal/style-collection.ts

@@ -0,0 +1,148 @@
+import { type Context } from "react";
+
+import type {
+  Animation,
+  ReactNativeCssStyleSheet,
+  StyleRuleSet,
+} from "react-native-css/compiler";
+
+import { DEFAULT_CONTAINER_NAME } from "../native/conditions/container-query";
+import {
+  family,
+  observable,
+  observableBatch,
+  type Observable,
+  type VariableContextValue,
+} from "../native/reactivity";
+import { rootVariables, universalVariables } from "./root";
+
+export { rootVariables, universalVariables };
+
+interface StyleCollectionType {
+  styles: ReturnType<typeof family<string, Observable<StyleRuleSet>>>;
+  keyframes: ReturnType<typeof family<string, Observable<Animation[1]>>>;
+  inject: (options: ReactNativeCssStyleSheet) => void;
+}
+
+declare global {
+  var __react_native_css_style_collection: StyleCollectionType | undefined;
+  var __react_native_css_variable_context:
+    | Context<VariableContextValue>
+    | undefined;
+}
+
+globalThis.__react_native_css_style_collection ??= {
+  styles: family<string, Observable<StyleRuleSet>>(() => {
+    return observable([], isDeepEqual);
+  }),
+  keyframes: family<string, Observable<Animation[1]>>(() => {
+    return observable([], isDeepEqual);
+  }),
+  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]);
+      }
+    }
+
+    if (options.k) {
+      for (const keyframes of options.k) {
+        StyleCollection.keyframes(keyframes[0]).set(keyframes[1]);
+      }
+    }
+
+    if (options.vr) {
+      for (const entry of options.vr) {
+        rootVariables(entry[0]).set(entry[1]);
+      }
+    }
+
+    if (options.vu) {
+      for (const entry of options.vu) {
+        rootVariables(entry[0]).set(entry[1]);
+      }
+    }
+
+    for (const effect of observableBatch.current) {
+      effect.run();
+    }
+
+    observableBatch.current = undefined;
+  },
+};
+
+export const StyleCollection = globalThis.__react_native_css_style_collection;
+
+function isDeepEqual(a: unknown, b: unknown): boolean {
+  const aArray = Array.isArray(a);
+  const bArray = Array.isArray(b);
+  const requiresKeyComparison =
+    typeof a === "object" && typeof b === "object" && aArray === bArray;
+
+  // Only compare keys when both are an object or array
+  // This does not account for complex types like Date/Regex, because we don't use them
+  if (!requiresKeyComparison) return a === b;
+
+  // Make either are not null
+  if (!a || !b) {
+    return a === b;
+  }
+
+  // Shortcut for arrays
+  if (aArray && bArray && a.length !== b.length) {
+    return false;
+  }
+
+  // Compare a to b
+  for (const key in a) {
+    if (
+      !isDeepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  // Compare b to a
+  for (const key in b) {
+    if (!(key in a)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/native-internal/variables.tsx

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+} from "react";
+
+import type { StyleDescriptor } from "react-native-css/compiler";
+
+import { VAR_SYMBOL, type VariableContextValue } from "../native/reactivity";
+
+globalThis.__react_native_css_variable_context ??=
+  createContext<VariableContextValue>({
+    [VAR_SYMBOL]: true,
+  });
+
+export const VariableContext = globalThis.__react_native_css_variable_context;
+
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, StyleDescriptor> }>,
+) {
+  const inheritedVariables = useContext(VariableContext);
+
+  const value: VariableContextValue = useMemo(
+    () => ({
+      ...inheritedVariables,
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
+      ),
+      [VAR_SYMBOL]: true,
+    }),
+    [inheritedVariables, props.value],
+  );
+
+  return <VariableContext value={value}>{props.children}</VariableContext>;
+}

package/src/runtime.types.ts

@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  ClassicComponentClass,
+  ComponentClass,
+  ComponentProps,
+  ComponentType,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  ReactElement,
+} from "react";
+import type {
+  ColorSchemeName,
+  ImageStyle,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+
+import type { DotNotation, ResolveDotPath } from "react-native-css/utilities";
+
+/********************************     API      ********************************/
+
+export type StyledReactElement<
+  C extends ReactComponent,
+  M extends StyledConfiguration<C>,
+> = ReactElement<
+  ComponentProps<C> & {
+    [K in keyof M as K extends string
+      ? M[K] extends undefined | false
+        ? never
+        : M[K] extends true | string | object
+          ? K
+          : never
+      : never]?: string;
+  }
+>;
+
+export type StyledProps<P, M extends StyledConfiguration<any>> = P & {
+  [K in keyof M as K extends string
+    ? M[K] extends undefined | false
+      ? never
+      : M[K] extends true | string | object
+        ? K
+        : never
+    : never]?: string;
+};
+
+export type Styled = <
+  const C extends ReactComponent,
+  const M extends StyledConfiguration<C>,
+>(
+  component: C,
+  mapping: M & StyledConfiguration<C>,
+  options?: StyledOptions,
+) => StyledComponent<C, M>;
+
+type StyledComponent<
+  C extends ReactComponent,
+  M extends StyledConfiguration<C>,
+> = ComponentType<
+  ComponentProps<C> & {
+    [K in keyof M as K extends string
+      ? M[K] extends undefined | false
+        ? never
+        : M[K] extends true | string | object
+          ? K
+          : never
+      : never]?: string;
+  }
+>;
+
+export type StyledConfiguration<
+  C extends ReactComponent,
+  K extends string = string,
+> = Record<
+  K,
+  | boolean
+  | ComponentPropsDotNotation<C>
+  | StyledConfigurationObject<C, ComponentPropsDotNotation<C> | false>
+>;
+
+interface StyledConfigurationObject<
+  C extends ReactComponent,
+  T extends ComponentPropsDotNotation<C> | false,
+> {
+  target: T;
+  nativeStyleMapping?: T extends false
+    ? NativeStyleMapping<string, ComponentProps<C>>
+    : NativeStyleMapping<
+        ResolveDotPath<T, ComponentProps<C>>,
+        ComponentProps<C>
+      >;
+  /** @deprecated Please use nativeStyleMapping */
+  nativeStyleToProp?: NativeStyleMapping<
+    ResolveDotPath<T, ComponentProps<C>>,
+    ComponentProps<C>
+  >;
+}
+
+type NativeStyleMapping<T, S> = T extends object
+  ? {
+      [K in keyof T as K extends string ? K : never]: true | DotNotation<S>;
+    } & {
+      fill?: true | DotNotation<S>;
+      stroke?: true | DotNotation<S>;
+    }
+  : Record<string, true | DotNotation<S>>;
+
+export interface StyledOptions {
+  passThrough?: boolean;
+}
+
+/***************************     React Helpers      ***************************/
+
+export type ReactComponent<P = any> =
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  | ClassicComponentClass<P>
+  | ComponentClass<P>
+  | FunctionComponent<P>
+  | ForwardRefExoticComponent<P>;
+
+export type ComponentPropsDotNotation<C extends ReactComponent> = DotNotation<
+  ComponentProps<C>
+>;
+
+/********************************    Styles    ********************************/
+
+export type InlineStyleRecord = Record<string, unknown> & {
+  // Used to differentiate between InlineStyleRecord and StyleRule
+  s?: never;
+};
+
+export type InlineStyle =
+  | InlineStyleRecord
+  | undefined
+  | null
+  | (Record<string, unknown> | undefined | null)[]
+  | (() => unknown);
+
+/*********************************    Misc    *********************************/
+
+export type Props = Record<string, any> | undefined | null;
+export type Callback = () => void;
+export type RNStyle = ViewStyle & TextStyle & ImageStyle;
+
+/********************************    Globals    ********************************/
+
+export interface ColorScheme {
+  get: () => ColorSchemeName;
+  set: (value: ColorSchemeName) => void;
+}

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

@@ -0,0 +1,125 @@
+/* eslint-disable */
+// ---------- Base Utilities ----------
+
+type Falsy = undefined | null | false | "";
+type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
+
+type Primitive =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined
+  | Date
+  | RegExp
+  | false
+  | true;
+
+interface RecursiveArray<T>
+  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
+
+export type StyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy;
+
+// ---------- Type Helpers ----------
+
+// Unwrap nested arrays (from RecursiveArray)
+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>;
+
+// Remove RegisteredStyle (branded numbers)
+type RemoveRegisteredStyle<T> = T extends RegisteredStyle<any> ? never : T;
+
+// Final cleaned style object from StyleProp<T>
+type ExtractStyleObject<T> = RemoveRegisteredStyle<
+  RemoveFalsy<UnwrapRecursiveArray<T extends StyleProp<infer U> ? U : T>>
+>;
+
+// Check if something is a non-array plain object
+type IsPlainObject<T> = T extends object
+  ? T extends Function
+    ? false
+    : T extends readonly any[]
+      ? false
+      : true
+  : false;
+
+// ---------- Resolve Path Type Helpers ----------
+
+type Split<
+  T extends string,
+  Delimiter extends string,
+> = T extends `${infer Head}${Delimiter}${infer Tail}`
+  ? [Head, ...Split<Tail, Delimiter>]
+  : [T];
+
+// Special parser to break down dot + bracket notation (e.g., "users[0].name")
+type ParsePath<T extends string> =
+  T extends `${infer Head}[${number}]${infer Rest}`
+    ? [Head, number, ...ParsePath<Rest extends `.${infer R}` ? R : Rest>]
+    : Split<T, ".">;
+
+type ResolvePath<T, Parts extends readonly any[]> = Parts extends [
+  infer Head,
+  ...infer Rest,
+]
+  ? Head extends keyof T
+    ? ResolvePath<T[Head], Rest>
+    : Head extends number
+      ? T extends (infer U)[]
+        ? ResolvePath<U, Rest>
+        : never
+      : never
+  : T;
+
+// ---------- Dot Notation Utility ----------
+
+export type DotNotation<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10,
+  Key extends keyof T = keyof T,
+> = Depth["length"] extends MaxDepth
+  ? never
+  : Key extends string
+    ? unknown extends T[Key]
+      ? Key | `${Key}.${string}`
+      : // Handle StyleProp<T> and clean unions
+        ExtractStyleObject<NonNullable<T[Key]>> extends infer Cleaned
+        ? Cleaned extends Primitive
+          ? Key
+          : Cleaned extends readonly (infer E)[]
+            ? E extends Primitive
+              ? Key | `${Key}[number]`
+              :
+                  | Key
+                  | `${Key}[number]`
+                  | `${Key}[number].${DotNotation<E, [...Depth, 0], MaxDepth>}`
+            : IsPlainObject<Cleaned> extends true
+              ? Key | `${Key}.${DotNotation<Cleaned, [...Depth, 0], MaxDepth>}`
+              : Key
+        : never
+    : never;
+
+// ---------- Resolve Dot Path ----------
+
+export type ResolveDotPath<T, Path extends string> = ResolvePath<
+  T,
+  ParsePath<Path>
+>;

package/src/utilities/index.ts

@@ -0,0 +1,3 @@
+export * from "./specificity";
+export * from "./style-descriptor";
+export * from "./dot-notation.types";

package/src/utilities/specificity.ts

@@ -0,0 +1,45 @@
+/* eslint-disable */
+import type { SpecificityArray, StyleRule } from "../compiler";
+import type { InlineStyleRecord } from "../runtime.types";
+
+export const Specificity = {
+  Order: 0,
+  ClassName: 1,
+  Important: 2,
+  Inline: 3,
+  PseudoElements: 4,
+  PseudoClass: 1,
+  // Id: 0, - We don't support ID yet
+  // StyleSheet: 0, - We don't support multiple stylesheets
+};
+
+const Important = Specificity.Important;
+const Inline = Specificity.Inline;
+const PseudoElements = Specificity.PseudoElements;
+const ClassName = Specificity.ClassName;
+const Order = Specificity.Order;
+
+export const inlineSpecificity: SpecificityArray = [];
+inlineSpecificity[Specificity.Inline] = 1;
+
+export const specificityCompareFn = (
+  a: StyleRule | InlineStyleRecord,
+  b: StyleRule | InlineStyleRecord,
+) => {
+  const aSpec = a.s ? a.s : inlineSpecificity;
+  const bSpec = b.s ? b.s : inlineSpecificity;
+
+  if (aSpec[Important] !== bSpec[Important]) {
+    return (aSpec[Important] || 0) - (bSpec[Important] || 0);
+  } else if (aSpec[Inline] !== bSpec[Inline]) {
+    return (aSpec[Inline] || 0) - (bSpec[Inline] || 0);
+  } else if (aSpec[PseudoElements] !== bSpec[PseudoElements]) {
+    return (aSpec[PseudoElements] || 0) - (bSpec[PseudoElements] || 0);
+  } else if (aSpec[ClassName] !== bSpec[ClassName]) {
+    return (aSpec[ClassName] || 0) - (bSpec[ClassName] || 0);
+  } else if (aSpec[Order] !== bSpec[Order]) {
+    return (aSpec[Order] || 0) - (bSpec[Order] || 0);
+  } else {
+    return 0;
+  }
+};

package/src/utilities/style-descriptor.ts

@@ -0,0 +1,24 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+
+export function isStyleDescriptorArray(
+  value: unknown,
+): value is StyleDescriptor[] {
+  if (Array.isArray(value)) {
+    // If its an array and the first item is an object, the only allowed value is an array
+    return typeof value[0] === "object" ? Array.isArray(value[0]) : true;
+  }
+
+  return false;
+}
+
+export function isStyleFunction(
+  value: StyleDescriptor,
+): value is StyleFunction {
+  if (Array.isArray(value)) {
+    return typeof value[0] === "object"
+      ? Object.keys(value[0]).length === 0
+      : false;
+  }
+
+  return false;
+}

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, props, mapping);
+  };
+};
+
+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/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,