react-native-css 0.0.0-nightly.29e03e1 → 0.0.0-nightly.2cfbf16

package/src/compiler/lightningcss-loader.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+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",
+    );
+  }
+
+  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/pseudo-elements.ts

@@ -1,4 +1,4 @@
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type { StyleDeclaration, StyleRule } from "./compiler.types";
 
 export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {

package/src/compiler/selector-builder.ts

@@ -1,6 +1,6 @@
 import type { AttrOperation, Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,
@@ -44,11 +44,6 @@ type ContainerQueryWithSpecificity = ContainerQuery & {
 export function getClassNameSelectors(
   selectors: SelectorList,
   options: CompilerOptions = {},
-  specificity: SpecificityArray = [0],
-  root: PartialSelector = {
-    type: "className",
-    specificity: [],
-  },
 ) {
   if (!selectors.length) {
     return [];
@@ -56,6 +51,13 @@ export function getClassNameSelectors(
 
   return selectors.flatMap(
     (selector): (ReactNativeGlobalSelector | PartialSelector)[] => {
+      const root: PartialSelector = {
+        type: "className",
+        specificity: [],
+      };
+
+      const specificity: SpecificityArray = [0];
+
       if (isRootVariableSelector(selector)) {
         return [{ type: "rootVariables" }];
       } else if (isUniversalSelector(selector)) {
@@ -555,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/selectors.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils/specificity";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,

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];
     }
@@ -584,6 +577,12 @@ export class StylesheetBuilder {
     this.ruleTemplate.cq.push(query);
   }
 
+  addRootVariable(name: string, value: StyleDescriptor) {
+    this.shared.rootVariables ??= {};
+    this.shared.rootVariables[name] ??= [];
+    this.shared.rootVariables[name].push([value]);
+  }
+
   newAnimationFrames(name: string) {
     this.shared.animations ??= {};
 

package/src/compiler/supports.ts

@@ -21,6 +21,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,21 +7,24 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
 
-const mapping = {
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   className: {
     target: "style",
     nativeStyleMapping: {
       color: "color",
     },
   },
-} satisfies 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,19 +4,24 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
 
-const mapping = {
+import { copyComponentProperties } from "./copyComponentProperties";
+
+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);
-}
+export const Button = copyComponentProperties(
+  RNButton,
+  (props: StyledProps<ButtonProps, typeof mapping>) => {
+    return useCssElement(RNButton, props, mapping);
+  },
+);
 
 export default Button;

package/src/components/FlatList.tsx

@@ -1,21 +1,32 @@
+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";
 
-const mapping = {
-  columnWrapperStyle: "columnWrapperStyle",
-  listFooterComponentClassName: "ListFooterComponentStyle",
-  listHeaderComponentClassName: "ListHeaderComponentStyle",
-} satisfies StyledConfiguration<typeof RNFlatList>;
+import { copyComponentProperties } from "./copyComponentProperties";
 
-export function FlatList<ItemT>(
-  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
-) {
+const mapping: StyledConfiguration<typeof RNFlatList> = {
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+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";
 
-const mapping = {
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNImage> = {
   className: "style",
-} satisfies StyledConfiguration<typeof RNImage>;
+};
 
-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

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

package/src/components/KeyboardAvoidingView.tsx

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

package/src/components/Pressable.tsx

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

package/src/components/SafeAreaProvider.tsx

@@ -0,0 +1 @@
+export { SafeAreaProvider } from "react-native-css/components/react-native-safe-area-context";

package/src/components/ScrollView.tsx

@@ -0,0 +1,23 @@
+import { ScrollView as RNScrollView, type ScrollViewProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNScrollView> = {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+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 "../runtime";
+} 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,14 +4,24 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
 
-const mapping = {
-  className: "style",
-} satisfies StyledConfiguration<typeof RNTextInput>;
+import { copyComponentProperties } from "./copyComponentProperties";
 
-export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
-  return useCssElement(RNTextInput, props, mapping);
-}
+const mapping: StyledConfiguration<typeof RNTextInput> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      textAlign: true,
+    },
+  },
+};
+
+export const TextInput = copyComponentProperties(
+  RNTextInput,
+  (props: StyledProps<TextInputProps, typeof mapping>) => {
+    return useCssElement(RNTextInput, props, mapping);
+  },
+);
 
 export default TextInput;

package/src/components/TouchableHighlight.tsx

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

package/src/components/TouchableOpacity.tsx

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

package/src/components/TouchableWithoutFeedback.tsx

@@ -0,0 +1,25 @@
+import {
+  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
+  type TouchableWithoutFeedbackProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback> = {
+  className: "style",
+};
+
+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 "../runtime";
+} 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;