react-native-css 2.1.1 → 3.0.0-nightly.27bd5e2

package/src/runtime/utils/dot-notation.types.ts

@@ -0,0 +1,118 @@
+/* eslint-disable */
+// ---------- Base Utilities ----------
+
+type Falsy = undefined | null | false | "";
+type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
+
+type Primitive =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined
+  | Date
+  | RegExp
+  | false
+  | true;
+
+interface RecursiveArray<T>
+  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
+
+export type StyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy;
+
+// ---------- Type Helpers ----------
+
+// Unwrap nested arrays (from RecursiveArray)
+type UnwrapRecursiveArray<T> = T extends (infer I)[]
+  ? UnwrapRecursiveArray<I>
+  : T;
+
+// Remove null, false, undefined, etc.
+type RemoveFalsy<T> = Exclude<T, Falsy>;
+
+// Remove RegisteredStyle (branded numbers)
+type RemoveRegisteredStyle<T> = T extends RegisteredStyle<any> ? never : T;
+
+// Final cleaned style object from StyleProp<T>
+type ExtractStyleObject<T> = RemoveRegisteredStyle<
+  RemoveFalsy<UnwrapRecursiveArray<T extends StyleProp<infer U> ? U : T>>
+>;
+
+// Check if something is a non-array plain object
+type IsPlainObject<T> = T extends object
+  ? T extends Function
+    ? false
+    : T extends readonly any[]
+      ? false
+      : true
+  : false;
+
+// ---------- Resolve Path Type Helpers ----------
+
+type Split<
+  T extends string,
+  Delimiter extends string,
+> = T extends `${infer Head}${Delimiter}${infer Tail}`
+  ? [Head, ...Split<Tail, Delimiter>]
+  : [T];
+
+// Special parser to break down dot + bracket notation (e.g., "users[0].name")
+type ParsePath<T extends string> =
+  T extends `${infer Head}[${number}]${infer Rest}`
+    ? [Head, number, ...ParsePath<Rest extends `.${infer R}` ? R : Rest>]
+    : Split<T, ".">;
+
+type ResolvePath<T, Parts extends readonly any[]> = Parts extends [
+  infer Head,
+  ...infer Rest,
+]
+  ? Head extends keyof T
+    ? ResolvePath<T[Head], Rest>
+    : Head extends number
+      ? T extends (infer U)[]
+        ? ResolvePath<U, Rest>
+        : never
+      : never
+  : T;
+
+// ---------- Dot Notation Utility ----------
+
+export type DotNotation<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10,
+  Key extends keyof T = keyof T,
+> = Depth["length"] extends MaxDepth
+  ? never
+  : Key extends string
+    ? unknown extends T[Key]
+      ? Key | `${Key}.${string}`
+      : // Handle StyleProp<T> and clean unions
+        ExtractStyleObject<NonNullable<T[Key]>> extends infer Cleaned
+        ? Cleaned extends Primitive
+          ? Key
+          : Cleaned extends readonly (infer E)[]
+            ? E extends Primitive
+              ? Key | `${Key}[number]`
+              :
+                  | Key
+                  | `${Key}[number]`
+                  | `${Key}[number].${DotNotation<E, [...Depth, 0], MaxDepth>}`
+            : IsPlainObject<Cleaned> extends true
+              ? Key | `${Key}.${DotNotation<Cleaned, [...Depth, 0], MaxDepth>}`
+              : Key
+        : never
+    : never;
+
+// ---------- Resolve Dot Path ----------
+
+export type ResolveDotPath<T, Path extends string> = ResolvePath<
+  T,
+  ParsePath<Path>
+>;

package/src/runtime/utils/index.ts

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

