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

package/src/runtime/native/styles/variables.ts

@@ -1,88 +0,0 @@
-import {
-  rootVariables,
-  universalVariables,
-} from "react-native-css/style-collection";
-
-import type { StyleDescriptor, StyleFunction } from "../../../compiler";
-import { isStyleDescriptorArray } from "../../utils";
-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 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/runtime/runtime.types.ts

@@ -1,130 +0,0 @@
-/* eslint-disable */
-import type { ComponentProps, ComponentType, ReactElement } from "react";
-import type {
-  ColorSchemeName,
-  ImageStyle,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
-
-import type { ComponentPropsDotNotation, ReactComponent } from "./utils";
-import type { DotNotation, ResolveDotPath } from "./utils/dot-notation.types";
-
-/********************************     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<any>,
-  const M extends StyledConfiguration<C>,
->(
-  component: C,
-  mapping: M & StyledConfiguration<C>,
-  options?: StyledOptions,
-) => StyledComponent<C, M>;
-
-type StyledComponent<
-  C extends ReactComponent<any>,
-  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<any>,
-  K extends string = string,
-> = Record<
-  K,
-  | boolean
-  | ComponentPropsDotNotation<C>
-  | StyledConfigurationObject<C, ComponentPropsDotNotation<C> | false>
->;
-
-type StyledConfigurationObject<
-  C extends ReactComponent<any>,
-  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 type StyledOptions = {
-  passThrough?: boolean;
-};
-
-/********************************    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 type ColorScheme = {
-  get: () => ColorSchemeName;
-  set: (value: ColorSchemeName) => void;
-};

package/src/runtime/utils/components.ts

@@ -1,15 +0,0 @@
-/* eslint-disable */
-const ForwardRefSymbol = Symbol.for("react.forward_ref");
-export function getComponentType(component: any) {
-  switch (typeof component) {
-    case "function":
-    case "object":
-      return "$$typeof" in component && component.$$typeof === ForwardRefSymbol
-        ? "forwardRef"
-        : component.prototype?.isReactComponent
-          ? "class"
-          : typeof component;
-    default:
-      return "unknown";
-  }
-}

package/src/runtime/utils/index.ts

@@ -1,5 +0,0 @@
-export * from "./objects";
-export * from "./components";
-export * from "./specificity";
-export * from "./style-value";
-export * from "./utils.types";

package/src/runtime/utils/specificity.ts

@@ -1,45 +0,0 @@
-/* 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/runtime/utils/style-value.ts

@@ -1,24 +0,0 @@
-import type { StyleDescriptor, StyleFunction } from "../../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/runtime/utils/utils.types.ts

@@ -1,19 +0,0 @@
-/* eslint-disable */
-import type {
-  ClassicComponentClass,
-  ComponentClass,
-  ComponentProps,
-  ForwardRefExoticComponent,
-  FunctionComponent,
-} from "react";
-
-import type { DotNotation } from "./dot-notation.types";
-
-export type ReactComponent<P = any> =
-  | ClassicComponentClass<P>
-  | ComponentClass<P>
-  | FunctionComponent<P>
-  | ForwardRefExoticComponent<P>;
-
-export type ComponentPropsDotNotation<C extends ReactComponent<any>> =
-  DotNotation<ComponentProps<C>>;

package/src/runtime/web/api.tsx

@@ -1,114 +0,0 @@
-import {
-  createElement,
-  useMemo,
-  type ComponentProps,
-  type PropsWithChildren,
-} from "react";
-import { Appearance } from "react-native";
-
-import type {
-  ColorScheme,
-  Props,
-  StyledConfiguration,
-  StyledOptions,
-  StyledProps,
-} from "../runtime.types";
-import type { ReactComponent } from "../utils";
-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> }>,
-) {
-  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");
-};

package/src/runtime/web/metro.ts

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

package/src/style-collection/index.ts

@@ -1,142 +0,0 @@
-import type {
-  Animation,
-  ReactNativeCssStyleSheet,
-  StyleRuleSet,
-} from "react-native-css/compiler";
-
-import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
-import {
-  family,
-  observable,
-  observableBatch,
-  type Observable,
-} from "../runtime/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;
-}
-
-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/style-collection/root.ts

@@ -1,37 +0,0 @@
-import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
-
-import { testMediaQuery } from "../runtime/native/conditions/media-query";
-import {
-  family,
-  observable,
-  type Observable,
-} from "../runtime/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]]);