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

package/src/compiler/keyframes.ts

@@ -10,9 +10,9 @@ import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseIterationCount(
   value: AnimationIterationCount[],
-): number[] {
+): (number | "infinite")[] {
   return value.map((value) => {
-    return value.type === "infinite" ? -1 : value.value;
+    return value.type === "infinite" ? value.type : value.value;
   });
 }
 

package/src/compiler/lightningcss-loader.ts

@@ -0,0 +1,40 @@
+export function lightningcssLoader() {
+  let lightningcssPath: string | undefined;
+
+  // Try to resolve the path to lightningcss from the @expo/metro-config package
+  // lightningcss is a direct dependency of @expo/metro-config
+  try {
+    lightningcssPath = require.resolve("lightningcss", {
+      paths: [
+        require
+          .resolve("@expo/metro-config/package.json")
+          .replace("/package.json", ""),
+      ],
+    });
+  } catch {
+    // Intentionally left empty
+  }
+
+  // If @expo/metro-config is not being used (non-metro bundler?), try and resolve it directly
+  try {
+    lightningcssPath ??= require.resolve("lightningcss");
+  } catch {
+    // Intentionally left empty
+  }
+
+  if (!lightningcssPath) {
+    throw new Error(
+      "react-native-css was unable to determine the path to lightningcss",
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { transform: lightningcss, Features } = require(
+    lightningcssPath,
+  ) as typeof import("lightningcss");
+
+  return {
+    lightningcss,
+    Features,
+  };
+}

package/src/compiler/selector-builder.ts

@@ -557,9 +557,13 @@ function getMediaQuery(
   return mediaQuery;
 }
 
-function isRootVariableSelector([first, second]: Selector) {
+function isRootVariableSelector([first, ...rest]: Selector) {
+  rest = rest.filter((item) => item.type !== "nesting");
   return (
-    first && !second && first.type === "pseudo-class" && first.kind === "root"
+    first &&
+    rest.length === 0 &&
+    first.type === "pseudo-class" &&
+    first.kind === "root"
   );
 }
 

package/src/compiler/stylesheet.ts

@@ -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 */
@@ -403,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/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/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/index.ts

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

package/src/jest/index.ts

@@ -27,7 +27,8 @@ beforeEach(() => {
 
 const debugDefault = Boolean(
   process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
-    process.env.NODE_OPTIONS?.includes("--inspect"),
+    typeof process.env.NODE_OPTIONS === "string" &&
+    process.env.NODE_OPTIONS.includes("--inspect"),
 );
 
 export function registerCSS(