react-native-css 3.0.0 → 3.0.1

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/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/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

@@ -9,6 +9,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   className: {
     target: "style",
@@ -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

@@ -6,6 +6,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNButton> = {
   className: {
     target: false,
@@ -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,3 +1,4 @@
+import type { ReactNode } from "react";
 import { FlatList as RNFlatList, type FlatListProps } from "react-native";
 
 import {
@@ -6,6 +7,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNFlatList> = {
   ListFooterComponentClassName: "ListFooterComponentStyle",
   ListHeaderComponentClassName: "ListHeaderComponentStyle",
@@ -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

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } 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

@@ -9,6 +9,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNImageBackground> = {
   className: {
     target: "style",
@@ -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

@@ -9,16 +9,19 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
   className: {
     target: "style",
   },
 };
 
-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

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } 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

@@ -6,15 +6,18 @@ import {
   type StyledProps,
 } 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

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } 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

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } 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

@@ -6,6 +6,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNTextInput> = {
   className: {
     target: "style",
@@ -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

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } 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

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } 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

@@ -9,14 +9,17 @@ import {
   type StyledProps,
 } 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

@@ -6,12 +6,17 @@ import {
   type StyledProps,
 } 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,
@@ -9,6 +10,8 @@ import {
   type StyledProps,
 } from "react-native-css";
 
+import { copyComponentProperties } from "./copyComponentProperties";
+
 const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   className: "style",
   ListFooterComponentClassName: "ListFooterComponentStyle",
@@ -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;
+}

package/src/components/index.cts

@@ -25,6 +25,9 @@ module.exports = {
   get Pressable() {
     return require("./Pressable").Pressable;
   },
+  get ScrollView() {
+    return require("./ScrollView").ScrollView;
+  },
   get Switch() {
     return require("./Switch").Switch;
   },
@@ -71,9 +74,6 @@ module.exports = {
   get SafeAreaView() {
     return require("react-native").SafeAreaView;
   },
-  get ScrollView() {
-    return require("react-native").ScrollView;
-  },
   get SectionList() {
     return require("react-native").SectionList;
   },

package/src/metro/resolver.ts

@@ -26,7 +26,7 @@ export function nativeResolver(
   const resolution = resolver(context, moduleName, platform);
   const isInternal = isFromThisModule(context.originModulePath);
   const isReactNativeIndex = context.originModulePath.endsWith(
-    `react-native${sep}index.js`,
+    `${sep}react-native${sep}index.js`,
   );
 
   if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
@@ -73,7 +73,9 @@ export function webResolver(
     // Only operate on source files
     resolution.type !== "sourceFile" ||
     // Skip anything that isn't importing from `react-native-web`
-    !resolution.filePath.includes(`${sep}react-native-web${sep}`)
+    !resolution.filePath.includes(`${sep}react-native-web${sep}`) ||
+    // Skip internal react-native-web files
+    resolution.filePath.includes(`${sep}react-native-web${sep}dist${sep}vendor`)
   ) {
     return resolution;
   }
@@ -83,7 +85,12 @@ export function webResolver(
   const isIndex = segments.at(-1)?.startsWith("index.");
   const module = segments.at(-2);
 
-  if (!isIndex || !module || !allowedModules.has(module)) {
+  if (
+    !isIndex ||
+    !module ||
+    !allowedModules.has(module) ||
+    module === "VirtualizedList"
+  ) {
     return resolution;
   }
 

package/src/native/api.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useState, type ComponentType } from "react";
 import { Appearance } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
@@ -30,6 +30,10 @@ export {
 
 export { useNativeCss };
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 /**
  * 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
@@ -41,7 +45,7 @@ export const styled = <
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   options?: StyledOptions,
 ) => {
   let component: any;