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

package/src/runtime/native/styles/shorthands/animation.ts

@@ -1,123 +0,0 @@
-/* eslint-disable */
-import { StyleCollection } from "react-native-css/style-collection";
-
-import { applyShorthand } from "../../../utils";
-import type { StyleFunctionResolver } from "../resolve";
-import { shorthandHandler } from "./_handler";
-
-const name = ["animationName", "string", "none"] as const;
-const delay = ["animationDelay", "number", 0] as const;
-const duration = ["animationDuration", "number", 0] as const;
-const iteration = [
-  "animationIterationCount",
-  ["number", "infinite"],
-  1,
-] as const;
-const fill = [
-  "animationFillMode",
-  ["none", "forwards", "backwards", "both"],
-  "none",
-] as const;
-const playState = [
-  "animationPlayState",
-  ["running", "paused"],
-  "running",
-] as const;
-const direction = [
-  "animationDirection",
-  ["normal", "reverse", "alternate", "alternate-reverse"],
-  "normal",
-] as const;
-const timingFunction = [
-  "animationTimingFunction",
-  ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "object"],
-  "ease",
-] as const;
-
-export const animationShorthand = shorthandHandler(
-  [
-    [name],
-    [duration, name],
-    [name, duration],
-    [name, duration, iteration],
-    [name, duration, timingFunction, iteration],
-    [duration, delay, name],
-    [duration, delay, iteration, name],
-    [duration, delay, iteration, timingFunction, name],
-    [name, duration, timingFunction, delay, iteration, fill],
-  ],
-  [
-    name,
-    delay,
-    direction,
-    duration,
-    fill,
-    iteration,
-    playState,
-    timingFunction,
-  ],
-  "tuples",
-);
-
-export const animation: StyleFunctionResolver = (
-  resolveValue,
-  value,
-  get,
-  options,
-) => {
-  const animationShortHandTuples = animationShorthand(
-    resolveValue,
-    value,
-    get,
-    options,
-  );
-
-  if (!Array.isArray(animationShortHandTuples)) {
-    return;
-  }
-
-  animationShortHandTuples.pop();
-
-  const nameTuple = animationShortHandTuples.find(
-    (tuple) => tuple[1] === "animationName",
-  );
-
-  const name = nameTuple?.[0];
-
-  if (!nameTuple || typeof name !== "string") {
-    return;
-  }
-
-  const keyframes = get(StyleCollection.keyframes(name));
-
-  const animation: Record<string, any> = {};
-  for (const [progress, declarations] of keyframes) {
-    animation[progress] ??= {};
-
-    const props = options.calculateProps?.(
-      get,
-      // Cast this into a StyleRule[]
-      [{ s: [0], d: declarations }],
-      options.renderGuards,
-      options.inheritedVariables,
-      options.inlineVariables,
-    );
-
-    if (!props) {
-      continue;
-    }
-
-    if (props.normal) {
-      Object.assign(animation[progress], props.normal);
-    }
-    if (props.important) {
-      Object.assign(animation[progress], props.important);
-    }
-
-    animation[progress] = animation[progress].style;
-  }
-
-  nameTuple[0] = animation;
-
-  return applyShorthand(animationShortHandTuples);
-};

package/src/runtime/native/styles/shorthands/box-shadow.ts

@@ -1,80 +0,0 @@
-import type { StyleDescriptor } from "../../../../compiler";
-import { isStyleDescriptorArray } from "../../../utils";
-import type { StyleFunctionResolver } from "../resolve";
-import { shorthandHandler } from "./_handler";
-
-const color = ["color", "string"] as const;
-const offsetX = ["offsetX", "number"] as const;
-const offsetY = ["offsetY", "number"] as const;
-const blurRadius = ["blurRadius", "number"] as const;
-const spreadDistance = ["spreadDistance", "number"] as const;
-// const inset = ["inset", "string"] as const;
-
-function deepFlattenToArrayOfStyleDescriptors(
-  arr: StyleDescriptor[],
-): StyleDescriptor[] {
-  const result: StyleDescriptor[] = [];
-  const stack = [arr];
-  while (stack.length > 0) {
-    const current = stack.pop();
-    if (Array.isArray(current)) {
-      if (current.length > 0 && Array.isArray(current[0])) {
-        for (let i = current.length - 1; i >= 0; i--) {
-          const elem = current[i];
-          if (isStyleDescriptorArray(elem)) stack.push(elem);
-        }
-      } else {
-        result.push(current);
-      }
-    }
-  }
-  return result;
-}
-
-const handler = shorthandHandler(
-  [
-    [offsetX, offsetY, blurRadius, spreadDistance, color],
-    [color, offsetX, offsetY],
-    [color, offsetX, offsetY, blurRadius],
-    [color, offsetX, offsetY, blurRadius, spreadDistance],
-    [offsetX, offsetY, color],
-    [offsetX, offsetY, blurRadius, color],
-  ],
-  [],
-  "object",
-);
-
-export const boxShadow: StyleFunctionResolver = (
-  resolveValue,
-  func,
-  get,
-  options,
-) => {
-  const args = resolveValue(func[2]);
-
-  if (!isStyleDescriptorArray(args)) {
-    return args;
-  } else {
-    return deepFlattenToArrayOfStyleDescriptors(args)
-      .map((shadows) => {
-        if (shadows === undefined) {
-          return [];
-        } else {
-          return omitTransparentShadows(
-            handler(resolveValue, shadows, get, options),
-          );
-        }
-      })
-      .filter((v) => v !== undefined);
-  }
-};
-
-function omitTransparentShadows(style: unknown) {
-  if (typeof style === "object" && style && "color" in style) {
-    if (style.color === "#0000" || style.color === "transparent") {
-      return;
-    }
-  }
-
-  return style;
-}

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");
-};