react-native-css 0.0.0-nightly.03a4e35

package/src/native/styles/shorthands/border.ts

@@ -0,0 +1,10 @@
+import { shorthandHandler } from "./_handler";
+
+const width = ["borderWidth", "number"] as const;
+const style = ["borderStyle", "string"] as const;
+const color = ["borderColor", "color", "color"] as const;
+
+export const border = shorthandHandler(
+  [[width, style, color], [style, color], [width, style], [style]],
+  [],
+);

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

@@ -0,0 +1,71 @@
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+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;
+
+const handler = shorthandHandler(
+  [
+    [offsetX, offsetY, blurRadius, spreadDistance],
+    [offsetX, offsetY, blurRadius, spreadDistance, color],
+    [color, offsetX, offsetY],
+    [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 args
+      .flatMap(flattenShadowDescriptor)
+      .map((shadows) => {
+        if (shadows === undefined) {
+          return;
+        } else {
+          return omitTransparentShadows(
+            handler(resolveValue, shadows, get, options),
+          );
+        }
+      })
+      .filter((v) => v !== undefined);
+  }
+};
+
+function flattenShadowDescriptor(arg: StyleDescriptor): StyleDescriptor[] {
+  if (isStyleDescriptorArray(arg) && isStyleDescriptorArray(arg[0])) {
+    return arg.map((arg) => {
+      return flattenShadowDescriptor(arg);
+    });
+  }
+
+  return [arg];
+}
+
+function omitTransparentShadows(style: unknown) {
+  if (typeof style === "object" && style && "color" in style) {
+    if (style.color === "#0000" || style.color === "transparent") {
+      return;
+    }
+  }
+
+  return style;
+}

package/src/native/styles/shorthands/index.ts

@@ -0,0 +1,5 @@
+export * from "./animation";
+export * from "./border";
+export * from "./box-shadow";
+export * from "./text-shadow";
+export * from "./transform";

package/src/native/styles/shorthands/text-shadow.ts

@@ -0,0 +1,17 @@
+import { shorthandHandler } from "./_handler";
+
+const width = [["textShadowOffset", "width"], "number"] as const;
+const height = [["textShadowOffset", "height"], "number"] as const;
+const blur = ["textShadowRadius", "number", "textShadowRadius"] as const;
+const color = ["textShadowColor", "color", "color"] as const;
+
+export const textShadow = shorthandHandler(
+  [
+    [width, height, blur, color],
+    [color, width, height, blur],
+    [width, height, color],
+    [color, width, height],
+    [width, height],
+  ],
+  [blur, color],
+);

package/src/native/styles/shorthands/transform.ts

@@ -0,0 +1,23 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+/**
+ * Handle the unparsable transform property by converting its values into StyleDeclarations
+ * Each value should be a StyleDescriptor function of the transform type
+ */
+export const transform: StyleFunctionResolver = (
+  resolveValue,
+  transformDescriptor,
+) => {
+  const transforms = resolveValue(transformDescriptor[2]);
+
+  if (Array.isArray(transforms)) {
+    return transforms.filter(
+      (transform) => transform !== undefined && transform !== "initial",
+    ) as unknown;
+  } else if (transforms) {
+    // If it's a single transform, wrap it in an array
+    return [transforms];
+  } else {
+    return;
+  }
+};

package/src/native/styles/units.ts

@@ -0,0 +1,62 @@
+import { vh as vhObs, vw as vwObs } from "../reactivity";
+import type { StyleFunctionResolver } from "./resolve";
+
+export const em: StyleFunctionResolver = (resolve, func) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
+
+  if (typeof emValue !== "number") {
+    emValue = resolve([{}, "var", ["__rn-css-rem"]]);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
+  }
+
+  return round(value * emValue);
+};
+
+export const vw: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round(get(vwObs) * (value / 100));
+};
+
+export const vh: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round((value / 100) * get(vhObs));
+};
+
+export const rem: StyleFunctionResolver = (resolve, func) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  const remValue = resolve([{}, "var", ["__rn-css-rem"]]);
+
+  if (typeof remValue === "number") {
+    return round(value * remValue);
+  }
+
+  return;
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 100) / 100;
+}

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/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 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.native.ts

@@ -0,0 +1 @@
+export * from "./native";

package/src/runtime.ts

@@ -0,0 +1 @@
+export * from "./web";