react-native-css 0.0.0-nightly.99fdf44 → 0.0.0-nightly.a37903f

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,6 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { dirname, resolve } from "node:path";
+
 export function lightningcssLoader() {
   let lightningcssPath: string | undefined;
 
@@ -28,11 +31,28 @@ export function lightningcssLoader() {
     );
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { transform: lightningcss, Features } = require(
     lightningcssPath,
   ) as typeof import("lightningcss");
 
+  let version: unknown;
+  try {
+    // Lightning CSS keeps its entry in node/ and does not export package.json.
+    // Resolve relative to the selected copy, not the consumer or this loader.
+    const packageJSON = require(
+      resolve(dirname(lightningcssPath), "../package.json"),
+    ) as Record<string, unknown>;
+    version = packageJSON.version;
+  } catch {
+    // Some bundlers do not retain package metadata. Loading remains supported.
+  }
+
+  if (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.",
+    );
+  }
+
   return {
     lightningcss,
     Features,

package/src/compiler/media-query.ts

@@ -24,9 +24,10 @@ export function parseMediaQuery(
   let condition: MediaCondition | undefined;
 
   if (query.mediaType) {
-    // Print is for printing documents
+    // Native screens never match print. Negating that media type matches
+    // regardless of the remaining feature tests in the same conjunction.
     if (query.mediaType === "print") {
-      return;
+      return query.qualifier === "not";
     }
 
     // These all/screen are not conditions, they always apply
@@ -40,7 +41,7 @@ export function parseMediaQuery(
 
     // If any of these are undefined, the media query is invalid
     if (!condition || condition.some((v) => v === undefined)) {
-      return;
+      return false;
     }
   }
 
@@ -50,7 +51,8 @@ export function parseMediaQuery(
       : platformCondition || condition;
 
   if (!mediaQuery) {
-    return;
+    // Unqualified all/screen apply; not all and not screen do not.
+    return query.qualifier !== "not";
   }
 
   if (query.qualifier === "not") {
@@ -58,6 +60,7 @@ export function parseMediaQuery(
   }
 
   builder.addMediaQuery(mediaQuery);
+  return true;
 }
 
 function parseMediaQueryCondition(
@@ -65,15 +68,23 @@ function parseMediaQueryCondition(
   builder: StylesheetBuilder,
 ): MediaCondition | undefined {
   switch (query.type) {
-    case "feature":
-      return parseFeature(query.value, builder);
+    case "feature": {
+      const feature = parseFeature(query.value, builder);
+      return feature?.some((value) => value === undefined)
+        ? undefined
+        : feature;
+    }
     case "not":
       const mediaQuery = parseMediaQueryCondition(query.value, builder);
       return mediaQuery ? ["!", mediaQuery] : undefined;
     case "operation":
-      const mediaQueries = query.conditions
-        .map((c) => parseMediaQueryCondition(c, builder))
-        .filter((v): v is MediaCondition => !!v);
+      const parsed = query.conditions.map((c) =>
+        parseMediaQueryCondition(c, builder),
+      );
+      if (query.operator === "and" && parsed.some((c) => !c)) {
+        return;
+      }
+      const mediaQueries = parsed.filter((v): v is MediaCondition => !!v);
 
       if (mediaQueries.length === 0) {
         return;

package/src/compiler/selector-builder.ts

@@ -63,9 +63,10 @@ export function getClassNameSelectors(
       } else if (isUniversalSelector(selector)) {
         return [{ type: "universalVariables" }];
       } else {
+        // A nested rule reads its parent's selector list again, so the list is never reversed in place
         return (
           parseComponents(
-            selector.reverse(),
+            selector.toReversed(),
             options,
             root,
             root,
@@ -260,7 +261,12 @@ function parseComponents(
           ? // [data-*] are turned into `dataSet` queries
             ["d", toRNProperty(component.name.replace("data-", ""))]
           : // Everything else is turned into `attribute` queries
-            ["a", toRNProperty(component.name)];
+            [
+              "a",
+              component.name.startsWith("aria-")
+                ? component.name
+                : toRNProperty(component.name),
+            ];
         if (component.operation) {
           let operator: AttrSelectorOperator | undefined;
           switch (component.operation.operator) {
@@ -289,6 +295,15 @@ function parseComponents(
           if (operator) {
             // Append the operator onto the attribute query
             attributeQuery.push(operator, component.operation.value);
+            if (
+              component.operation.caseSensitivity === "ascii-case-insensitive"
+            ) {
+              attributeQuery.push("i");
+            } else if (
+              component.operation.caseSensitivity === "explicit-case-sensitive"
+            ) {
+              attributeQuery.push("s");
+            }
           }
         }
         getAttributeQuery(ref).push(attributeQuery);
@@ -311,7 +326,7 @@ function parseComponents(
         getAttributeQuery(ref).unshift([
           "a",
           "className",
-          "*=",
+          "~=",
           component.name,
         ]);
       } else {
@@ -464,11 +479,23 @@ function parseIsWhereComponents(
         ? // [data-*] are turned into `dataSet` queries
           ["d", toRNProperty(component.name.replace("data-", ""))]
         : // Everything else is turned into `attribute` queries
-          ["a", toRNProperty(component.name)];
+          [
+            "a",
+            component.name.startsWith("aria-")
+              ? component.name
+              : toRNProperty(component.name),
+          ];
       if (component.operation) {
         const operator = operatorMap[component.operation.operator];
         // Append the operator onto the attribute query
         attributeQuery.push(operator, component.operation.value);
+        if (component.operation.caseSensitivity === "ascii-case-insensitive") {
+          attributeQuery.push("i");
+        } else if (
+          component.operation.caseSensitivity === "explicit-case-sensitive"
+        ) {
+          attributeQuery.push("s");
+        }
       }
       queries ??= [{ specificity: [] }];
       for (const query of queries) {

package/src/compiler/stylesheet.ts

@@ -9,6 +9,7 @@ import type {
   AnimationKeyframes,
   AnimationRecord,
   CompilerOptions,
+  CompilerWarnings,
   ContainerQuery,
   MediaCondition,
   ReactNativeCssStyleSheet,
@@ -56,7 +57,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: {
@@ -68,8 +69,9 @@ export class StylesheetBuilder {
       ruleOrder: number;
       warningProperty?: string;
       warningProperties: string[];
-      warningValues: Record<string, unknown[]>;
+      warningValues: Record<string, string[]>;
       warningFunctions: string[];
+      syntaxWarnings: Set<string>;
     } = {
       ruleSets: {},
       rem: 14,
@@ -77,6 +79,7 @@ export class StylesheetBuilder {
       warningProperties: [],
       warningValues: {},
       warningFunctions: [],
+      syntaxWarnings: new Set(),
     },
     private selectors: SelectorList = [],
   ) {}
@@ -198,18 +201,17 @@ export class StylesheetBuilder {
   }
 
   addWarning(type: "property" | "value", property: string): void;
-  addWarning(type: "style", property: string, value: unknown): void;
+  addWarning(type: "style", property: string, value: string): void;
   addWarning(
     type: "property" | "style" | "value",
     property: string,
-    value?: unknown,
+    value: string = property,
   ): void {
     switch (type) {
       case "property":
         this.shared.warningProperties.push(property);
         break;
       case "value": {
-        value = property;
         property = this.shared.warningProperty ?? "";
 
         if (!property) {
@@ -227,12 +229,13 @@ export class StylesheetBuilder {
     }
   }
 
-  getWarnings() {
-    const result: {
-      properties?: string[];
-      values?: Record<string, unknown[]>;
-      functions?: string[];
-    } = {};
+  // A lightningcss message carries no position, so a repeated mistake is one entry
+  addSyntaxWarning(message: string): void {
+    this.shared.syntaxWarnings.add(message);
+  }
+
+  getWarnings(): CompilerWarnings {
+    const result: CompilerWarnings = {};
 
     if (this.shared.warningProperties.length) {
       result.properties = this.shared.warningProperties;
@@ -246,6 +249,10 @@ export class StylesheetBuilder {
       result.functions = this.shared.warningFunctions;
     }
 
+    if (this.shared.syntaxWarnings.size) {
+      result.syntax = [...this.shared.syntaxWarnings];
+    }
+
     return result;
   }
 
@@ -403,12 +410,10 @@ export class StylesheetBuilder {
       } else {
         forceTuple = true;
       }
-    } else if (propPath) {
-      forceTuple = true;
-    } else {
-      propPath = property;
     }
 
+    propPath ??= property;
+
     if (forceTuple && !Array.isArray(propPath)) {
       propPath = [propPath];
     }
@@ -579,6 +584,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,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,22 +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";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNFlatList> = {
+  className: "style",
   ListFooterComponentClassName: "ListFooterComponentStyle",
   ListHeaderComponentClassName: "ListHeaderComponentStyle",
   columnWrapperClassName: "columnWrapperStyle",
   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,21 +7,20 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNImageBackground> = {
-  className: {
-    target: "style",
-    nativeStyleMapping: {
-      backgroundColor: true,
-    },
-  },
+  className: "style",
+  imageClassName: "imageStyle",
 };
 
-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,18 +7,20 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
-  className: {
-    target: "style",
-  },
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
 };
 
-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/SafeAreaProvider.tsx

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

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;