react-native-css 0.0.0-nightly.008d479

package/src/native-internal/README.md

@@ -0,0 +1,11 @@
+# native-internal
+
+This package is separate from `native` to prevent a circular dependency.
+
+- The `native/index.ts` needs to import the `metro.ts`,
+- `metro.ts` import the `.css` files (as a work around for lazy bundles)
+- `.css` files import the `StyleCollection`
+
+To prevent multiple versions of `StyleCollection` and relative path issues, we created `native-internal` to break the dependency chain.
+
+This package should contain all the singular globals.

package/src/native-internal/index.ts

@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./style-collection";
+export * from "./variables";

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.native.ts

@@ -0,0 +1 @@
+export * from "./native";

package/src/runtime.ts

@@ -0,0 +1 @@
+export * from "./web";

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;
+}