package/src/runtime/utils/objects.ts

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import { ShortHandSymbol } from "../native/styles/constants";
+import { transformKeys } from "../native/styles/defaults";
+
+export function getDeepPath(source: any, paths: string | string[] | false) {
+  if (!source) {
+    return;
+  }
+
+  if (paths === false) {
+    return undefined;
+  }
+
+  if (Array.isArray(paths)) {
+    let target = source;
+
+    for (const path of paths) {
+      if (typeof target !== "object" || !target || !(path in target)) {
+        return undefined;
+      }
+
+      target = target[path];
+    }
+
+    return target;
+  } else {
+    return source?.[paths];
+  }
+}
+
+export function applyShorthand(value: any) {
+  if (value === undefined) {
+    return;
+  }
+
+  const target: Record<string, unknown> = { [ShortHandSymbol]: true };
+
+  const values = value as [unknown, string][];
+
+  for (const [value, prop] of values) {
+    target[prop] = value;
+  }
+
+  return target;
+}
+
+export function applyValue(
+  target: Record<string, any>,
+  prop: string,
+  value: any,
+) {
+  if (value === undefined) {
+    return;
+  }
+
+  if (transformKeys.has(prop)) {
+    if (!Array.isArray(target.transform)) {
+      target.transform = [];
+    }
+
+    const transform = target.transform.find((t: any) => t[prop] !== undefined);
+
+    if (transform) {
+      transform[prop] = value;
+    } else {
+      target.transform.push({ [prop]: value });
+    }
+    return;
+  } else if (typeof value === "object" && value && ShortHandSymbol in value) {
+    delete value[ShortHandSymbol];
+    Object.assign(target, value);
+    return;
+  }
+
+  target[prop] = value;
+}
+
+export function setDeepPath(
+  target: Record<string, any>,
+  paths: string | string[] | readonly string[],
+  value: any,
+) {
+  if (typeof paths === "string") {
+    target[paths] = value;
+    return target;
+  }
+
+  for (let i = 0; i < paths.length - 1; i++) {
+    const path = paths[i]!;
+    target[path] ??= {};
+    target = target[path];
+  }
+
+  target[paths[paths.length - 1]!] = value;
+
+  return target;
+}

package/src/runtime/utils/specificity.ts

@@ -0,0 +1,44 @@
+/* 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,
+  // 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

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

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

@@ -0,0 +1,88 @@
+import { createElement, type ComponentProps } 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 = <const 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);
+  },
+};
+
+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 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/assign-style.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+export function assignStyle(
+  value: Record<string, any>,
+  targets: string[],
+  props: Record<string, any>,
+) {
+  const target = targets.shift();
+
+  if (!target) return {};
+
+  if (targets.length === 0) {
+    if (typeof props[target] === "function") {
+      const cb = props[target];
+      props[target] = (...args: any[]) => {
+        return [cb(...args), value];
+      };
+    } else {
+      props[target] = [props[target], value];
+    }
+    return props;
+  } else {
+    props[target] ??= {};
+    assignStyle(value, targets, props[target]);
+    return props;
+  }
+}

package/src/runtime/web/index.ts

@@ -0,0 +1,5 @@
+// Import this file for Metro to override
+import "./metro";
+
+export type * from "../runtime.types";
+export * from "./api";

package/src/runtime/web/metro.ts

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

package/.babelrc

@@ -1,8 +0,0 @@
-{
-    "presets": [
-        "es2015"
-    ],
-    "plugins": [
-        "transform-object-rest-spread"
-    ]
-}

package/.editorconfig

@@ -1,17 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[test/fixtures/*]
-insert_final_newline = false
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,3 +0,0 @@
-.babelrc
-node_modules
-build

package/.eslintrc

@@ -1,39 +0,0 @@
-{
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "rules": {
-    "comma-dangle": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/extensions": 0,
-    "import/no-unresolved": 0,
-    "import/prefer-default-export": 0,
-		"import/first": 0,
-		"no-loop-func": 0,
-    "strict": 0,
-    "no-plusplus": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "no-useless-escape": 0,
-    "no-restricted-syntax": 0,
-    "no-continue": 1,
-    "radix": 1,
-		"no-use-before-define": 0
-  },
-  "ecmaFeatures": {
-    "classes": true
-  },
-  "parserOptions":{
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
-    }
-  },
-  "globals": {
-    "expect": true,
-    "browser": true,
-    "sinon": true
-  },
-  "env": {
-    "mocha": true,
-    "amd": true
-  }
-}

package/.npmignore

@@ -1,7 +0,0 @@
-node_modules
-node_modules/
-test/fixtures/*.js
-.DS_STORE
-.idea
-npm-debug.log
-.vscode