react-native-css 0.0.0-nightly.96f5ce2 → 0.0.0-nightly.99fdf44

package/src/compiler/stylesheet.ts

@@ -4,7 +4,7 @@ import {
   isStyleDescriptorArray,
   Specificity,
   specificityCompareFn,
-} from "../runtime/utils";
+} from "../utilities";
 import type {
   AnimationKeyframes,
   AnimationRecord,
@@ -263,8 +263,8 @@ export class StylesheetBuilder {
   }
 
   /** Used by nested declarations (for example @media inside a RuleSet) */
-  newNestedRule({ important = false } = {}) {
-    this.newRule(this.mapping, { important });
+  newNestedRule({ important = false, mapping = this.mapping } = {}) {
+    this.newRule(mapping, { important });
   }
 
   /** Hack for light-dark, which requires adding a new rule without changing the current rule */
@@ -331,15 +331,6 @@ export class StylesheetBuilder {
         forceTuple,
       );
     } else if (property.startsWith("--")) {
-      // If we have enabled variable usage tracking, skip unused variables
-      if (
-        this.options.stripUnusedVariables &&
-        !property.startsWith("--__rn-css") &&
-        !this.varUsage.has(property)
-      ) {
-        return;
-      }
-
       rule.v ??= [];
       rule.v.push([property.slice(2), value]);
     } else if (isStyleFunction(value)) {
@@ -400,6 +391,10 @@ export class StylesheetBuilder {
     let propPath: string | string[] | undefined =
       this.mapping[rawProperty] ?? this.mapping[property] ?? this.mapping["*"];
 
+    if (typeof property === "string" && property.includes(".")) {
+      propPath = property.split(".");
+    }
+
     if (Array.isArray(propPath)) {
       const [first, second] = propPath;
 

package/src/components/ActivityIndicator.tsx

@@ -9,14 +9,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   className: {
     target: "style",
     nativeStyleMapping: {
       color: "color",
     },
   },
-} satisfies StyledConfiguration<typeof RNActivityIndicator>;
+};
 
 export function ActivityIndicator(
   props: StyledProps<ActivityIndicatorProps, typeof mapping>,

package/src/components/Button.tsx

@@ -6,14 +6,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNButton> = {
   className: {
     target: false,
     nativeStyleMapping: {
       color: "color",
     },
   },
-} satisfies StyledConfiguration<typeof RNButton>;
+};
 
 export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
   return useCssElement(RNButton, props, mapping);

package/src/components/FlatList.tsx

@@ -6,11 +6,12 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
-  columnWrapperStyle: "columnWrapperStyle",
-  listFooterComponentClassName: "ListFooterComponentStyle",
-  listHeaderComponentClassName: "ListHeaderComponentStyle",
-} satisfies StyledConfiguration<typeof RNFlatList>;
+const mapping: StyledConfiguration<typeof RNFlatList> = {
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
 
 export function FlatList<ItemT>(
   props: StyledProps<FlatListProps<ItemT>, typeof mapping>,

package/src/components/Image.tsx

@@ -6,9 +6,9 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNImage> = {
   className: "style",
-} satisfies StyledConfiguration<typeof RNImage>;
+};
 
 export function Image(props: StyledProps<ImageProps, typeof mapping>) {
   return useCssElement(RNImage, props, mapping);

package/src/components/ImageBackground.tsx

@@ -0,0 +1,27 @@
+import {
+  ImageBackground as RNImageBackground,
+  type ImageBackgroundProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNImageBackground> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      backgroundColor: true,
+    },
+  },
+};
+
+export function ImageBackground(
+  props: StyledProps<ImageBackgroundProps, typeof mapping>,
+) {
+  return useCssElement(RNImageBackground, props, mapping);
+}
+
+export default ImageBackground;

package/src/components/KeyboardAvoidingView.tsx

@@ -0,0 +1,24 @@
+import {
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+  type KeyboardAvoidingViewProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
+  className: {
+    target: "style",
+  },
+};
+
+export function KeyboardAvoidingView(
+  props: StyledProps<KeyboardAvoidingViewProps, typeof mapping>,
+) {
+  return useCssElement(RNKeyboardAvoidingView, props, mapping);
+}
+
+export default KeyboardAvoidingView;

package/src/components/Pressable.tsx

@@ -0,0 +1,17 @@
+import { Pressable as RNPressable, type PressableProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNPressable> = {
+  className: "style",
+};
+
+export function Pressable(props: StyledProps<PressableProps, typeof mapping>) {
+  return useCssElement(RNPressable, props, mapping);
+}
+
+export default Pressable;

package/src/components/ScrollView.tsx

@@ -0,0 +1,20 @@
+import { ScrollView as RNScrollView, type ScrollViewProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNScrollView> = {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+export function ScrollView(
+  props: StyledProps<ScrollViewProps, typeof mapping>,
+) {
+  return useCssElement(RNScrollView, props, mapping);
+}
+
+export default ScrollView;

package/src/components/Text.tsx

@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",

package/src/components/TextInput.tsx

@@ -6,9 +6,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
-  className: "style",
-} satisfies StyledConfiguration<typeof RNTextInput>;
+const mapping: StyledConfiguration<typeof RNTextInput> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      textAlign: true,
+    },
+  },
+};
 
 export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
   return useCssElement(RNTextInput, props, mapping);

