react-native-css 0.0.0-nightly.96f5ce2 → 0.0.0-nightly.a50d7d1

package/src/runtime/native/api.tsx

@@ -1,135 +0,0 @@
-/* eslint-disable  */
-import { useContext, useMemo, useState, type PropsWithChildren } from "react";
-import { Appearance } from "react-native";
-
-import type { StyleDescriptor } from "../../compiler";
-import type {
-  ColorScheme,
-  Props,
-  StyledConfiguration,
-  StyledOptions,
-} from "../runtime.types";
-import type { ReactComponent } from "../utils";
-import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
-import { usePassthrough } from "./react/usePassthrough";
-import {
-  colorScheme as colorSchemeObs,
-  VAR_SYMBOL,
-  VariableContext,
-  type Effect,
-  type Getter,
-  type VariableContextValue,
-} from "./reactivity";
-import { resolveValue } from "./styles/resolve";
-
-export { StyleCollection } from "react-native-css/style-collection";
-
-export { useNativeCss };
-
-/**
- * Generates a new Higher-Order component the wraps the base component and applies the styles.
- * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
- * @param baseComponent
- * @param mapping
- */
-export const styled = <
-  const C extends ReactComponent<any>,
-  const M extends StyledConfiguration<C>,
->(
-  baseComponent: C,
-  mapping: M,
-  options?: StyledOptions,
-) => {
-  let component: any;
-  // const type = getComponentType(baseComponent);
-
-  const configs = mappingToConfig(mapping);
-
-  if (options?.passThrough) {
-    component = (props: Record<string, any>) => {
-      return usePassthrough(baseComponent, props, configs);
-    };
-  } else {
-    component = (props: Record<string, any>) => {
-      return useNativeCss(baseComponent, props, configs);
-    };
-  }
-
-  const name = baseComponent.displayName ?? baseComponent.name ?? "unknown";
-  component.displayName = `CssInterop.${name}`;
-  return component;
-};
-
-export const colorScheme: ColorScheme = {
-  get() {
-    return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
-  },
-  set(value) {
-    return colorSchemeObs.set(value);
-  },
-};
-
-export const useUnstableNativeVariable = useNativeVariable;
-
-export const useCssElement = <
-  const C extends ReactComponent<any>,
-  const M extends StyledConfiguration<C>,
->(
-  component: C,
-  incomingProps: Props,
-  mapping: M,
-) => {
-  const [config] = useState(() => mappingToConfig(mapping));
-  return useNativeCss(component, incomingProps, config);
-};
-
-export function useNativeVariable(name: string) {
-  if (name.startsWith("--")) {
-    name = name.slice(2);
-  }
-
-  const inheritedVariables = useContext(VariableContext);
-  const [effect, setState] = useState(() => {
-    const effect: Effect = {
-      observers: new Set(),
-      run: () => setState((state) => ({ ...state })),
-    };
-
-    const get: Getter = (observable) => observable.get(effect);
-
-    return { ...effect, get };
-  });
-
-  return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
-}
-
-/**
- * @deprecated Use `<VariableContextProvider />` instead.
- */
-export function vars(variables: Record<string, StyleDescriptor>) {
-  return Object.assign(
-    { [VAR_SYMBOL]: "inline" },
-    Object.fromEntries(
-      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
-    ),
-  );
-}
-
-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/conditions/attributes.ts

@@ -1,52 +0,0 @@
-import type { AttributeQuery } from "../../../compiler";
-import type { Props } from "../../runtime.types";
-import type { RenderGuard } from "./guards";
-
-export function testAttributes(
-  queries: AttributeQuery[],
-  props: Props,
-  guards: RenderGuard[],
-) {
-  return queries.every((query) => testAttribute(query, props, guards));
-}
-
-function testAttribute(
-  [type, prop, operator, testValue]: AttributeQuery,
-  props: Props,
-  guards: RenderGuard[],
-) {
-  let value: unknown;
-
-  if (type === "a") {
-    value = props?.[prop];
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    value = props?.dataSet?.[prop];
-  }
-
-  guards.push([type, prop, value]);
-
-  if (!operator) {
-    return value !== undefined && value !== null && value !== false;
-  }
-
-  switch (operator) {
-    case "!":
-      return !value;
-    case "=":
-      return value == testValue;
-    case "~=":
-      return testValue && value?.toString().split(" ").includes(testValue);
-    case "|=":
-      return testValue && value?.toString().startsWith(testValue + "-");
-    case "^=":
-      return testValue && value?.toString().startsWith(testValue);
-    case "$=":
-      return testValue && value?.toString().endsWith(testValue);
-    case "*=":
-      return testValue && value?.toString().includes(testValue);
-    default:
-      operator satisfies never;
-      return false;
-  }
-}

