@uniflowed/stylex 0.0.0-alpha.40 → 0.0.0-alpha.42

package/native-props.js

@@ -0,0 +1,40 @@
+// @flow
+
+export type NativeStyleProps = { readonly style: { readonly [string]: string | number } };
+
+/** Return null for web namespaces; mixing renderer outputs is an error. */
+export function nativeProps(
+  styles: $ReadOnlyArray<mixed>,
+  nativeOnly: boolean = false,
+): NativeStyleProps | null {
+  let native = false;
+  let web = false;
+  const merged: { [string]: string | number } = {};
+  const pending = [...styles];
+  for (let index = 0; index < pending.length; index += 1) {
+    const value = pending[index];
+    if (Array.isArray(value)) {
+      pending.splice(index + 1, 0, ...value);
+      continue;
+    }
+    if (value == null || typeof value !== "object") continue;
+    // Static objects written by the compiler; validate their scalar fields.
+    const namespace: { [string]: mixed } = value as $FlowFixMe;
+    if (namespace.$$css === true) web = true;
+    if (namespace.$$native !== true) {
+      if (nativeOnly) throw new Error("StyleX native: expected a compiled native namespace");
+      continue;
+    }
+    native = true;
+    for (const property of Object.keys(namespace)) {
+      if (property === "$$native") continue;
+      const entry = namespace[property];
+      if (typeof entry !== "string" && typeof entry !== "number") {
+        throw new Error(`StyleX native: invalid compiled value for ${property}`);
+      }
+      merged[property] = entry;
+    }
+  }
+  if (native && web) throw new Error("StyleX: cannot mix native style objects with web classes");
+  return native ? { style: merged } : null;
+}

package/native.js

@@ -0,0 +1,40 @@
+// @flow
+import type { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { nativeRuntimeRequired } from "@uniflowed/core/native";
+import { nativeProps } from "./native-props.js";
+
+// Use one property map: a ViewStyle | TextStyle union would accept an invalid
+// fontWeight through its ViewStyle branch, whose optional fields all match.
+export type NativeStyle = $ReadOnly<{
+  ...$Exact<ViewStyle>,
+  ...$Exact<TextStyle>,
+  ...$Exact<ImageStyle>,
+}>;
+export type NativeStyleArgument<Style> =
+  | Style
+  | false
+  | null
+  | void
+  | $ReadOnlyArray<NativeStyleArgument<Style>>;
+type StyleFields<Value> = Value extends $ReadOnlyArray<infer Item>
+  ? StyleFields<Item>
+  : Value extends (false | null | void)
+    ? {}
+    : Value;
+
+/** Compile-time namespaces, checked against the app's React Native styles. */
+export function create<Styles extends { readonly [string]: NativeStyle }>(styles: Styles): Styles {
+  return nativeRuntimeRequired("@uniflowed/stylex/native", "stylex.create");
+}
+
+/** Native-only props retain the authored property types and never add className. */
+export function props<Args extends $ReadOnlyArray<NativeStyleArgument<NativeStyle>>>(
+  ...styles: Args
+): { readonly style: Partial<StyleFields<Args>> } {
+  const result = nativeProps(styles, true);
+  // The compiler validates the native subset and preserves every scalar value.
+  // The merger copies those fields, but its dynamic keys cannot retain Style.
+  return (result ?? { style: {} }) as $FlowFixMe;
+}
+
+export const stylex = { create, props };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/stylex",
-  "version": "0.0.0-alpha.40",
+  "version": "0.0.0-alpha.42",
   "description": "Flow declarations for @uniflowed/stylex, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -15,13 +15,22 @@
     "./props": "./props.js",
     "./preset": "./preset.js",
     "./theme": "./theme.js",
-    "./tokens.stylex.js": "./tokens.stylex.js"
+    "./tokens.stylex.js": "./tokens.stylex.js",
+    "./native": "./native.js"
   },
   "files": [
     "*.js",
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.40"
+    "@uniflowed/core": "0.0.0-alpha.42"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.86.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   }
 }

package/props.js

@@ -1,4 +1,6 @@
 // @flow
+
+import { nativeProps } from "./native-props.js";
 //
 // `@uniflowed/stylex/props`: the merge, and the only part of StyleX that runs.
 //
@@ -56,7 +58,10 @@ export type CompiledStyle = {
 export type StyleArgument = mixed;
 
 /** What `props` hands to an element. */
-export type StyleProps = { readonly className?: string };
+export type StyleProps = {
+  readonly className?: string,
+  readonly style?: { readonly [string]: string | number },
+};
 
 /** What one property contributed, once the merge has picked a winner. */
 type Winner = string | null | CompiledClasses;
@@ -73,6 +78,8 @@ type Winner = string | null | CompiledClasses;
  * survived.
  */
 export function props(...styles: $ReadOnlyArray<StyleArgument>): StyleProps {
+  const native = nativeProps(styles);
+  if (native != null) return native;
   const winners: { [string]: Winner } = {};
   collect(styles, winners);