react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.7da12fa

package/src/compiler/inline-variables.ts

@@ -0,0 +1,209 @@
+import type {
+  Declaration,
+  DeclarationBlock,
+  StyleSheet,
+  TokenOrValue,
+} from "lightningcss";
+
+import type { UniqueVarInfo } from "./compiler.types";
+
+export function inlineVariables(
+  stylesheet: StyleSheet,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  for (const [name, info] of [...vars]) {
+    if (info.count !== 1) {
+      vars.delete(name);
+    } else {
+      flattenVar(name, vars);
+    }
+  }
+
+  stylesheet.rules = stylesheet.rules.map(function checkRule(rule) {
+    switch (rule.type) {
+      case "custom":
+      case "font-face":
+      case "font-palette-values":
+      case "font-feature-values":
+      case "namespace":
+      case "layer-statement":
+      case "property":
+      case "view-transition":
+      case "ignored":
+      case "unknown":
+      case "import":
+      case "page":
+      case "counter-style":
+      case "moz-document":
+      case "nesting":
+      case "viewport":
+      case "custom-media":
+      case "scope":
+      case "starting-style":
+        return rule;
+
+      case "media":
+        rule.value.rules = rule.value.rules.map((rule) => checkRule(rule));
+        return rule;
+      case "keyframes":
+        rule.value.keyframes = rule.value.keyframes.map((keyframe) => {
+          keyframe.declarations =
+            replaceDeclarationBlock(keyframe.declarations, vars) ??
+            keyframe.declarations;
+
+          return keyframe;
+        });
+        return rule;
+      case "style":
+        rule.value.declarations = replaceDeclarationBlock(
+          rule.value.declarations,
+          vars,
+        );
+
+        rule.value.rules = rule.value.rules?.flatMap((rule) => checkRule(rule));
+
+        return rule;
+      case "nested-declarations":
+        rule.value.declarations =
+          replaceDeclarationBlock(rule.value.declarations, vars) ?? {};
+        return rule;
+      case "supports":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "layer-block":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "container":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+    }
+  });
+
+  return stylesheet;
+}
+
+function replaceDeclarationBlock(
+  block: DeclarationBlock | undefined,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (!block) return;
+
+  block.declarations = block.declarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  block.importantDeclarations = block.importantDeclarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  return block;
+}
+
+function replaceDeclaration(
+  declaration: Declaration,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (
+    declaration.property !== "unparsed" &&
+    declaration.property !== "custom"
+  ) {
+    return declaration;
+  }
+
+  if (declaration.property === "custom" && vars.has(declaration.value.name)) {
+    return;
+  }
+
+  declaration.value.value = declaration.value.value.flatMap((part) => {
+    return flattenPart(part, vars);
+  });
+
+  return declaration;
+}
+
+function flattenPart(
+  part: TokenOrValue,
+  vars: Map<string, UniqueVarInfo>,
+): TokenOrValue | TokenOrValue[] {
+  if (part.type === "var") {
+    const varInfo = vars.get(part.value.name.ident);
+
+    if (!varInfo) {
+      part.value.fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return part;
+    } else if (varInfo.value === undefined) {
+      const fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return fallback ?? [];
+    }
+
+    return varInfo.value;
+  } else if (part.type === "function") {
+    part.value.arguments = part.value.arguments.flatMap((arg) => {
+      return flattenPart(arg, vars);
+    });
+  }
+
+  return part;
+}
+
+function flattenVar(
+  name: string,
+  vars: Map<string, UniqueVarInfo>,
+  seen = new Set<string>(),
+) {
+  if (seen.has(name)) {
+    vars.delete(name);
+  }
+
+  seen.add(name);
+
+  let varInfo = vars.get(name);
+
+  if (!varInfo || varInfo.flat) {
+    return;
+  }
+
+  let varInfoValue = varInfo.value?.flatMap((part) => {
+    if (part.type === "var") {
+      const name = part.value.name.ident;
+
+      flattenVar(name, vars, seen);
+
+      const nestedVarInfo = vars.get(part.value.name.ident);
+      if (nestedVarInfo?.value) {
+        return nestedVarInfo.value;
+      }
+    }
+    return flattenPart(part, vars);
+  });
+
+  // If the variable is shorthand for "initial", substitute it for undefined
+  if (
+    varInfoValue?.length === 2 &&
+    varInfoValue[0]?.type === "token" &&
+    varInfoValue[0].value.type === "ident" &&
+    varInfoValue[0].value.value === "initial" &&
+    varInfoValue[1]?.type === "token" &&
+    varInfoValue[1].value.type === "white-space"
+  ) {
+    varInfoValue = undefined;
+  }
+
+  varInfo = {
+    count: 1,
+    flat: true,
+    value: varInfoValue,
+  };
+
+  vars.set(name, varInfo);
+}

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,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];
     }
@@ -568,6 +561,12 @@ export class StylesheetBuilder {
             : [value];
           // Append extra media queries if they exist
           this.shared[type][name].push(variableValue);
+
+          if (type === "rootVariables" && name === "__rn-css-em") {
+            const remName = "__rn-css-rem";
+            this.shared[type][remName] ??= [];
+            this.shared[type][remName].push(variableValue);
+          }
         }
       }
     }
@@ -578,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,31 @@
+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> = {
+  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";