package/src/runtime/native/conditions/container-query.ts

@@ -1,162 +0,0 @@
-/* eslint-disable */
-import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
-
-import type {
-  ContainerQuery,
-  MediaCondition,
-  PseudoClassesQuery,
-  StyleDescriptor,
-} from "../../../compiler";
-import {
-  activeFamily,
-  containerHeightFamily,
-  containerWidthFamily,
-  focusFamily,
-  hoverFamily,
-  type ContainerContextValue,
-  type Getter,
-} from "../reactivity";
-// import { testAttributes } from "./attributes";
-import type { RenderGuard } from "./guards";
-
-export const DEFAULT_CONTAINER_NAME = "c:___default___";
-
-export function testContainerQueries(
-  queries: ContainerQuery[],
-  inheritedContainers: ContainerContextValue,
-  guards: RenderGuard[],
-  get: Getter,
-) {
-  return queries.every((query) => {
-    return testContainerQuery(query, inheritedContainers, guards, get);
-  });
-}
-
-export function testContainerQuery(
-  query: ContainerQuery,
-  inheritedContainers: ContainerContextValue,
-  guards: RenderGuard[],
-  get: Getter,
-): boolean {
-  const name = query.n ?? DEFAULT_CONTAINER_NAME;
-  const container = inheritedContainers[name]!;
-
-  guards.push(["c", name, container]);
-
-  if (!container) {
-    return false;
-  }
-
-  // if (query.a && !testAttributes(query.a, container.props, guards)) {
-  //   return false;
-  // }
-
-  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
-    return false;
-  }
-
-  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
-    return false;
-  }
-
-  return true;
-}
-
-function testContainerPseudoCondition(
-  query: PseudoClassesQuery,
-  containerKey: WeakKey,
-  get: Getter,
-): boolean {
-  if (query.h && !get(hoverFamily(containerKey))) {
-    return false;
-  }
-  if (query.a && !get(activeFamily(containerKey))) {
-    return false;
-  }
-  if (query.f && !get(focusFamily(containerKey))) {
-    return false;
-  }
-  return true;
-}
-
-function testContainerMediaCondition(
-  condition: MediaCondition,
-  containerKey: WeakKey,
-  get: Getter,
-): boolean {
-  switch (condition[0]) {
-    case "!":
-      return !testContainerMediaCondition(condition[1], containerKey, get);
-    case "&":
-      return condition[1].every((query) => {
-        return testContainerMediaCondition(query, containerKey, get);
-      });
-    case "|":
-      return condition[1].some((query) => {
-        return testContainerMediaCondition(query, containerKey, get);
-      });
-    case "!!":
-      return false;
-    case "[]":
-      return false;
-    case ">":
-    case ">=":
-    case "<":
-    case "<=":
-    case "=": {
-      const left = getContainerFeatureValue(condition[1], containerKey, get);
-      const right = condition[2];
-
-      if (condition[0] === "=") {
-        return left === right;
-      }
-
-      if (typeof left !== "number" || typeof right !== "number") {
-        return false;
-      }
-
-      switch (condition[0]) {
-        case ">":
-          return left > right;
-        case ">=":
-          return left > right;
-        case "<":
-          return left > right;
-        case "<=":
-          return left > right;
-        default:
-          condition[0] satisfies never;
-          return false;
-      }
-    }
-    default:
-      condition satisfies never;
-      return false;
-  }
-}
-
-function getContainerFeatureValue(
-  name: MediaFeatureNameFor_ContainerSizeFeatureId,
-  containerKey: WeakKey,
-  get: Getter,
-): StyleDescriptor {
-  switch (name) {
-    case "width":
-      return get(containerWidthFamily(containerKey));
-    case "height":
-      return get(containerHeightFamily(containerKey));
-    case "aspect-ratio": {
-      const width = get(containerWidthFamily(containerKey));
-      const height = get(containerHeightFamily(containerKey));
-      return width / height;
-    }
-    case "orientation":
-      const width = get(containerWidthFamily(containerKey));
-      const height = get(containerHeightFamily(containerKey));
-      return width > height ? "landscape" : "portrait";
-    case "inline-size":
-    case "block-size":
-    default:
-      return;
-  }
-}