package/src/components/TouchableHighlight.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableHighlight as RNTouchableHighlight,
+  type TouchableHighlightProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableHighlight> = {
+  className: "style",
+};
+
+export function TouchableHighlight(
+  props: StyledProps<TouchableHighlightProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableHighlight, props, mapping);
+}
+
+export default TouchableHighlight;

package/src/components/TouchableOpacity.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableOpacity as RNTouchableOpacity,
+  type TouchableOpacityProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableOpacity> = {
+  className: "style",
+};
+
+export function TouchableOpacity(
+  props: StyledProps<TouchableOpacityProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableOpacity, props, mapping);
+}
+
+export default TouchableOpacity;

package/src/components/TouchableWithoutFeedback.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
+  type TouchableWithoutFeedbackProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback> = {
+  className: "style",
+};
+
+export function TouchableWithoutFeedback(
+  props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableWithoutFeedback, props, mapping);
+}
+
+export default TouchableWithoutFeedback;

package/src/components/View.tsx

@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",

package/src/components/VirtualizedList.tsx

@@ -0,0 +1,25 @@
+import {
+  VirtualizedList as RNVirtualizedList,
+  type VirtualizedListProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+export function VirtualizedList<ItemT>(
+  props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNVirtualizedList, props, mapping);
+}
+
+export default VirtualizedList;

package/src/components/index.tsx

@@ -4,7 +4,15 @@ export { ActivityIndicator } from "./ActivityIndicator";
 export { Button } from "./Button";
 export { FlatList } from "./FlatList";
 export { Image } from "./Image";
