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

package/src/compiler/stylesheet.ts

@@ -4,7 +4,7 @@ import {
   isStyleDescriptorArray,
   Specificity,
   specificityCompareFn,
-} from "../runtime/utils";
+} from "../utilities";
 import type {
   AnimationKeyframes,
   AnimationRecord,
@@ -56,7 +56,7 @@ export class StylesheetBuilder {
     private ruleTemplate: StyleRule = {
       s: [],
     },
-    // Any default mapping should be included in the @prop parsing
+    // Any default mapping should be included in the @nativeMapping parsing
     private mapping: StyleRuleMapping = {},
     public descriptorProperty?: string,
     private shared: {
@@ -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;
 
@@ -408,12 +403,10 @@ export class StylesheetBuilder {
       } else {
         forceTuple = true;
       }
-    } else if (propPath) {
-      forceTuple = true;
-    } else {
-      propPath = property;
     }
 
+    propPath ??= property;
+
     if (forceTuple && !Array.isArray(propPath)) {
       propPath = [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.cts

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+module.exports = {
+  get ActivityIndicator() {
+    return require("./ActivityIndicator").ActivityIndicator;
+  },
+  get Button() {
+    return require("./Button").Button;
+  },
+  get FlatList() {
+    return require("./FlatList").FlatList;
+  },
+  get Image() {
+    return require("./Image").Image;
+  },
+  get ImageBackground() {
+    return require("./ImageBackground").ImageBackground;
+  },
+  get KeyboardAvoidingView() {
+    return require("./KeyboardAvoidingView").KeyboardAvoidingView;
+  },
+  get Pressable() {
+    return require("./Pressable").Pressable;
+  },
+  get Switch() {
+    return require("./Switch").Switch;
+  },
+  get Text() {
+    return require("./Text").Text;
+  },
+  get TextInput() {
+    return require("./TextInput").TextInput;
+  },
+  get TouchableHighlight() {
+    return require("./TouchableHighlight").TouchableHighlight;
+  },
+  get TouchableOpacity() {
+    return require("./TouchableOpacity").TouchableOpacity;
+  },
+  get View() {
+    return require("./View").View;
+  },
+  get VirtualizedList() {
+    return require("./VirtualizedList").VirtualizedList;
+  },
+
+  /**
+   * We need to return
+   */
+  get DrawerLayoutAndroid() {
+    return require("react-native").DrawerLayoutAndroid;
+  },
+  get InputAccessoryView() {
+    return require("react-native").InputAccessoryView;
+  },
+  get experimental_LayoutConformance() {
+    return require("react-native").experimental_LayoutConformance;
+  },
+  get Modal() {
+    return require("react-native").Modal;
+  },
+  get ProgressBarAndroid() {
+    return require("react-native").ProgressBarAndroid;
+  },
+  get RefreshControl() {
+    return require("react-native").RefreshControl;
+  },
+  get SafeAreaView() {
+    return require("react-native").SafeAreaView;
+  },
+  get ScrollView() {
+    return require("react-native").ScrollView;
+  },
+  get SectionList() {
+    return require("react-native").SectionList;
+  },
+  get StatusBar() {
+    return require("react-native").StatusBar;
+  },
+  get unstable_TextAncestorContext() {
+    return require("react-native").unstable_TextAncestorContext;
+  },
+  get Touchable() {
+    return require("react-native").Touchable;
+  },
+  get TouchableNativeFeedback() {
+    return require("react-native").TouchableNativeFeedback;
+  },
+  get TouchableWithoutFeedback() {
+    return require("react-native").TouchableWithoutFeedback;
+  },
+  get VirtualizedSectionList() {
+    return require("react-native").VirtualizedSectionList;
+  },
+  get unstable_VirtualView() {
+    return require("react-native").unstable_VirtualView;
+  },
+  get AccessibilityInfo() {
+    return require("react-native").AccessibilityInfo;
+  },
+  get ActionSheetIOS() {
+    return require("react-native").ActionSheetIOS;
+  },
+  get Alert() {
+    return require("react-native").Alert;
+  },
+  get Animated() {
+    return require("react-native").Animated;
+  },
+  get Appearance() {
+    return require("react-native").Appearance;
+  },
+  get AppRegistry() {
+    return require("react-native").AppRegistry;
+  },
+  get AppState() {
+    return require("react-native").AppState;
+  },
+  get BackHandler() {
+    return require("react-native").BackHandler;
+  },
+  get Clipboard() {
+    return require("react-native").Clipboard;
+  },
+  get codegenNativeCommands() {
+    return require("react-native").codegenNativeCommands;
+  },
+  get codegenNativeComponent() {
+    return require("react-native").codegenNativeComponent;
+  },
+  get DeviceEventEmitter() {
+    return require("react-native").DeviceEventEmitter;
+  },
+  get DeviceInfo() {
+    return require("react-native").DeviceInfo;
+  },
+  get DevMenu() {
+    return require("react-native").DevMenu;
+  },
+  get DevSettings() {
+    return require("react-native").DevSettings;
+  },
+  get Dimensions() {
+    return require("react-native").Dimensions;
+  },
+  get DynamicColorIOS() {
+    return require("react-native").DynamicColorIOS;
+  },
+  get Easing() {
+    return require("react-native").Easing;
+  },
+  get findNodeHandle() {
+    return require("react-native").findNodeHandle;
+  },
+  get I18nManager() {
+    return require("react-native").I18nManager;
+  },
+  get InteractionManager() {
+    return require("react-native").InteractionManager;
+  },
+  get Keyboard() {
+    return require("react-native").Keyboard;
+  },
+  get LayoutAnimation() {
+    return require("react-native").LayoutAnimation;
+  },
+  get Linking() {
+    return require("react-native").Linking;
+  },
+  get LogBox() {
+    return require("react-native").LogBox;
+  },
+  get NativeAppEventEmitter() {
+    return require("react-native").NativeAppEventEmitter;
+  },
+  get NativeDialogManagerAndroid() {
+    return require("react-native").NativeDialogManagerAndroid;
+  },
+  get NativeEventEmitter() {
+    return require("react-native").NativeEventEmitter;
+  },
+  get NativeModules() {
+    return require("react-native").NativeModules;
+  },
+  get Networking() {
+    return require("react-native").Networking;
+  },
+  get PanResponder() {
+    return require("react-native").PanResponder;
+  },
+  get PermissionsAndroid() {
+    return require("react-native").PermissionsAndroid;
+  },
+  get PixelRatio() {
+    return require("react-native").PixelRatio;
+  },
+  get Platform() {
+    return require("react-native").Platform;
+  },
+  get PlatformColor() {
+    return require("react-native").PlatformColor;
+  },
+  get PushNotificationIOS() {
+    return require("react-native").PushNotificationIOS;
+  },
+  get processColor() {
+    return require("react-native").processColor;
+  },
+  get registerCallableModule() {
+    return require("react-native").registerCallableModule;
+  },
+  get requireNativeComponent() {
+    return require("react-native").requireNativeComponent;
+  },
+  get RootTagContext() {
+    return require("react-native").RootTagContext;
+  },
+  get Settings() {
+    return require("react-native").Settings;
+  },
+  get Share() {
+    return require("react-native").Share;
+  },
+  get StyleSheet() {
+    return require("react-native").StyleSheet;
+  },
+  get Systrace() {
+    return require("react-native").Systrace;
+  },
+  get ToastAndroid() {
+    return require("react-native").ToastAndroid;
+  },
+  get TurboModuleRegistry() {
+    return require("react-native").TurboModuleRegistry;
+  },
+  get UIManager() {
+    return require("react-native").UIManager;
+  },
+  get unstable_batchedUpdates() {
+    return require("react-native").unstable_batchedUpdates;
+  },
+  get useAnimatedValue() {
+    return require("react-native").useAnimatedValue;
+  },
+  get useColorScheme() {
+    return require("react-native").useColorScheme;
+  },
+  get useWindowDimensions() {
+    return require("react-native").useWindowDimensions;
+  },
+  get UTFSequence() {
+    return require("react-native").UTFSequence;
+  },
+  get Vibration() {
+    return require("react-native").Vibration;
+  },
+  get VirtualViewMode() {
+    return require("react-native").VirtualViewMode;
+  },
+};

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export * from "react-native";
+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";