package/src/runtime/native/conditions/index.ts

@@ -1,54 +0,0 @@
-import type { PseudoClassesQuery, StyleRule } from "../../../compiler";
-import type { Props } from "../../runtime.types";
-import {
-  activeFamily,
-  focusFamily,
-  hoverFamily,
-  type ContainerContextValue,
-  type Getter,
-} from "../reactivity";
-import { testAttributes } from "./attributes";
-import { testContainerQueries } from "./container-query";
-import type { RenderGuard } from "./guards";
-import { testMediaQuery } from "./media-query";
-
-export function testRule(
-  rule: StyleRule,
-  get: Getter,
-  props: Props,
-  guards: RenderGuard[],
-  containerContext: ContainerContextValue,
-) {
-  if (rule.p && !pseudoClasses(rule.p, get)) {
-    return false;
-  }
-  if (rule.m && !testMediaQuery(rule.m, get)) {
-    return false;
-  }
-  if (rule.aq && !testAttributes(rule.aq, props, guards)) {
-    return false;
-  }
-  if (
-    rule.cq &&
-    !testContainerQueries(rule.cq, containerContext, guards, get)
-  ) {
-    return false;
-  }
-
-  return true;
-}
-
-function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
-  // IMPORTANT: active needs: to be first. Modifies a global value
-  // that we use to determine if the component should be a pressable
-  if (query.a && !get(activeFamily(get))) {
-    return false;
-  }
-  if (query.h && !get(hoverFamily(get))) {
-    return false;
-  }
-  if (query.f && !get(focusFamily(get))) {
-    return false;
-  }
-  return true;
-}

package/src/runtime/native/conditions/media-query.ts

@@ -1,98 +0,0 @@
-/* eslint-disable */
-import { I18nManager, PixelRatio, Platform } from "react-native";
-
-import type { MediaCondition } from "../../../compiler";
-import { colorScheme, vh, vw, type Getter } from "../reactivity";
-
-export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
-  return mediaQueries.every((query) => test(query, get));
-}
-
-function test(mediaQuery: MediaCondition, get: Getter): Boolean {
-  switch (mediaQuery[0]) {
-    case "[]":
-    case "!!":
-      return false;
-    case "!":
-      return !test(mediaQuery[1], get);
-    case "&":
-      return mediaQuery[1].every((query) => {
-        return test(query, get);
-      });
-    case "|":
-      return mediaQuery[1].some((query) => {
-        return test(query, get);
-      });
-    case ">":
-    case ">=":
-    case "<":
-    case "<=":
-    case "=": {
-      return testComparison(mediaQuery, get);
-    }
-  }
-}
-
-function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
-  const value = mediaQuery[2];
-
-  switch (mediaQuery[1]) {
-    case "dir":
-      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
-    case "hover":
-      return true;
-    case "platform":
-      return value === "native" || value === Platform.OS;
-    case "prefers-color-scheme": {
-      return value === get(colorScheme);
-    }
-    case "display-mode":
-      return value === "native" || Platform.OS === value;
-    case "min-width":
-      return typeof value === "number" && get(vw) >= value;
-    case "max-width":
-      return typeof value === "number" && get(vw) <= value;
-    case "min-height":
-      return typeof value === "number" && get(vh) >= value;
-    case "max-height":
-      return typeof value === "number" && get(vh) <= value;
-    case "orientation":
-      return value === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
-  }
-
-  if (typeof value !== "number") {
-    return false;
-  }
-
-  let left: number | undefined;
-  const right = value;
-
-  switch (mediaQuery[1]) {
-    case "width":
-      left = get(vw);
-      break;
-    case "height":
-      left = get(vh);
-      break;
-    case "resolution":
-      left = PixelRatio.get();
-      break;
-    default:
-      return false;
-  }
-
-  switch (mediaQuery[0]) {
-    case "=":
-      return left === right;
-    case ">":
-      return left > right;
-    case ">=":
-      return left >= right;
-    case "<":
-      return left < right;
-    case "<=":
-      return left <= right;
-    default:
-      return false;
-  }
-}