react-native-css 2.1.2 → 3.0.0-nightly.26b272f

package/src/poison.pill.ts

@@ -0,0 +1,36 @@
+const canWarn = process.env.NODE_ENV !== "test";
+
+if (canWarn) {
+  throw new Error(`react-native-css has encountered a setup error. 
+
+┌─────-─┐
+| Metro | 
+└─────-─┘
+
+Either your metro.config.js is missing the 'withReactNativeCSS' wrapper OR
+the resolver.resolveRequest function of your config is being overridden, and not calling the parent resolver.
+
+When using 3rd party libraries, please use withReactNativeCSS as the innermost function when composing Metro configs.
+
+\`\`\`ts
+const config = getDefaultConfig(__dirname);
+module.exports = with3rdPartyPlugin(
+  withReactNativeCSS(config)
+)
+\`\`\`
+
+┌─────------─┐
+| NativeWind | 
+└─────------─┘
+
+If you are using NativeWind with the 'withNativeWind' function, follow the Metro instructions above, but use 'withNativeWind' instead of 'withReactNativeCSS'.
+
+┌─────----------─┐
+| Other bundlers | 
+└─────----------─┘
+
+If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
+`);
+}
+
+export {};

package/src/runtime/index.ts

@@ -0,0 +1,7 @@
+/**
+ * An opinionated runtime for React Native CSS.
+ * @module
+ */
+
+export * from "./runtime";
+export type * from "./runtime.types";

package/src/runtime/native/api.ts

@@ -0,0 +1,106 @@
+/* eslint-disable  */
+import { useContext, useState } from "react";
+import { Appearance } from "react-native";
+
+import type { InlineVariable, 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,
+} from "./reactivity";
+import { resolveValue } from "./styles/resolve";
+
+export { StyleCollection } from "./injection";
+
+/**
+ * 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 });
+}
+
+export function vars(variables: Record<string, StyleDescriptor>) {
+  (variables as InlineVariable)[VAR_SYMBOL] = "inline";
+  return variables;
+}

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,162 @@
+/* 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/guards.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import type { ComponentState } from "../react/useNativeCss";
+import type {
+  ContainerContextValue,
+  VariableContextValue,
+} from "../reactivity";
+
+export type RenderGuard =
+  | ["a", string, any]
+  | ["d", string, any]
+  | ["v", string, any]
+  | ["c", string, WeakKey];
+
+export function testGuards(
+  state: ComponentState,
+  currentProps: any,
+  inheritedVariables: VariableContextValue,
+  inheritedContainers: ContainerContextValue,
+) {
+  return state.guards?.some((guard) => {
+    let result = false;
+
+    switch (guard[0]) {
+      case "a":
+        // Attribute
+        result = currentProps?.[guard[1]] !== guard[2];
+        break;
+      case "d":
+        // DataSet
+        result = currentProps?.dataSet?.[guard[1]] !== guard[2];
+        break;
+      case "v":
+        // Variables
+        result = inheritedVariables[guard[1]] !== guard[2];
+        break;
+      case "c":
+        // Containers
+        result = inheritedContainers[guard[1]] !== guard[2];
+        break;
+    }
+
+    return result;
+  });
+}

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

@@ -0,0 +1,52 @@
+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) {
+  if (query.h && !get(hoverFamily(get))) {
+    return false;
+  }
+  if (query.a && !get(activeFamily(get))) {
+    return false;
+  }
+  if (query.f && !get(focusFamily(get))) {
+    return false;
+  }
+  return true;
+}

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

@@ -0,0 +1,92 @@
+/* eslint-disable */
+import { 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 {
+  let left: number | undefined;
+  const right = mediaQuery[2];
+
+  switch (mediaQuery[1]) {
+    case "platform":
+      return right === "native" || right === Platform.OS;
+    case "prefers-color-scheme": {
+      return right === get(colorScheme);
+    }
+    case "display-mode":
+      return right === "native" || Platform.OS === right;
+    case "min-width":
+      return typeof right === "number" && get(vw) >= right;
+    case "max-width":
+      return typeof right === "number" && get(vw) <= right;
+    case "min-height":
+      return typeof right === "number" && get(vh) >= right;
+    case "max-height":
+      return typeof right === "number" && get(vh) <= right;
+    case "orientation":
+      return right === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
+  }
+
+  if (typeof right !== "number") {
+    return false;
+  }
+
+  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;
+  }
+}

package/src/runtime/native/index.ts

@@ -0,0 +1,4 @@
+export * from "./metro";
+
+export * from "./api";
+export type * from "../runtime.types";

package/src/runtime/native/injection.ts

@@ -0,0 +1,131 @@
+import type {
+  Animation_V2,
+  ReactNativeCssStyleSheet,
+  StyleRuleSet,
+} from "../../compiler";
+import {
+  family,
+  observable,
+  observableBatch,
+  type Observable,
+} from "./reactivity";
+import { rootVariables } from "./root";
+
+export function StyleCollection() {
+  return null;
+}
+
+export const inlineStylesMap = new WeakMap();
+
+StyleCollection.styles = family<string, Observable<StyleRuleSet>>(() => {
+  return observable([], isDeepEqual);
+});
+StyleCollection.keyframes = family<string, Observable<Animation_V2[1]>>(() => {
+  return observable([], isDeepEqual);
+});
+
+StyleCollection.inject = function (options: ReactNativeCssStyleSheet) {
+  observableBatch.current = new Set();
+
+  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;
+};
+
+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;
+}
+
+StyleCollection.styles("will-change-variable").set([
+  {
+    s: [0],
+    v: [],
+  },
+]);
+
+StyleCollection.styles("will-change-container").set([
+  {
+    s: [0],
+    c: [],
+  },
+]);
+
+StyleCollection.styles("will-change-animation").set([
+  {
+    s: [0],
+    a: true,
+  },
+]);
+
+StyleCollection.styles("will-change-pressable").set([
+  {
+    s: [0],
+    p: {
+      h: 1,
+    },
+  },
+]);

package/src/runtime/native/metro.ts

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