react-native-css 3.0.0-preview.0 → 3.0.0-preview.2

package/src/runtime/web/{api.ts → api.tsx}

@@ -1,4 +1,9 @@
-import { createElement, type ComponentProps } from "react";
+import {
+  createElement,
+  useMemo,
+  type ComponentProps,
+  type PropsWithChildren,
+} from "react";
 import { Appearance } from "react-native";
 
 import type {
@@ -24,7 +29,7 @@ export const styled = <
   };
 };
 
-export const useCssElement = <const C extends ReactComponent>(
+export const useCssElement = <C extends ReactComponent>(
   component: C,
   incomingProps: Props,
   mapping: StyledConfiguration<C>,
@@ -66,6 +71,9 @@ export const colorScheme: ColorScheme = {
   },
 };
 
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
 export function vars(variables: Record<string, string | number>) {
   const $variables: Record<string, string> = {};
 
@@ -79,6 +87,24 @@ export function vars(variables: Record<string, string | number>) {
   return $variables;
 }
 
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, string> }>,
+) {
+  const style = useMemo(() => {
+    return {
+      display: "content",
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([key, value]) => [
+          key.startsWith("--") ? key : `--${key}`,
+          value,
+        ]),
+      ),
+    };
+  }, [props.value]);
+
+  return <div style={style}>{props.children}</div>;
+}
+
 export const useNativeVariable = () => {
   throw new Error("useNativeVariable is not supported in web");
 };

package/src/style-collection/root.ts

@@ -33,3 +33,5 @@ const rootVariableFamily = () => {
 
 export const rootVariables = rootVariableFamily();
 export const universalVariables = rootVariableFamily();
+
+rootVariables("__rn-css-rem").set([[14]]);