react-native-css 0.0.0-nightly.81d3fdb → 0.0.0-nightly.8a01f75

package/src/compiler/declarations.ts

@@ -1228,6 +1228,8 @@ export function parseUnparsed(
             builder,
             property,
           );
+        case "color-mix":
+          return parseColorMix(tokenOrValue.value.arguments, builder, property);
         default: {
           builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
@@ -2633,6 +2635,100 @@ export function parseCalcFn(
   return;
 }
 
+export function parseColorMix(
+  tokens: TokenOrValue[],
+  builder: StylesheetBuilder,
+  property: string,
+): StyleDescriptor {
+  const [inToken, whitespace, colorSpace, comma, ...rest] = tokens;
+  if (
+    typeof inToken !== "object" ||
+    inToken.type !== "token" ||
+    inToken.value.type !== "ident" ||
+    inToken.value.value !== "in"
+  ) {
+    return;
+  }
+
+  if (
+    typeof whitespace !== "object" ||
+    whitespace.type !== "token" ||
+    whitespace.value.type !== "white-space"
+  ) {
+    return;
+  }
+
+  if (
+    typeof comma !== "object" ||
+    comma.type !== "token" ||
+    comma.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  const colorSpaceArg = parseUnparsed(colorSpace, builder, property);
+  if (typeof colorSpaceArg !== "string") {
+    return;
+  }
+
+  let nextToken = rest.shift();
+
+  const leftColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (!leftColorArg) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  let leftColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    leftColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  if (
+    typeof nextToken !== "object" ||
+    nextToken.type !== "token" ||
+    nextToken.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  const rightColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (rightColorArg === "transparent") {
+    // Ignore the rest, treat as single color with alpha
+    return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage]];
+  }
+
+  nextToken = rest.shift();
+  let rightColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    rightColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  // We should have expired all tokens now
+  if (nextToken) {
+    return;
+  }
+
+  return [
+    {},
+    "colorMix",
+    [
+      colorSpaceArg,
+      leftColorArg,
+      leftColorPercentage,
+      rightColorArg,
+      rightColorPercentage,
+    ],
+  ];
+}
+
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 export function lightningcssLoader() {
   let lightningcssPath: string | undefined;
 
@@ -28,11 +29,29 @@ export function lightningcssLoader() {
     );
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { transform: lightningcss, Features } = require(
     lightningcssPath,
   ) as typeof import("lightningcss");
 
+  try {
+    const lightningcssPackageJSONPath = require.resolve("../../package.json", {
+      paths: [lightningcssPath],
+    });
+
+    const packageJSON = require(lightningcssPackageJSONPath) as Record<
+      string,
+      unknown
+    >;
+
+    if (packageJSON.version === "1.30.2") {
+      throw new Error(
+        "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightningcss to 1.30.1; or try upgrading.",
+      );
+    }
+  } catch {
+    // Intentionally left empty
+  }
+
   return {
     lightningcss,
     Features,

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: {

package/src/compiler/supports.ts

@@ -23,4 +23,6 @@ export function supportsConditionValid(condition: SupportsCondition): boolean {
 const declarations: Record<string, string[]> = {
   // We don't actually support this, but its needed for Tailwind CSS
   "-moz-orient": ["inline"],
+  // Special text used by TailwindCSS. We should probably change this to all color-mix
+  "color": ["color-mix(in lab, red, red)"],
 };

package/src/components/ActivityIndicator.tsx

@@ -7,7 +7,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   className: {
@@ -18,10 +20,11 @@ const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   },
 };
 
-export function ActivityIndicator(
-  props: StyledProps<ActivityIndicatorProps, typeof mapping>,
-) {
-  return useCssElement(RNActivityIndicator, props, mapping);
-}
+export const ActivityIndicator = copyComponentProperties(
+  RNActivityIndicator,
+  (props: StyledProps<ActivityIndicatorProps, typeof mapping>) => {
+    return useCssElement(RNActivityIndicator, props, mapping);
+  },
+);
 
 export default ActivityIndicator;

package/src/components/Button.tsx

@@ -4,7 +4,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNButton> = {
   className: {
@@ -15,8 +17,11 @@ const mapping: StyledConfiguration<typeof RNButton> = {
   },
 };
 
-export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
-  return useCssElement(RNButton, props, mapping);
-}
+export const Button = copyComponentProperties(
+  RNButton,
+  (props: StyledProps<ButtonProps, typeof mapping>) => {
+    return useCssElement(RNButton, props, mapping);
+  },
+);
 
 export default Button;

package/src/components/FlatList.tsx

@@ -1,10 +1,13 @@
+import type { ReactNode } from "react";
 import { FlatList as RNFlatList, type FlatListProps } from "react-native";
 
 import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNFlatList> = {
   ListFooterComponentClassName: "ListFooterComponentStyle",
@@ -13,10 +16,16 @@ const mapping: StyledConfiguration<typeof RNFlatList> = {
   contentContainerClassName: "contentContainerStyle",
 };
 
-export function FlatList<ItemT>(
-  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
-) {
+export const FlatList = copyComponentProperties(RNFlatList, function <
+  ItemT,
+>(props: StyledProps<FlatListProps<ItemT>, typeof mapping>) {
   return useCssElement(RNFlatList, props, mapping);
-}
+}) as unknown as typeof RNFlatList &
+  (<ItemT>(
+    props: StyledProps<
+      FlatListProps<ItemT>,
+      StyledConfiguration<typeof RNFlatList>
+    >,
+  ) => ReactNode);
 
 export default FlatList;

package/src/components/Image.tsx

@@ -4,14 +4,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNImage> = {
   className: "style",
 };
 
-export function Image(props: StyledProps<ImageProps, typeof mapping>) {
-  return useCssElement(RNImage, props, mapping);
-}
+export const Image = copyComponentProperties(
+  RNImage,
+  (props: StyledProps<ImageProps, typeof mapping>) => {
+    return useCssElement(RNImage, props, mapping);
+  },
+);
 
 export default Image;

package/src/components/ImageBackground.tsx

@@ -7,7 +7,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNImageBackground> = {
   className: {
@@ -18,10 +20,11 @@ const mapping: StyledConfiguration<typeof RNImageBackground> = {
   },
 };
 
-export function ImageBackground(
-  props: StyledProps<ImageBackgroundProps, typeof mapping>,
-) {
-  return useCssElement(RNImageBackground, props, mapping);
-}
+export const ImageBackground = copyComponentProperties(
+  RNImageBackground,
+  (props: StyledProps<ImageBackgroundProps, typeof mapping>) => {
+    return useCssElement(RNImageBackground, props, mapping);
+  },
+);
 
 export default ImageBackground;

package/src/components/KeyboardAvoidingView.tsx

@@ -7,7 +7,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
   className: {
@@ -15,10 +17,11 @@ const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
   },
 };
 
-export function KeyboardAvoidingView(
-  props: StyledProps<KeyboardAvoidingViewProps, typeof mapping>,
-) {
-  return useCssElement(RNKeyboardAvoidingView, props, mapping);
-}
+export const KeyboardAvoidingView = copyComponentProperties(
+  RNKeyboardAvoidingView,
+  (props: StyledProps<KeyboardAvoidingViewProps, typeof mapping>) => {
+    return useCssElement(RNKeyboardAvoidingView, props, mapping);
+  },
+);
 
 export default KeyboardAvoidingView;

package/src/components/Pressable.tsx

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

package/src/components/ScrollView.tsx

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

package/src/components/Switch.tsx

@@ -4,14 +4,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping = {
   className: "style",
 } satisfies StyledConfiguration<typeof RNSwitch>;
 
-export function Switch(props: StyledProps<SwitchProps, typeof mapping>) {
-  return useCssElement(RNSwitch, props, mapping);
-}
+export const Switch = copyComponentProperties(
+  RNSwitch,
+  (props: StyledProps<SwitchProps, typeof mapping>) => {
+    return useCssElement(RNSwitch, props, mapping);
+  },
+);
 
 export default Switch;

package/src/components/Text.tsx

@@ -4,14 +4,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "react-native-css/native";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping = {
   className: "style",
 } satisfies StyledConfiguration<typeof RNText>;
 
-export function Text(props: StyledProps<TextProps, typeof mapping>) {
-  return useCssElement(RNText, props, mapping);
-}
+export const Text = copyComponentProperties(
+  RNText,
+  (props: StyledProps<TextProps, typeof mapping>) => {
+    return useCssElement(RNText, props, mapping);
+  },
+);
 
 export default Text;

package/src/components/TextInput.tsx

@@ -4,7 +4,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNTextInput> = {
   className: {
@@ -15,8 +17,11 @@ const mapping: StyledConfiguration<typeof RNTextInput> = {
   },
 };
 
-export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
-  return useCssElement(RNTextInput, props, mapping);
-}
+export const TextInput = copyComponentProperties(
+  RNTextInput,
+  (props: StyledProps<TextInputProps, typeof mapping>) => {
+    return useCssElement(RNTextInput, props, mapping);
+  },
+);
 
 export default TextInput;

package/src/components/TouchableHighlight.tsx

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

package/src/components/TouchableOpacity.tsx

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

package/src/components/TouchableWithoutFeedback.tsx

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

package/src/components/View.tsx

@@ -4,14 +4,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "react-native-css/native";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping = {
   className: "style",
 } satisfies StyledConfiguration<typeof RNView>;
 
-export function View(props: StyledProps<ViewProps, typeof mapping>) {
-  return useCssElement(RNView, props, mapping);
-}
+export const View = copyComponentProperties(
+  RNView,
+  (props: StyledProps<ViewProps, typeof mapping>) => {
+    return useCssElement(RNView, props, mapping);
+  },
+);
 
 export default View;

package/src/components/VirtualizedList.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import {
   VirtualizedList as RNVirtualizedList,
   type VirtualizedListProps,
@@ -7,7 +8,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   className: "style",
@@ -16,10 +19,19 @@ const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   contentContainerClassName: "contentContainerStyle",
 };
 
-export function VirtualizedList<ItemT>(
-  props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
-) {
-  return useCssElement(RNVirtualizedList, props, mapping);
-}
+export const VirtualizedList = copyComponentProperties(
+  RNVirtualizedList,
+  function <ItemT>(
+    props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
+  ) {
+    return useCssElement(RNVirtualizedList, props, mapping);
+  },
+) as unknown as typeof RNVirtualizedList &
+  (<ItemT>(
+    props: StyledProps<
+      VirtualizedListProps<ItemT>,
+      StyledConfiguration<typeof RNVirtualizedList>
+    >,
+  ) => ReactNode);
 
 export default VirtualizedList;

package/src/components/copyComponentProperties.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ComponentType<any>;
+
+export function copyComponentProperties<T extends AnyComponent>(
+  BaseComponent: T,
+  Component: AnyComponent,
+) {
+  for (const [key, value] of Object.entries(BaseComponent)) {
+    if (key === "$$typeof" || key === "render" || key === "contextType") {
+      continue;
+    }
+
+    (Component as unknown as Record<string, unknown>)[key] = value;
+  }
+
+  Component.displayName = BaseComponent.displayName;
+
+  return Component as unknown as T;
+}