+export { ImageBackground } from "./ImageBackground";
+export { KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { Pressable } from "./Pressable";
+export { ScrollView } from "./ScrollView";
 export { Switch } from "./Switch";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { TouchableHighlight } from "./TouchableHighlight";
+export { TouchableOpacity } from "./TouchableOpacity";
+export { TouchableWithoutFeedback } from "./TouchableWithoutFeedback";
 export { View } from "./View";
+export { VirtualizedList } from "./VirtualizedList";

package/src/components/react-native-safe-area-context.native.tsx

@@ -1,13 +1,15 @@
 import { useContext, useMemo, type PropsWithChildren } from "react";
 
+import {
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
 import {
   SafeAreaProvider as OriginalSafeAreaProvider,
   useSafeAreaInsets,
   type SafeAreaProviderProps,
 } from "react-native-safe-area-context";
 
-import { VariableContext } from "../runtime/native/reactivity";
-
 export * from "react-native-safe-area-context";
 
 export function SafeAreaProvider({
@@ -36,5 +38,7 @@ function SafeAreaEnv({ children }: PropsWithChildren) {
     [parentVars, insets],
   );
 
-  return <VariableContext value={value}>{children}</VariableContext>;
+  return (
+    <VariableContextProvider value={value}>{children}</VariableContextProvider>
+  );
 }

package/src/index.ts

@@ -1,3 +1 @@
 export * from "./runtime";
-
-export * from "./poison.pill";

package/src/jest/index.ts

@@ -3,9 +3,9 @@ import { Appearance, Dimensions } from "react-native";
 import { inspect } from "node:util";
 
 import { compile, type CompilerOptions } from "react-native-css/compiler";
-import { StyleCollection } from "react-native-css/style-collection";
+import { StyleCollection } from "react-native-css/native";
 
-import { colorScheme, dimensions } from "../runtime/native/reactivity";
+import { colorScheme, dimensions } from "../native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */
@@ -59,12 +59,12 @@ export function compileWithAutoDebug(
   {
     debug = debugDefault,
     ...options
-  }: CompilerOptions & { debug?: boolean } = {},
+  }: CompilerOptions & { debug?: boolean | "verbose" } = {},
 ) {
   const logger = debug
     ? (text: string) => {
         // Just log the rules
-        if (text.startsWith("[")) {
+        if (text.startsWith("[") && debug === "verbose") {
           console.log(`Rules:\n---\n${text}`);
         }
       }

package/src/metro/index.ts

@@ -2,12 +2,14 @@
 import { dirname, relative, sep } from "node:path";
 import { versions } from "node:process";
 
-import connect from "connect";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions, ReactNativeCssStyleSheet } from "../compiler";
-import { compile } from "../compiler/compiler";
+import {
+  compile,
+  type CompilerOptions,
+  type ReactNativeCssStyleSheet,
+} from "../compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
@@ -50,12 +52,9 @@ export function withReactNativeCSS<
     setupTypeScript(typescriptEnvPath);
   }
 
-  const originalMiddleware = config.server?.enhanceMiddleware;
-  const originalResolver = config.resolver?.resolveRequest;
-
   return {
     ...config,
-    transformerPath: require.resolve("./metro-transformer"),
+    // transformerPath: require.resolve("./metro-transformer"),
     transformer: {
       ...config.transformer,
       reactNativeCSS: options,
@@ -68,13 +67,14 @@ export function withReactNativeCSS<
           return { type: "empty" };
         }
 
+        const parentResolver =
+          config.resolver?.resolveRequest ?? context.resolveRequest;
+
         // Don't hijack the resolution of react-native imports
         if (!globalClassNamePolyfill) {
-          const parentResolver = originalResolver ?? context.resolveRequest;
           return parentResolver(context, moduleName, platform);
         }
 
-        const parentResolver = originalResolver ?? context.resolveRequest;
         const resolver = platform === "web" ? webResolver : nativeResolver;
         const resolved = resolver(
           parentResolver,
@@ -88,8 +88,7 @@ export function withReactNativeCSS<
     },
     server: {
       ...config.server,
-      enhanceMiddleware(middleware, metroServer) {
-        const server = connect();
+      enhanceMiddleware(metroMiddleware, metroServer) {
         const bundler: any = metroServer.getBundler().getBundler();
 
         if (!bundler.__react_native_css__patched) {
@@ -101,9 +100,7 @@ export function withReactNativeCSS<
           >();
           const webCSSFiles = new Set<string>();
 
-          const nativeInjectionPath = require.resolve(
-            "../runtime/native/metro",
-          );
+          const nativeInjectionPath = require.resolve("../native/metro");
           const nativeInjectionFilepaths = [
             // CommonJS
             nativeInjectionPath,
@@ -118,7 +115,7 @@ export function withReactNativeCSS<
               .replace(".js", ".ts"),
           ];
 
-          const webInjectionPath = require.resolve("../runtime/web/metro");
+          const webInjectionPath = require.resolve("../web/metro");
           const webInjectionFilepaths = [
             // CommonJS
             webInjectionPath,
@@ -230,9 +227,14 @@ export function withReactNativeCSS<
           };
         }
 
-        return originalMiddleware
-          ? server.use(originalMiddleware(middleware, metroServer))
-          : server.use(middleware);
+        /**
+         * We don't modify the middleware, we just use this function to get the metroServer
+         * So simply return the existing middleware
+         */
+        return (
+          config.server?.enhanceMiddleware?.(metroMiddleware, metroServer) ??
+          metroMiddleware
+        );
       },
     },
   };

package/src/metro/injection-code.ts

@@ -29,6 +29,6 @@ export function getNativeInjectionCode(
     .join("\n");
 
   return Buffer.from(
-    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`,
   );
 }

package/src/native/api.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable  */
+import { useContext, useState } from "react";
+import { Appearance } from "react-native";
+
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { VariableContext } from "react-native-css/native-internal";
+
+import type {
+  ColorScheme,
+  Props,
+  ReactComponent,
+  StyledConfiguration,
+  StyledOptions,
+} from "../runtime.types";
+import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
+import { usePassthrough } from "./react/usePassthrough";
+import {
+  colorScheme as colorSchemeObs,
+  VAR_SYMBOL,
+  type Effect,
+  type Getter,
+} from "./reactivity";
+import { resolveValue } from "./styles/resolve";
+
+export {
+  StyleCollection,
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
+
+export { useNativeCss };
+
+/**
+ * Generates a new Higher-Order component the wraps the base component and applies the styles.
+ * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
+ * @param baseComponent
+ * @param mapping
+ */
+export const styled = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  baseComponent: C,
+  mapping: M,
+  options?: StyledOptions,
+) => {
+  let component: any;
+  // const type = getComponentType(baseComponent);
+
+  const configs = mappingToConfig(mapping);
+
+  if (options?.passThrough) {
+    component = (props: Record<string, any>) => {
+      return usePassthrough(baseComponent, props, configs);
+    };
+  } else {
+    component = (props: Record<string, any>) => {
+      return useNativeCss(baseComponent, props, configs);
+    };
+  }
+
+  const name = baseComponent.displayName ?? baseComponent.name ?? "unknown";
+  component.displayName = `CssInterop.${name}`;
+  return component;
+};
+
+export const colorScheme: ColorScheme = {
+  get() {
+    return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
+  },
+  set(value) {
+    return colorSchemeObs.set(value);
+  },
+};
+
+export const useUnstableNativeVariable = useNativeVariable;
+
+export const useCssElement = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  component: C,
+  incomingProps: Props,
+  mapping: M,
+) => {
+  const [config] = useState(() => mappingToConfig(mapping));
+  return useNativeCss(component, incomingProps, config);
+};
+
+export function useNativeVariable(name: string) {
+  if (name.startsWith("--")) {
+    name = name.slice(2);
+  }
+
+  const inheritedVariables = useContext(VariableContext);
+  const [effect, setState] = useState(() => {
+    const effect: Effect = {
+      observers: new Set(),
+      run: () => setState((state) => ({ ...state })),
+    };
+
+    const get: Getter = (observable) => observable.get(effect);
+
+    return { ...effect, get };
+  });
+
+  return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
+}
+
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+export function vars(variables: Record<string, StyleDescriptor>) {
+  return Object.assign(
+    { [VAR_SYMBOL]: "inline" },
+    Object.fromEntries(
+      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
+    ),
+  );
+}