react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/src/native/styles/variables.ts

@@ -0,0 +1,88 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+import {
+  rootVariables,
+  universalVariables,
+} from "react-native-css/native-internal";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import { VAR_SYMBOL, type Getter } from "../reactivity";
+import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
+
+export function varResolver(
+  resolve: SimpleResolveValue,
+  fn: StyleFunction,
+  get: Getter,
+  options: ResolveValueOptions,
+) {
+  const {
+    renderGuards,
+    inheritedVariables: variables = { [VAR_SYMBOL]: true },
+    inlineVariables,
+    variableHistory = new Set(),
+  } = options;
+
+  const args = fn[2];
+
+  let name: string | undefined;
+  let fallback: StyleDescriptor | undefined;
+
+  if (typeof args === "string") {
+    name = args;
+  } else {
+    const result = resolve(args);
+
+    if (isStyleDescriptorArray(result)) {
+      name = result[0] as string;
+      fallback = result[1];
+    }
+  }
+
+  if (typeof name !== "string") {
+    return;
+  }
+
+  // If this recurses back to the same variable, we need to stop
+  if (variableHistory.has(name)) {
+    return;
+  }
+
+  if (name in variables) {
+    renderGuards?.push(["v", name, variables[name]]);
+    return resolve(variables[name]);
+  }
+
+  variableHistory.add(name);
+
+  let value = resolve(inlineVariables?.[name] as StyleDescriptor);
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+
+    return value;
+  }
+
+  value = resolve(variables[name]);
+  if (value !== undefined) {
+    renderGuards?.push(["v", name, value]);
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+
+    return value;
+  }
+
+  value = resolve(get(universalVariables(name)));
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+    return value;
+  }
+
+  value = resolve(get(rootVariables(name)));
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+    return value;
+  }
+
+  return resolve(fallback);
+}

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.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/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,115 @@
+import {
+  createElement,
+  useMemo,
+  type ComponentProps,
+  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";
+
+export const styled = <
+  const C extends ReactComponent,
+  const M extends StyledConfiguration<C>,
+>(
+  baseComponent: C,
+  mapping: M,
+  _options?: StyledOptions,
+) => {
+  return (props: StyledProps<ComponentProps<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: "content",
+      ...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");
+};