react-native-css 2.1.1 → 3.0.0-nightly.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/src/style-collection/index.ts

@@ -0,0 +1,142 @@
+import type {
+  Animation,
+  ReactNativeCssStyleSheet,
+  StyleRuleSet,
+} from "react-native-css/compiler";
+
+import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
+import {
+  family,
+  observable,
+  observableBatch,
+  type Observable,
+} from "../runtime/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;
+}
+
+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/style-collection/root.ts

@@ -0,0 +1,35 @@
+import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+
+import { testMediaQuery } from "../runtime/native/conditions/media-query";
+import {
+  family,
+  observable,
+  type Observable,
+} from "../runtime/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();

package/types.d.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  ScrollViewProps,
+  ScrollViewPropsAndroid,
+  ScrollViewPropsIOS,
+  Touchable,
+  VirtualizedListProps,
+} from "react-native";
+
+declare module "@react-native/virtualized-lists" {
+  export interface VirtualizedListWithoutRenderItemProps<ItemT>
+    extends ScrollViewProps {
+    ListFooterComponentClassName?: string;
+    ListHeaderComponentClassName?: string;
+  }
+}
+
+declare module "react-native" {
+  interface ScrollViewProps
+    extends ViewProps,
+      ScrollViewPropsIOS,
+      ScrollViewPropsAndroid,
+      Touchable {
+    contentContainerClassName?: string;
+    indicatorClassName?: string;
+  }
+  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+    columnWrapperClassName?: string;
+  }
+  interface ImageBackgroundProps extends ImagePropsBase {
+    imageClassName?: string;
+  }
+  interface ImagePropsBase {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface ViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TextInputProps {
+    placeholderClassName?: string;
+  }
+  interface TextProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface SwitchProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface InputAccessoryViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TouchableWithoutFeedbackProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface StatusBarProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface KeyboardAvoidingViewProps extends ViewProps {
+    contentContainerClassName?: string;
+  }
+  interface ModalBaseProps {
+    presentationClassName?: string;
+  }
+}

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